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