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的x值（对于一行），该值应以毫秒为单位。

x：数字

点的x值。 对于日期时间轴，X值是自1970年以来的时间戳（以毫秒为单位）。

因此，如果您改为执行以下操作：

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

它应该工作。 （假设result[i].MyDate.match(/\\d+/)[0] * 1为您提供时间，以毫秒为单位。