JavaScript中的Highchart系列更新

Question

我试图通过从数据库生成一个新数组，并使用当前数据更新Highchart系列。 但出于某些原因，我只能找到有关每次遍历数据的信息。 一旦创建了图表，它只会重新运行相同的代码，因此标签等不会改变-只有[pointStart]和[data]会改变。

有没有一种方式可以整体更新所有数据？ 我还没有成功使for循环正常工作。

function generateSeries(data){
    var cData = [];
    var rollup = data.rollupData;
    cData['type'] = 'line';
    cData['pointStart'] = convertDateTime(data.lastMinute);
    cData['pointInterval'] = 60 * 1000;
    for(var i in rollup){
        var x = new Array();
        var v = rollup[i].rttSystem;
        switch(v){
            case('line'): var vn = ' (L)'; break;
            case('node'): var vn = ' (N)'; break;
            case('module'): var vn = ' (M)'; break;
            default: var vn = '';
        }
        x['name'] = rollup[i].rollupName + vn;
        x['data'] = rollup[i].kpiData;
        cData.push(x);
    }
    return cData;
}

数组的输出看起来像[0：['name'：'加利福尼亚'，'data'：[0.002，0.003 ...]，1：['name': '俄克拉荷马州'，'data'：[0.001，0.002 ...]，'type'：'line'，'pointStart'：''，'pointInterval'：60 * 1000]

var chart = new Highcharts.Chart({
    chart: {
    ...
    },
    series: generateSeries(data)
    }, function(chart){
        setInterval(function(){
            var newSeries = generateSeries(data);
            // Udate the series again with the current data
        },60000);
    }
});

更新：这对系列有影响，但不影响 pointStart。

if(chart.series.length > 1){
    var s = 0;
    for(var i in newSeries){
        chart.series[s].setData(newSeries[i].data);
        chart.series[s].pointStart = newSeries[i].pointStart;
        s++;
    }
}else{
    chart.series[0].setData(newSeries[0].data);
    chart.series[0].pointStart = newSeries[0].pointStart;
}

- jbolanos

---

你尝试过使用 setData() http://api.highcharts.com/highstock#Series.setData() 吗？ - Sebastian Bochan

请参见上面的更新 - 这将更新数据，但不会更新pointStart。 - jbolanos

Answer 1

我通常这样更新图表：

chart.series[0].update({
    pointStart: newSeries[0].pointStart,
    data: newSeries[0].data
}, true); //true / false to redraw

在更新后尝试调用redraw。

- StuR

---

当我尝试这样做时，出现了错误：TypeError：chart.series[0].update不是一个函数。 - jbolanos

糟糕 - 我使用的是旧版的Highcharts - 已经更新到3.0.1，现在过去的两天完全是浪费时间 - 谢谢 :) - jbolanos

如何更新 visible:false。 - EMahan K

如何更新visible:false - EMahan K

Answer 2

在我的情况下，我想在数据可用之前初始化我的图表。因此，我使用一个空系列来初始化我的图表，然后使用addSeries更新它。

完整的jsFiddle在这里：https://jsfiddle.net/qyh81spb/ 我的图表在初始化后2秒钟收到数据：

MyChartComponent.initHighcharts();
setTimeout(function() {
  MyChartComponent.setDataFromApi();
  MyChartComponent.updateChart();
}, 2000);

因此，我使用空系列对其进行初始化：

initHighcharts: function() {
  this.chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    ...
    series: [] // initialisation with empty series. This is intentional
  });
},

每当数据可用时，我会这样做：

updateChart: function() {
  this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
    this.chart.addSeries(serie, false); // false is to prevent redrawing
  }.bind(this));
  this.chart.redraw(); // manually redraw
  this.chart.hideLoading(); // stop loading if showLoading() was call before
},

请参考上面的jsfiddle获取完整的代码细节。

- Benjamin Crouzier