这是我用于绘制图表的代码。与库存数据有关
$('#container').highcharts('StockChart', {
tooltip: {
useHTML: true,
formatter: function () {
var d = new Date(this.x);
var s = '';
s += '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br />';
$.each(this.points, function (i, point) {
console.log(point);
s += '<b><span style = "color:green;">' + point.series.name + ' : ' + point.point.close + '</b><br />';
s += '<span style ="color:' + point.series.color + ';">Open</span>: ' + point.point.open +
'<br/><span style ="color:' + point.series.color + ';">High</span>: ' + point.point.high +
'<br/><span style ="color:' + point.series.color + ';">Low</span>: ' + point.point.low +
'<br/><span style ="color:' + point.series.color + ';">Close</span>: ' + point.point.close + '<br/>';
});
return s;
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
series: [{
type: 'spline',
name: 'Data',
data: [
{'x': 1577145600000, 'y': 1603.0, 'high': 1659.0, 'low': 1603.0, 'close': 1631.0, 'open': 1603.0},
{'x': 1577059200000, 'y': 1635.0, 'high': 1667.0, 'low': 1552.0, 'close': 1627.0, 'open': 1635.0},
{'x': 1576972800000, 'y': 1600.0, 'high': 1620.0, 'low': 1560.0, 'close': 1588.0, 'open': 1600.0},
{'x': 1576886400000, 'y': 1581.0, 'high': 1634.0, 'low': 1565.0, 'close': 1590.0, 'open': 1581.0},
{'x': 1576627200000, 'y': 1579.0, 'high': 1590.0, 'low': 1541.0, 'close': 1565.0, 'open': 1579.0},
{'x': 1576540800000, 'y': 1617.0, 'high': 1634.0, 'low': 1565.0, 'close': 1593.0, 'open': 1617.0},
{'x': 1576454400000, 'y': 1621.0, 'high': 1646.0, 'low': 1600.0, 'close': 1617.0, 'open': 1621.0},
{'x': 1576368000000, 'y': 1671.0, 'high': 1707.0, 'low': 1592.0, 'close': 1646.0, 'open': 1671.0},
{'x': 1576281600000, 'y': 1630.0, 'high': 1660.0, 'low': 1597.0, 'close': 1639.0, 'open': 1630.0},
{'x': 1576022400000, 'y': 1602.0, 'high': 1675.0, 'low': 1584.0, 'close': 1633.0, 'open': 1602.0},
{'x': 1575936000000, 'y': 1681.0, 'high': 1690.0, 'low': 1579.0, 'close': 1642.0, 'open': 1681.0},
{'x': 1575849600000, 'y': 1610.0, 'high': 1670.0, 'low': 1565.0, 'close': 1634.0, 'open': 1610.0},
{'x': 1575763200000, 'y': 1572.0, 'high': 1630.0, 'low': 1546.0, 'close': 1591.0, 'open': 1572.0},
{'x': 1575676800000, 'y': 1553.0, 'high': 1641.0, 'low': 1548.0, 'close': 1584.0, 'open': 1553.0},
{'x': 1575417600000, 'y': 1572.0, 'high': 1613.0, 'low': 1536.0, 'close': 1571.0, 'open': 1572.0},
{'x': 1575331200000, 'y': 1520.0, 'high': 1598.0, 'low': 1480.0, 'close': 1577.0, 'open': 1520.0},
{'x': 1575244800000, 'y': 1555.0, 'high': 1568.0, 'low': 1450.0, 'close': 1522.0, 'open': 1555.0},
{'x': 1575158400000, 'y': 1471.0, 'high': 1513.0, 'low': 1444.0, 'close': 1505.0, 'open': 1471.0},
{'x': 1575072000000, 'y': 1382.0, 'high': 1450.0, 'low': 1374.0, 'close': 1441.0, 'open': 1382.0},
{'x': 1574812800000, 'y': 1390.0, 'high': 1392.0, 'low': 1366.0, 'close': 1381.0, 'open': 1390.0},
{'x': 1574726400000, 'y': 1428.0, 'high': 1428.0, 'low': 1381.0, 'close': 1399.0, 'open': 1428.0},
{'x': 1574640000000, 'y': 1353.0, 'high': 1412.0, 'low': 1353.0, 'close': 1404.0, 'open': 1353.0},
{'x': 1574553600000, 'y': 1344.0, 'high': 1375.0, 'low': 1309.0, 'close': 1345.0, 'open': 1344.0},
{'x': 1574467200000, 'y': 1340.0, 'high': 1360.0, 'low': 1301.0, 'close': 1326.0, 'open': 1340.0},
{'x': 1574208000000, 'y': 1339.0, 'high': 1349.0, 'low': 1310.0, 'close': 1323.0, 'open': 1339.0},
{'x': 1574121600000, 'y': 1319.0, 'high': 1350.0, 'low': 1312.0, 'close': 1329.0, 'open': 1319.0},
{'x': 1574035200000, 'y': 1279.0, 'high': 1328.0, 'low': 1279.0, 'close': 1306.0, 'open': 1279.0},
{'x': 1573948800000, 'y': 1288.0, 'high': 1310.0, 'low': 1288.0, 'close': 1291.0, 'open': 1288.0},
],
}]});
它正确显示和绘制所有数据(全部缩放)。但是当我使用范围按钮(缩放1m)时,它不会显示该图。您可以在jsfiddle中看到我的代码。
我搜索了谷歌,但我尝试了很多,但是什么也没做。
有人可以帮忙吗?怎么了?我的x值是毫秒。
非常感谢!
您在控制台中出现Highcharts错误#15:https://www.highcharts.com/errors/15/。这意味着您有未排序的数据,因此您需要对其进行排序:
chart.addSeries({
type: 'line',
name: 'test',
data: [...].sort(function(a, b){
return a.x - b.x;
}),
});