javascript - 如何使用 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