Обновление серии Highchart в javascript
Я пытаюсь обновить серию 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': 'California', 'data': [0.002, 0.003 ...], 1: ['name':' Oklahoma',' 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);
}
});
Update: это делает серию, но не 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;
}
2 ответов
чтобы обновить диаграмму, я обычно делаю это:
chart.series[0].update({
pointStart: newSeries[0].pointStart,
data: newSeries[0].data
}, true); //true / false to redraw
попробуйте вызвать redraw после обновления.
в моем случае я хочу инициализировать свою диаграмму до того, как данные будут доступны. Поэтому я инициализирую свою диаграмму пустой серией, а затем обновляю ее с помощью 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 выше для полных деталей кода.