javascript - highcharts 图表中的导航器不起作用

Question

图表的其余部分功能正常，当我更改时间刻度时导航器会更新，但调整导航器大小和向左/向右滚动不会执行任何操作(不会更新图表)。

为了初始化图表，我这样做:

Highcharts.stockChart('highchartLineChart', {
    title: {
        text: 'MyTitle'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Time (days)'
        },
        type: 'datetime',
    },
    yAxis: {
        title: {
            text: 'Value'
        },
    },
    navigator: {
        enabled: true,
        series: {
            id: 'navigator',
        }
    },
    series: []
});

然后我有一个 ajax 方法来填充它，如下所示:

var highchartLineData = [];

for (var i = 0; i < result.length; i++) {

    var parsedDate = new Date(result[i].MyDate.match(/\d+/)[0] * 1);

    var lineItem = {
        x: parsedDate,
        y: parseFloat(result[i].Value)
    };

    highchartLineData.push(lineItem);
}

 $('#highchartLineChart').highcharts().addSeries({
     name: "My Chart",
     data: highchartLineData
 });

然后我尝试添加这个，只是尝试各种尝试来修复它

var nav = $('#highchartLineChart').highcharts().get('navigator');
nav.setData(highchartLineData);
$('#highchartLineChart').highcharts().xAxis[0].setExtremes();

但是它没有起作用。尽管您可以左右拖动导航器，但没有任何更新。有时它会破坏它并且顶部图表消失，但如果您按 1m 3m 等它会回来。

控制台中没有错误。有什么想法吗？

Answer 1

在您的代码中执行以下操作:

var parsedDate = new Date(result[i].MyDate.match(/\d+/)[0] * 1);

var lineItem = {
    x: parsedDate,
    y: parseFloat(result[i].Value)
};

将 x 设置为 Date 对象。

根据Highcharts API on x values (for a line)它应该以毫秒为单位。

x: Number

The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970.

因此，如果您执行以下操作:

var lineItem = {
    x: result[i].MyDate.match(/\d+/)[0] * 1,
    y: parseFloat(result[i].Value)
};

它应该可以工作。 (假设 result[i].MyDate.match(/\d+/)[0] * 1 给出以毫秒为单位的时间。