Как корректно динамически обновлять несколько серий графиков?

Использую библиотеку Highcharts (highstock.js).
Делаю по примерам из официальной документации. По ссылкам весь код, но я скопировал сюда основной код.

Несколько серий на графике
https://www.highcharts.com/stock/demo/compare
Основной, код в нескольких сериях на графике:

$.each(names, function (i, name) {
    $.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json',    function (data) {
       seriesOptions[i] = {
            name: name,
            data: data
        };
        seriesCounter += 1;
        if (seriesCounter === names.length) {
            createChart();
        }

Динамическое обновление графика
https://www.highcharts.com/stock/demo/dynamic-update
Основной, код в динамическом обновлении графика:

events: {
            load: function () {
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                }, 1000);

Мне нужно динамически обновлять несколько серий.
Я написал код и он работает, но не всегда корректно. В нем точно есть ошибки, помимо дублирования кода.

Мой код динамического обновления нескольких серий графиков.
Я написал комментарии, где есть сомнения или может работать не корректно.

var GRAPH1seriesOptions = [],
GRAPH1seriesCounter = 0,
GRAPH1names = ['one_curr','two_curr']; //Сейчас всего 2 значения

function createChartGRAPH1() {
Highcharts.stockChart('GRAPH1_container', {
title: {text: 'График 1'},
colors: ['#2b908f','#90ee7e','#f45b5b',],

chart: 
{zoomType: 'x',
events:
{
load: function () {
//Сейчас достаточно 2х переменных. Но выше может быть и 3 и 1 и все 5. Поэтому пришлось подготовиться на все случаи (
var GRAPH1series_0 = this.series[0];
var GRAPH1series_1 = this.series[1];
var GRAPH1series_2 = this.series[2];
var GRAPH1series_3 = this.series[3];
var GRAPH1series_4 = this.series[4];
var GRAPH1series_5 = this.series[5];


setInterval(function ()
{

$.each(GRAPH1names, function (i, name) {
current_time=(new Date()).getTime()+17400000; // current time

$.getJSON('actions.php?get_live_data&currency_id_name='+name, function(GRAPH1live_data) {

//Сейчас достаточно 2х переменных. Но выше может быть и 3 и 1 и все 5. Поэтому пришлось подготовиться на все случаи (
if (i==0) GRAPH1series_0.addPoint([current_time, GRAPH1live_data], true, true);
if (i==1) GRAPH1series_1.addPoint([current_time, GRAPH1live_data], true, true);
if (i==2) GRAPH1series_2.addPoint([current_time, GRAPH1live_data], true, true);
if (i==3) GRAPH1series_3.addPoint([current_time, GRAPH1live_data], true, true);
if (i==4) GRAPH1series_4.addPoint([current_time, GRAPH1live_data], true, true);
if (i==5) GRAPH1series_5.addPoint([current_time, GRAPH1live_data], true, true);


});
});
}, 10000); //Время автообновления 10 секунд
}
}
},

Разумеется, мой код выше мало того, что некрасивый, но и скорее всего содержит ошибки в логике.
Как корректно динамически обновлять несколько серий графиков?
  • Вопрос задан
  • 666 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Вместо того, чтобы создавать отдельные переменные под каждый набор данных, просто обходите массив series с помощью forEach. Надо ли перерисовывать график сразу, как только в какой-либо из наборов данных добавлена новая точка - не уверен. Лично я бы дожидался получения новых данных по всем наборам и только потом делал перерисовку. Конечно, если хотите, перерисовывать можно и при каждом получении новых данных.

Также следует обратить внимание на ваш выбор использовать setInterval для организации постоянного обновления - что если один из запросов займёт сильно больше времени, чем вы ожидаете? Не получится ли так, что более новые данные будут добавлены раньше старых? Возможно, стоит делать так: запрос, по получении ответа - setTimeout на следующий запрос.

Что до

работает, но не всегда корректно <...> точно есть ошибки

- это разговор ни о чём. Информации примерно ноль. Вам следовало рассказать, как проявляется эта некорректность.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы