Как динамически обновлять линии в 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;
}())
}]
});
|
unity555,
так нужно? http://jsfiddle.net/_Marina_/xh3zr7rv/20/ наверное как-то проще можно, нужно читать документацию. |
Цитата:
Я думал, что будет сложнее и понадобятся очень хорошие знания JS. Но тут, как я понял, нужны знания компонента highcharts? В их general и api такого не находил. |
unity555,
я не читала их документацию, смотрела через консоль.
var my_chart = Highcharts.stockChart('container', {
...
console.log(my_chart);
и ищите там, откуда ваши plotLines выросли) |
| Часовой пояс GMT +3, время: 18:14. |