<!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>