Highcharts candlestick(K線圖)案例

時間 2019-11-29
標籤 highcharts candlestick 線圖案例简体版
原文原文鏈接
<!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>
相關標籤/搜索