web-dev-qa-db-fra.com

Mise à jour de la série Highcharts en javascript

J'essaie de mettre à jour une série Highchart en générant un nouveau tableau avec les données actuelles de la base de données. Mais pour une raison quelconque, je ne peux trouver que des informations sur la manière de parcourir les données une par une. Une fois qu'un graphique est créé, il ne fait que réexécuter le même code afin que les étiquettes, etc. ne changent pas - seuls [pointStart] et [data] changent.

Existe-t-il un moyen de mettre à jour toutes les données dans leur ensemble? Je n'ai pas non plus réussi à obtenir une boucle for pour fonctionner correctement.

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

la sortie du tableau ressemble à [0: ['nom': 'Californie', 'données': [0,002, 0,003 ...], 1: ['nom': 'Oklahoma', 'données': [0,001, 0,002 ...], 'type': 'ligne', '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);
    }
});

Mise à jour: cela fait la série mais pas le 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;
}
javascriptarraysjsonhighcharts
14
jbolanos

Pour mettre à jour un graphique, je fais généralement ceci:

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

Essayez d'appeler redessiner après la mise à jour.

23
StuR

Dans mon cas, je souhaite initialiser mon graphique avant que les données ne soient disponibles. J'initialise donc mon graphique avec une série vide, puis je le mets à jour avec addSeries.

JsFiddle complet ici: https://jsfiddle.net/qyh81spb/

Ma carte reçoit les données 2 secondes après avoir été initialisée:

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

Je l'initialise donc avec une série vide:

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

Et chaque fois que les données sont disponibles, je fais ceci:

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

Voir le jsfiddle ci-dessus pour les détails complets du code.

5
Benjamin Crouzier