JSFiddle - React, Tailwind, and code Playground

by Andy keh

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div class="mod_market">
	<div class="hd">
    	<ul class="tabs" id="marketh_tabs">
        	<li class="cur"><span>1分线</span></li>
            <li><span>15分线</span></li>
            <li><span>30分线</span></li>
            <li><span>小时线</span></li>
            <li><span>日线</span></li>
            <li><span>月线</span></li>
            <li><span>年线</span></li>
        </ul>
    </div>
    <div class="bd">
    	<div id="hb_market" style="height:610px"></div>
    </div>
</div>

CSS

*{ padding:0; margin:0}
ul,li{ list-style:none}
	.mod_market{ margin:20px;}
	.mod_market .hd{ background:#fafafa; height:32px; line-height:27px; border-bottom:1px solid #d9d9d9}
	.mod_market .hd .tabs{ padding:0 10px}
	.mod_market .hd .tabs li{ float:left; border-top:3px solid #fafafa;  color:#666; cursor:pointer}
	.mod_market .hd .tabs li span{ display:inline-block; padding:0 15px;padding-bottom:3px;}
	.mod_market .hd .tabs li.cur{ border-color:#2c99ff; color:#333;}
	.mod_market .hd .tabs li.cur span{border:1px solid #d9d9d9; background:#FFF; border-bottom:none; border-top:none}
	.mod_market .bd{}
	#hb_market{ margin-bottom:25px}

JavaScript

function consoles(t) {
    try {
        if (window.console && window.consoles) {
            console.log(t)
        }
    } catch(e) {}
};

//时间转换为时间戳
function getunix(time) {
    var now = new Date(),
    year = time.substr(0, 4),
    month = time.substr(4, 2),
    date = time.substr(6, 2),
    hour = Number(time.substr(8, 2)) - 8,
    minute = time.substr(10, 2),
    second = time.substr(12, 2),
    millisecond = time.substr(14, 3);
    return Date.UTC(year, month - 1, date, hour, minute, second, millisecond);
}

//数据地址
var data_market_btc = 'https://www.huobi.com/market/market.php?a=js_kline&period=001&num=20';
var data_market_callback = "jsoncallback";
var data_market_jsonpcallback_btc = "view_market_btc";
//切换tab
$('#marketh_tabs li').each(function(i, element) {
    $('#marketh_tabs li').click(function() {
        $('#marketh_tabs li').removeClass('cur');
        $(this).addClass('cur');
        if ($(this).index() == 0) {
            dataMarket('001', '100')
        }
        if ($(this).index() == 1) {
            dataMarket('015', '100')
        }
        if ($(this).index() == 2) {
            dataMarket('030', '100')
        }
    })
});

function dataMarket(type, num) {
    data_market_btc = 'https://www.huobi.com/market/market.php?a=js_kline&period=' + type + '&num=' + num;
    ajaxMarket();
}

//图表全局设置
Highcharts.setOptions({
    lang: {
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        shortMonths: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        rangeSelectorZoom: '显示范围'
    },
    credits: { //版权信息
        text: "HUOBI.com",
        href: "http://www.huobi.com",
        position: {
            x: -10,
            y: 0,
            align: 'right',
            verticalAlign: 'bottom'

        }
    },
    global: {
        useUTC: false
    }
});
//数据集
var _data = '',
_ohlc = [],
_volume = [],
_datalen =...