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

如何用Highcharts绘制两个传感器数据值？

1 个答案: