highcharts图中的导航器不起作用

Question

The rest of the chart functions correctly, and the navigator updates when I change the time scale, but resizing the navigator and scrolling left/right doesn't do anything (doesn't update the graph).

To initialise the graph I do this:

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: []
});

Then I have an ajax method to populate it, which looks like this:

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
 });

Then I tried adding this, just playing around with various attempts to fix it

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

However it did not work. Although you can drag the navigator left and right, nothing updates. Sometimes it breaks it and the top graph disappears, but it comes back if you press 1m 3m etc.

There are no errors in the console. Any ideas?

Answer 1

In your code you do the following operation:

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

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

Setting x to be a Date object.

According to Highcharts API on x values (for a line) it should be in milliseconds.

x: Number

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

So if instead you would do the following:

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

it should work. (Assuming result[i].MyDate.match(/\\d+/)[0] * 1 gives you the time in milliseconds.