Highcharts candlestick(K线图)案例

最新推荐文章于 2022-05-07 18:02:45 发布

weixin_30608131

最新推荐文章于 2022-05-07 18:02:45 发布

阅读量565

点赞数

文章标签： python php javascript ViewUI

原文链接：http://www.cnblogs.com/xuyubing/p/5033661.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>

<body>
    <div id="container" style="height: 400px"></div>
</body>

</html>
<script src="jquery.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$(function() {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function(data) {

        Highcharts.setOptions({
            lang: {
                rangeSelectorZoom: '分类',
                resetZoom:'重置',
                rangeSelectorFrom: '从',
                rangeSelectorTo: '到',
                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                shortMonths: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            },
            global: {
                useUTC: false
            }
        });

        // create the chart
        $('#container').highcharts('StockChart', {
            rangeSelector: {
                selected: 0,
                inputDateFormat: '%Y-%b-%e',
                buttons: [{
                    type: 'day',
                    count: 1,
                    text: '日K'
                }, {
                    type: 'all',
                    text: '所有'
                }]
            },
            credits: {
                enabled: false
            },
            title: {
                text: '粤贵银行情K线图'
            },

            tooltip: {
                shared: true,
                useHTML: true,
                headerFormat: '<small>{point.key}</small><table>',
                pointFormat: '<tr><td style="color: {series.color}" colspan="2">{series.name} </td></tr>' +
                    '<tr><td>开盘:</td><td style="text-align: right">{point.open}</td></tr>' +
                    '<tr><td>最高:</td><td style="text-align: right">{point.high}</td></tr>' +
                    '<tr><td>最低:</td><td style="text-align: right">{point.low}</td></tr>' +
                    '<tr><td>收盘:</td><td style="text-align: right">{point.close}</td></tr>',
                footerFormat: '</table>',
                valueDecimals: 2,
                xDateFormat: "%Y.%b.%e,%A"
            },
            plotOptions: {
                candlestick: {//红涨绿跌
                    color: 'green',
                    upColor: 'red'
                }
            },
            xAxis: {//自定义X轴显示格式
                labels: {
                    formatter: function() {
                        var date = new Date(this.value);                        
                        var month = date.getMonth() + 1;
                        var day = date.getDate();

                        if (month < 10) {
                            month = '0' + month;
                        }
                        if (day < 10) {
                            day = '0' + day;
                        }
                        return month + '.' + day;
                    }
                }
            },
            series: [{
                type: 'candlestick',
                name: '粤贵银',
                data: data,
            }]
        });
  
    });
});
</script>