具有多个数据流的 Highcharts 实时折线图

Question

我想用Highcharts实现折线图上的实时动态图。这就是我所期望的：Spline updating each second。

在我的例子中，实时 JSON 对象包含所有图表参数。 这是我在JSON Editor Online 上的实时 JSON 数据。 您可以使用以下语法来呈现具有多个系列的折线图。

$("#chart ID").highcharts(data["lineChart"]["value"]);

图表参数可以直接从 JSON 对象中提取。

对象["lineChart"]["value"]

我已经渲染了三个系列的折线图（家庭总消耗、绿色电力和太电），但我不知道如何通过Highcharts addPoint method刷新。

这是我的代码 sn-ps：

创建图表

// Interval to update the webpage data 60000 ms (1 min)
var updateInterval = 60000;

// Define the chart variable globally
var chart;

$(document).ready(function () {

    // Create the chart
    chart = new Highcharts.Chart({
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        chart: {
            renderTo: 'containerJS',
            type: 'spline',
            "alignTicks": false,
            "zoomType": "xy",
            events: {
                // The updateRealTimeData function is initially called from the chart's load event
                load: updateRealTimeData
            }
        },
        title: {
            text: 'real-time line chart',
            align: 'center'
        },
        "xAxis": [{
            "categories": [], //Current local time
            "crosshair": true,
            "index": 0,
            "isX": true
        }],
        "tooltip": {
            "shared": true
        },
        "legend": {
            "layout": "horizontal",
            "align": "left",
            "x": 0,
            "verticalAlign": "top",
            "y": 0,
            "floating": false,
            "backgroundColor": "#363635"
        },
        "yAxis": [{
            "gridLineColor": "transparent",
            "labels": {
                "format": "{value}",
                "enabled": true
            },
            "title": {
                "text": "Power (W)"
            },
            "opposite": true,
            "index": 0
        }],
        "series": [{
            "color": "#01AEF0",
            "name": "Home Total Consumption",
            "tooltip": {
                "valueSuffix": "",
                "pointFormat": "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
            },
            "yAxis": 0,
            "type": "line",
            "data": [] //data-stream-1
        }, {
            "color": "#ED008C",
            "name": "Green Power",
            "tooltip": {
                "valueSuffix": "",
                "pointFormat": "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
            },
            "yAxis": 0,
            "type": "line",
            "data": [] //data-stream-2
        }, {
            "color": "#F57E20",
            "name": "Tai Power",
            "tooltip": {
                "valueSuffix": "",
                "pointFormat": "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
            },
            "yAxis": 0,
            "type": "line",
            "data": [] //data-stream-3
        }]

    });

    updateRealTimeData();
});

设置 updateRealTimeData 函数

function updateRealTimeData() {

    var url = "live-server-data.php";

    $.ajax({
            "url": url,
            method: "GET",
            dataType: "json",
            data: {
                "task": "GetHomepageData",
            },
            //async: false
        })
        .done(function (data) {

            // var highChartParams = data["lineChart"]["value"];
            // redraw Highcharts
            // $("#containerJS").highcharts(highChartParams);

            // When the data is successfully received from the server, then added to the chart's series using the Highcharts addPoint method
            // How do I add the point here ...

            // call it again after 60000 ms
            updatePageData();

        })
        .fail(function () {
            console.log("Update data fail");
        });
}

ajax回调函数

function updatePageData() {
    //set timeout to keep the page updated every [updateInterval] ms.
    setTimeout(updateRealTimeData, updateInterval);
} 

非常感谢任何帮助。谢谢。

Answer 1

您可以在循环中使用 addPoint 来遍历 JSON 中的所有数据点。将redraw 参数设置为false 并在添加完所有点后重新绘制图表：

  load: function() {
    var chart = this;
    setInterval(function() {
      chart.series.forEach(function(s) {
        for (var i = 0; i < 20; i++) {
          s.addPoint(Math.random(), false, true);
        }
      });
      chart.redraw();
    }, 1000);
  }

现场演示： http://jsfiddle.net/kkulig/3mzby6m7/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Series#addPoint