#javascript #datetime #highcharts #live
#javascript #datetime #highcharts #ЖИВЫЕ КОНЦЕРТЫ
Вопрос:
Я создал минимальное воспроизведение этой проблемы, чтобы кому-то было легко помочь мне разобраться в этом.
Вот что у меня есть: http://jsfiddle.net/tDW7e/1 /
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
//animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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.random();
series.addPoint([x, y], true, true);
document.getElementById('dbg').innerHTML = series.toString();
}, 1000);
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i ) {
data.push({
x: time i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="dbg" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Я отредактировал демонстрацию Live Chart, чтобы записать значение данных во второй div. Я пытаюсь выполнить проверку, чтобы убедиться, что самое последнее значение DateTime на графике не является самым последним в моей базе данных. Я не могу выполнить эту проверку, потому что то, что должно быть массивом [DateTime, Int], становится массивом [Object] .
Любая помощь приветствуется!
Ответ №1:
Прежде всего, в вашем примере, который вы используете series
, который всегда является массивом объектов.
Во-вторых, каждая из точек также является объектом, иначе вы не могли бы использовать, например point.update()
, для обновления новых параметров и т. Д.
В-третьих, в вашем примере вы создаете точки как:
data.push({
x: time i * 1000,
y: Math.random()
});
Который, очевидно, является объектом, а не массивом.
Если вы хотите получить фактическую точку, используйте: series.options.data
, и если вы используете правильный формат (как вы сказали), используйте это: http://jsfiddle.net/tDW7e/4 /
Комментарии:
1. Это сделало именно то, что я искал. Теперь, когда вы указали на эти несколько вещей, это настолько очевидно, спасибо!
Ответ №2:
Может быть, что-то вроде этого будет полезно.
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
var lastIndex = series.data.length - 1;
document.getElementById('dbg').innerHTML = 'x : ' series.data[lastIndex].x ' y: ' series.data[lastIndex].y;
}, 1000);
Комментарии:
1. Спасибо, это продемонстрировало то, что я искал, когда я попробовал это таким образом, должно быть, в моем коде было что-то еще неправильное, что, по его словам, было «неопределенным».
Ответ №3:
Ваш объект серии содержит точки, которые являются объектами, содержащими значения x и y. Если вы хотите распечатать его, рассмотрите возможность использования JSON.stringify, например
document.getElementById('dbg').innerHTML = JSON.stringify(series.data);
Комментарии:
1. Спасибо, это может быть полезно для меня в будущем!