如何使用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(("添加第二个传感器读数。 当我尝试编辑"系列"数据部分中的代码时，我得到一个空白图表(意味着它无法正确加载(。 我相信"系列"部分中的代码在整个图表中用零(对于 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