Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как динамически обновлять линии в hightcharts? (https://javascript.ru/forum/dom-window/72703-kak-dinamicheski-obnovlyat-linii-v-hightcharts.html)

unity555 20.02.2018 14:03

Как динамически обновлять линии в hightcharts?
 
Общая информация
----
Делаю свой пример на основе этих демо - примеров.
http://jsfiddle.net/gh/get/library/p...ynamic-update/
http://jsfiddle.net/gh/get/library/p...xis-plotlines/

Объединив, получим это
http://jsfiddle.net/xh3zr7rv/2/
----
Есть график на который каждую секунду добавляется точка (series.addPoint).
На графике также есть 2 прямые параллельные линии (plotLines). Их координаты "Y" нужно обновлять, с каждым новым добавлением точки. Сейчас их координаты неизменны ( value: 20 и 70).
Добавление новой точки происходит в функции setInterval. Сейчас там пример - случайное значение.

Проблема в том, что я не могу выйти за пределы функции setInterval, линии у меня за её пределами.
И внести туда код линий тоже не могу.
Более того, в setInterval я использую $.getJSON, для получения координаты точки.
Это асинхронный запрос и я тем более не могу ничего передать оттуда за его пределы.

Пробовал по аналогии с
chart: {events: {load: function () {
//Аналогично
yAxis: {
title: {text: 'Стоимость в долларах США'},
events: {load: function () {
.....

линии пропадают.

Как динамически обновлять линии в hightcharts?

Код
Highcharts.setOptions({global: {useUTC: false}});

//Создаем график
Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function () {

                // set up the updating of the chart each second
                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); //динамически добавляем точку на график

//У меня же тут $.getJSON('actions.php?get_live_data', function(live_data) {});                 
                    
}, 1000);
//Конец функции автообновления


            }
        }
    },

    
yAxis: {

//Вот эти линии
            plotLines: [{
                value: 20, //Вот значение которое надо обновлять
                color: 'green',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Last quarter minimum'
                }
            }, {
                value: 70, //Вот значение которое надо обновлять
                color: 'red',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Last quarter maximum'
                }
            }]
        },




    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -999; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        }())
    }]
});

Manyasha 20.02.2018 15:17

unity555,
так нужно?
http://jsfiddle.net/_Marina_/xh3zr7rv/20/
наверное как-то проще можно, нужно читать документацию.

unity555 21.02.2018 06:42

Цитата:

Сообщение от Manyasha (Сообщение 478627)
так нужно?

Да так.
Я думал, что будет сложнее и понадобятся очень хорошие знания JS.
Но тут, как я понял, нужны знания компонента highcharts?
В их general и api такого не находил.

Manyasha 21.02.2018 13:19

unity555,
я не читала их документацию, смотрела через консоль.
var my_chart = Highcharts.stockChart('container', {
...
console.log(my_chart);

и ищите там, откуда ваши plotLines выросли)


Часовой пояс GMT +3, время: 03:18.