Динамический график Highcharts: доступ к данным Datetime возвращает [объект] вместо [Datetime, Int]

#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. Спасибо, это может быть полезно для меня в будущем!