<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<style type="text/css">
html, body, form {
margin: 0px;
padding: 0px;
background-color: #808080;
}
#container {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highstock.js"></script>
<script src="../../code/css/js/modules/oldie.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/plugins/highcharts-zh_CN.js"></script>
<div id="container"></div>
<script type="text/javascript">
var data = [
'2018-05-21 09:30,14.76,0,14.760,0',
'2018-05-21 09:31,14.77,30607.37,14.760,0',
'2018-05-21 09:32,14.77,24655.81,14.763,0',
'2018-05-21 09:33,14.80,19947.15,14.769,0',
'2018-05-21 09:34,14.80,22193.24,14.776,0',
'2018-05-21 09:35,14.76,15775.39,14.776,0',
'2018-05-21 09:36,14.69,15676,14.770,0',
'2018-05-21 09:37,14.70,10956.8,14.764,0',
'2018-05-21 09:38,14.72,8759.4,14.761,0',
'2018-05-21 09:39,14.75,9242.46,14.760,0',
'2018-05-21 09:40,14.72,8539.74,14.759,0',
'2018-05-21 09:41,14.77,8408.42,14.758,0',
'2018-05-21 09:42,14.80,8661.92,14.759,0',
'2018-05-21 09:43,14.84,13992.27,14.763,0',
'2018-05-21 09:44,14.90,22061.61,14.774,0',
'2018-05-21 09:45,14.87,23347.39,14.784,0',
'2018-05-21 09:46,14.88,14240.01,14.788,0',
'2018-05-21 09:47,14.87,12856,14.792,0',
'2018-05-21 09:48,14.82,9982,14.794,0',
'2018-05-21 09:49,14.86,4062,14.795,0',
'2018-05-21 09:50,14.85,7610.39,14.796,0',
'2018-05-21 09:51,14.84,7829.4,14.797,0',
'2018-05-21 09:52,14.80,10405.8,14.798,0',
'2018-05-21 09:53,14.80,7222.81,14.798,0',
'2018-05-21 09:54,14.82,6376.76,14.798,0',
'2018-05-21 09:55,14.80,10602,14.799,0',
'2018-05-21 09:56,14.80,4928,14.799,0',
'2018-05-21 09:57,14.77,10401,14.798,0',
'2018-05-21 09:58,14.78,10360.76,14.797,0',
'2018-05-21 09:59,14.76,8022.76,14.796,0',
'2018-05-21 10:00,14.75,4119.24,14.796,0',
'2018-05-21 10:01,14.78,7426.28,14.795,0',
'2018-05-21 10:02,14.84,6477.45,14.795,0',
'2018-05-21 10:03,14.82,9512,14.796,0',
'2018-05-21 10:04,14.80,5685,14.796,0',
'2018-05-21 10:05,14.78,3274.4,14.796,0',
'2018-05-21 10:06,14.79,2799,14.796,0',
'2018-05-21 10:07,14.77,4812.6,14.796,0',
'2018-05-21 10:08,14.77,5285.8,14.795,0',
'2018-05-21 10:09,14.78,4270.8,14.795,0',
'2018-05-21 10:10,14.79,3927.6,14.795,0',
'2018-05-21 10:11,14.77,6853.2,14.795,0',
'2018-05-21 10:12,14.79,3276.75,14.795,0',
'2018-05-21 10:13,14.79,2222.2,14.795,0',
'2018-05-21 10:14,14.80,2214.56,14.794,0',
'2018-05-21 10:15,14.79,3854.54,14.794,0',
'2018-05-21 10:16,14.78,6547.4,14.794,0',
'2018-05-21 10:17,14.77,8287.1,14.794,0',
'2018-05-21 10:18,14.77,2801.05,14.794,0',
'2018-05-21 10:19,14.77,5938.04,14.793,0',
'2018-05-21 10:20,14.78,3286.86,14.793,0',
'2018-05-21 10:21,14.79,4122.04,14.793,0',
'2018-05-21 10:22,14.80,3474.4,14.793,0',
'2018-05-21 10:23,14.81,4282,14.793,0',
'2018-05-21 10:24,14.83,3873.01,14.794,0',
'2018-05-21 10:25,14.82,4148,14.794,0',
'2018-05-21 10:26,14.84,3320.52,14.794,0',
'2018-05-21 10:27,14.86,10611,14.795,0',
'2018-05-21 10:28,14.84,4563,14.796,0',
'2018-05-21 10:29,14.83,3987.6,14.796,0',
'2018-05-21 10:30,14.84,2455,14.796,0',
'2018-05-21 10:31,14.85,7927,14.797,0',
'2018-05-21 10:32,14.89,8220.69,14.798,0',
'2018-05-21 10:33,14.87,12568,14.800,0',
'2018-05-21 10:34,14.86,7407,14.801,0',
'2018-05-21 10:35,14.86,3920.2,14.801,0',
'2018-05-21 10:36,14.86,3525,14.802,0',
'2018-05-21 10:37,14.86,4175.03,14.802,0',
'2018-05-21 10:38,14.88,3478.2,14.803,0',
'2018-05-21 10:39,14.88,4587,14.803,0',
'2018-05-21 10:40,14.87,7324,14.804,0',
'2018-05-21 10:41,14.87,6254,14.805,0',
'2018-05-21 10:42,14.87,4714,14.805,0',
'2018-05-21 10:43,14.85,6088.88,14.806,0',
'2018-05-21 10:44,14.85,7043,14.806,0',
'2018-05-21 10:45,14.84,3235.8,14.806,0',
'2018-05-21 10:46,14.84,2535.2,14.807,0',
'2018-05-21 10:47,14.81,16693,14.807,0',
'2018-05-21 10:48,14.81,2843.14,14.807,0',
'2018-05-21 10:49,14.81,2604,14.807,0',
'2018-05-21 10:50,14.82,1333.6,14.807,0',
'2018-05-21 10:51,14.84,1000,14.807,0',
'2018-05-21 10:52,14.82,1128.4,14.807,0',
'2018-05-21 10:53,14.82,1492,14.807,0',
'2018-05-21 10:54,14.85,2859.41,14.807,0',
'2018-05-21 10:55,14.84,2614.39,14.807,0',
'2018-05-21 10:56,14.86,2113.4,14.808,0',
'2018-05-21 10:57,14.86,1917,14.808,0',
'2018-05-21 10:58,14.87,2616,14.808,0',
'2018-05-21 10:59,14.86,2548.32,14.808,0',
'2018-05-21 11:00,14.84,1694.28,14.808,0',
'2018-05-21 11:01,14.87,4115.12,14.809,0',
'2018-05-21 11:02,14.90,20089.75,14.811,0',
'2018-05-21 11:03,14.97,28700.38,14.817,0',
'2018-05-21 11:04,14.97,23649.6,14.821,0',
'2018-05-21 11:05,14.98,24443,14.827,0',
'2018-05-21 11:06,14.96,12875,14.829,0',
'2018-05-21 11:07,14.98,14160.51,14.832,0',
'2018-05-21 11:08,14.98,11063.8,14.834,0',
'2018-05-21 11:09,14.96,13138.68,14.836,0',
'2018-05-21 11:10,14.97,4581.2,14.837,0',
'2018-05-21 11:11,14.97,6417,14.838,0',
'2018-05-21 11:12,14.95,2714,14.838,0',
'2018-05-21 11:13,14.95,3541,14.839,0',
'2018-05-21 11:14,14.94,2896.4,14.839,0',
'2018-05-21 11:15,14.95,2549.06,14.839,0',
'2018-05-21 11:16,14.96,2409.2,14.840,0',
'2018-05-21 11:17,14.96,2899,14.840,0',
'2018-05-21 11:18,14.98,3151.6,14.840,0',
'2018-05-21 11:19,14.98,4245,14.841,0',
'2018-05-21 11:20,14.96,3809.4,14.842,0',
'2018-05-21 11:21,14.96,1786,14.842,0',
'2018-05-21 11:22,14.97,1947,14.842,0',
'2018-05-21 11:23,14.98,11209.6,14.844,0',
'2018-05-21 11:24,15.00,4199.2,14.845,0',
'2018-05-21 11:25,15.02,8129.86,14.846,0',
'2018-05-21 11:26,15.02,10531,14.848,0',
'2018-05-21 11:27,15.00,6350.46,14.849,0',
'2018-05-21 11:28,15.01,3041.08,14.850,0',
'2018-05-21 11:29,15.02,5049.52,14.851,0',
'2018-05-21 11:30,15.00,3537.48,14.851,0',
'2018-05-21 13:01,15.02,6908.48,14.853,0',
'2018-05-21 13:02,15.01,3143.88,14.853,0',
'2018-05-21 13:03,15.01,3129.4,14.854,0',
'2018-05-21 13:04,15.02,2122,14.854,0',
'2018-05-21 13:05,15.01,2794.32,14.855,0',
'2018-05-21 13:06,15.00,2268,14.855,0',
'2018-05-21 13:07,15.01,3205.89,14.855,0',
'2018-05-21 13:08,15.03,5199.06,14.856,0',
'2018-05-21 13:09,15.04,5439,14.857,0',
'2018-05-21 13:10,15.05,7580.6,14.859,0',
'2018-05-21 13:11,15.05,4543.04,14.860,0',
'2018-05-21 13:12,15.04,5759.6,14.861,0',
'2018-05-21 13:13,15.01,4961.16,14.862,0',
'2018-05-21 13:14,14.98,6918.67,14.863,0',
'2018-05-21 13:15,14.99,2915.8,14.863,0',
'2018-05-21 13:16,15.00,3133.92,14.864,0',
'2018-05-21 13:17,15.01,2707.4,14.864,0',
'2018-05-21 13:18,15.00,3039.8,14.864,0',
'2018-05-21 13:19,14.98,2844.88,14.865,0',
'2018-05-21 13:20,14.97,2166.6,14.865,0',
'2018-05-21 13:21,14.96,4269.32,14.865,0',
'2018-05-21 13:22,14.98,7507.64,14.866,0',
'2018-05-21 13:23,14.95,4223,14.866,0',
'2018-05-21 13:24,14.95,1889,14.867,0',
'2018-05-21 13:25,14.97,3663.76,14.867,0',
'2018-05-21 13:26,14.98,2920.42,14.867,0',
'2018-05-21 13:27,14.98,2755,14.868,0',
'2018-05-21 13:28,14.98,2575,14.868,0',
'2018-05-21 13:29,14.98,4017.4,14.868,0',
'2018-05-21 13:30,14.96,1991.18,14.869,0',
'2018-05-21 13:31,14.97,2620.2,14.869,0',
'2018-05-21 13:32,14.96,3389.62,14.869,0',
'2018-05-21 13:33,14.96,1285,14.869,0',
'2018-05-21 13:34,14.95,4503.4,14.870,0',
'2018-05-21 13:35,14.96,3608.83,14.870,0',
'2018-05-21 13:36,14.96,2702.2,14.870,0',
'2018-05-21 13:37,14.96,3752.92,14.870,0',
'2018-05-21 13:38,14.96,4319,14.871,0',
'2018-05-21 13:39,14.93,13662.09,14.872,0',
'2018-05-21 13:40,14.96,3730,14.872,0',
'2018-05-21 13:41,14.94,5383,14.872,0',
'2018-05-21 13:42,14.94,2739.6,14.872,0',
'2018-05-21 13:43,14.91,7901.2,14.873,0',
'2018-05-21 13:44,14.92,3606,14.873,0',
'2018-05-21 13:45,14.94,2810.77,14.873,0',
'2018-05-21 13:46,14.92,3506,14.873,0',
'2018-05-21 13:47,14.93,2423.2,14.873,0',
'2018-05-21 13:48,14.94,3257,14.874,0',
'2018-05-21 13:49,14.94,1391,14.874,0',
'2018-05-21 13:50,14.96,3568,14.874,0',
'2018-05-21 13:51,14.96,3259,14.874,0',
'2018-05-21 13:52,14.95,2498,14.874,0',
'2018-05-21 13:53,14.97,2717,14.875,0',
'2018-05-21 13:54,14.98,2021.8,14.875,0',
'2018-05-21 13:55,14.98,2211,14.875,0',
'2018-05-21 13:56,14.96,2423.2,14.875,0',
'2018-05-21 13:57,14.95,2496,14.875,0',
'2018-05-21 13:58,14.96,1357.19,14.875,0',
'2018-05-21 13:59,14.97,1938.8,14.876,0',
'2018-05-21 14:00,14.96,820.2,14.876,0',
'2018-05-21 14:01,14.96,1514.2,14.876,0',
'2018-05-21 14:02,14.96,1274.2,14.876,0',
'2018-05-21 14:03,14.96,3909.4,14.876,0',
'2018-05-21 14:04,14.97,5599.22,14.877,0',
'2018-05-21 14:05,15.02,10436.5,14.878,0',
'2018-05-21 14:06,14.98,8210.1,14.879,0',
'2018-05-21 14:07,14.99,3273,14.879,0',
'2018-05-21 14:08,15.00,2874,14.879,0'
];
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
i = 0,
date = null,
temp = null,
open = null,
yesterdayClose = null,
change = null;
changeNum = null;
for (i; i < dataLength; i += 1) {
temp = data[i].split(',');
date = new Date(temp[0]).getTime();
open = parseFloat(temp[1]);
if (i === 0) {
yesterdayClose = open;
change = 0;
changeNum = 0;
} else {
change = (open - yesterdayClose) / yesterdayClose * 100;
changeNum = open - yesterdayClose
}
ohlc.push([
date,
open,
change,
changeNum
]);
volume.push([
date,
parseInt(temp[2]) // the volume
]);
}
Highcharts.setOptions({
global: {
useUTC: false,
timezone: 'Chinese (China)'
}
});
// create the chart
Highcharts.stockChart('container', {
credits: {
enabled: false // 禁用版权信息
},
exporting: {
enabled: false
},
rangeSelector: {
buttonTheme: {
display: 'none' // 不显示按钮
},
inputEnabled: false // 不显示日期输入框
},
navigator: {
enabled: false //关闭导航器
},
scrollbar: {
enabled: false //关闭滚动条
},
title: {
text: 'AAPL Historical'
},
xAxis: {
connectNulls: true,
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
//minute: '%Y-%m-%d<br/>%H:%M',
minute: '%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
labels: {
formatter: function () {
console.log(this)
if (this.value === new Date('2018/05/21 13:00').getTime()) {
return '11:30/13:00';
}
return Highcharts.dateFormat('%H:%M', this.value);
}
},
breaks: [{ // Nights
from: new Date('2018/05/21 11:30').getTime(),
to: new Date('2018/05/21 13:00').getTime()
}]
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
yAxis: [{
// startOnTick: false,
// endOnTick: false,
title: {
text: null
},
height: '75%',
lineWidth: 2,
labels: {
x: 30,
formatter: function () {
var percent = (this.value - yesterdayClose) / yesterdayClose * 100,
flag = percent > 0;
return '<span style="color: ' + (flag ? 'red' : 'green') + '">' + (flag ? '+' : '') + percent.toFixed(2) + '%</span>';
}
}
}, {
height: '75%',
linkedTo: 0,
opposite: false
}, {
title: {
text: "成交量"
},
top: '80%',
height: '20%',
offset: 0,
lineWidth: 2,
labels: {
x: 50,
}
}],
tooltip: {
split: false,
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
series: [
{
type: 'spline',
name: '成交价',
id: 'aapl',
data: ohlc,
keys: ['x', 'y', 'change', 'changeNum'],
tooltip: {
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} </b>' +
'</td></tr><tr><td><b>涨跌幅：</b></td><td style="text-align: right"><b>{point.change}%</b></td></tr>' +
'<tr><td><b>涨跌额：</b></td><td style="text-align: right"><b>{point.changeNum}</b></td></tr>',
valueDecimals: 2
},
},
{
type: 'column',
name: 'Volume',
id: 'volume',
data: volume,
yAxis: 2
}
]
});
</script>
</body>
</html>
浙公网安备 33010602011771号