Aktualizacja z serii Highchart w javascript

Question

Próbuję zaktualizować serię Highchart, generując nową tablicę z bieżącymi danymi z bazy danych. Ale z jakiegoś powodu mogę znaleźć tylko informacje o przechodzeniu przez dane po jednym na raz. Po utworzeniu wykresu ponownie uruchamia się ten sam kod, więc etykiety itp. Nie zmieniają się - zmienia się tylko [pointStart] i [data].

Czy istnieje sposób na zaktualizowanie wszystkich danych jako całości? Nie udało mi się też poprawnie uruchomić pętli 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; 
} 

ouput tablicy wygląda [0: [ 'name': 'California', 'dane': [0,002, 0,003 ...] 1: [ 'name': 'Oklahoma' 'dane': [0,001, 0,002 ...], 'typ': 'linia', '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); 
    } 
}); 

Aktualizacja: to robi serię ale nie punktStart.

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

Aby zaktualizować wykres I zazwyczaj to zrobić:

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

Spróbuj zadzwonić przerysować po aktualizacji.

Answer 2

W moim przypadku chcę zainicjować mój wykres, zanim dane będą dostępne. Dlatego inicjuję mój wykres pustą serią, a następnie aktualizuję go za pomocą addSeries.

Pełna jsFiddle tutaj: https://jsfiddle.net/qyh81spb/

Mój wykres odbiera dane 2 sekundy po zainicjowany:

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

więc zainicjować go z pustym serii:

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

i kiedykolwiek dane są dostępne, robię to:

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

Zobacz jsfiddle powyżej, aby uzyskać szczegółowe informacje na temat kodu.