highcharts范围选择器未显示剧情

问题描述 投票:2回答:1

这是我用于绘制图表的代码。与库存数据有关

      $('#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值是毫秒。

非常感谢!

javascript jquery highcharts
1个回答
0
投票

您在控制台中出现Highcharts错误#15:https://www.highcharts.com/errors/15/。这意味着您有未排序的数据,因此您需要对其进行排序:

chart.addSeries({
    type: 'line',
    name: 'test',
    data: [...].sort(function(a, b){
        return a.x - b.x;
    }),
});

实时演示: https://jsfiddle.net/BlackLabel/oLfa4xy3/

© www.soinside.com 2019 - 2024. All rights reserved.