Cập nhật chuỗi Highchart trong javascript

Question

Tôi đang cố gắng cập nhật một chuỗi Highchart bằng cách tạo một mảng mới với dữ liệu hiện tại từ cơ sở dữ liệu. Nhưng vì lý do nào đó, tôi chỉ có thể tìm thấy thông tin về việc đi qua dữ liệu một lần. Khi một biểu đồ được tạo ra, nó chỉ chạy lại cùng một mã một lần nữa để các nhãn vv không thay đổi - chỉ có [pointStart] và [data] thay đổi.

Có cách nào để cập nhật toàn bộ dữ liệu không? Tôi cũng đã không quản lý để có được một vòng lặp cho hoạt động chính xác.

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

ouput của mảng trông giống như [0: [ 'name': 'California', 'dữ liệu': [0,002, 0,003 ...], 1: [ 'name': 'Oklahoma', 'dữ liệu': [0,001, 0,002 ...], 'loại': 'dòng', '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); 
    } 
}); 

cập nhật: điều này series nhưng không phải là 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; 
} 

Answer 1

Để cập nhật một biểu đồ Tôi thường làm điều này:

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

Thử gọi vẽ lại sau khi cập nhật.

Answer 2

Trong trường hợp của tôi, tôi muốn khởi tạo biểu đồ của mình trước khi dữ liệu có sẵn. Vì vậy, tôi khởi tạo biểu đồ của mình bằng một chuỗi sản phẩm trống và sau đó tôi cập nhật nó với addSeries.

Full jsFiddle đây: https://jsfiddle.net/qyh81spb/

biểu đồ của tôi sẽ nhận dữ liệu 2 giây sau khi được khởi tạo:

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

Vì vậy, tôi khởi nó với một loạt trống:

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

Và khi nhận ra dữ liệu có sẵn, tôi thực hiện điều này:

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 
}, 

Xem jsfiddle ở trên để biết chi tiết mã đầy đủ.