Как я могу отобразить два значения данных датчика с помощью Highcharts?

Question

У меня есть некоторые данные, которые я строю с помощью Highcharts, которые я смог настроить, используя модифицированную версию демо-кода.График работает нормально, когда я отображаю некоторые данные с датчика.Соответствующий раздел моего кода выглядит так:

<script>
Highcharts.stockChart('container', {
    chart: {
        backgroundColor:'transparent',
        events: {
            load: function() {
                var series = this.series[0];
                setInterval(function() {
                    var x = (new Date()).getTime(),
                        y = Number(getTemp());
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

    xAxis: {
        type: 'datetime',
        labels: {
            style: {
            		},
            	},
            	tickPixelInterval: 200,
    },

    yAxis: {
        type: 'linear',
        labels: {
            y: 5,
            style: {
            },
        },
    },

    series: [{
            name: 'Temperature',
            data: (function () {
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -200; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: 0
                });
            }
            return data;
        }())
    }]
});
</script>

Теперь я хочу добавить второе показание датчика, используя аналогичную функцию "getTemp2 ()" на том же графике, что и вторая серия.Когда я пытаюсь редактировать код в разделе данных "series", я получаю пустой график (что означает, что он не загружается правильно).Я считаю, что код в разделе "серии" заполняет график нулями (для значений y) по всей диаграмме.Но я не уверен, нужно ли мне что-то добавлять в раздел «события», в раздел «серия» или в оба?Может кто-нибудь сказать мне, как я могу добавить показания второго датчика в этот график?Вот что я попробовал, но это не удалось:

        events: {
            load: function() {
                var series = this.series[0];
                setInterval(function() {
                    var x = (new Date()).getTime(),
                        y = Number(getTemp());
                    series.addPoint([x, y], true, true);
                },
                var series = this.series[0];
                setInterval(function() {
                    var x = (new Date()).getTime(),
                        y = Number(getTemp2());
                    series.addPoint([x, y], true, true);
                }, 1000);
            }

Answer 1

Прежде всего, вам необходимо создать две серии в объекте конфигурации диаграммы:

Highcharts.stockChart('container', {

    ...,

    series: [{
        data: getData()
    }, {
        data: getData()
    }]
});

Затем в событии load вы можете использовать метод addPoint для обеих серий:

chart: {
    events: {
        load: function() {
            var series1 = this.series[0],
                series2 = this.series[1];

            setInterval(function() {
                var x = (new Date()).getTime(),
                    y1 = Number(getTemp()),
                    y2 = Number(getTemp2());

                series1.addPoint([x, y1], false, true);
                series2.addPoint([x, y2], true, true);

            }, 1000);
        }
    }
}

Демонстрационная версия: http://jsfiddle.net/BlackLabel/nk4yawzt/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Документы: https://www.highcharts.com/docs/chart-concepts/series