Javascript Highcharts多数据流实时折线图

我想用Highcharts在折线图上实现实时动态图形。这就是我所期望的：

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

$（“#图表ID”）.highcharts（数据[“线条图”][“值”）

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

对象[“线条图”][“值”]

我已经绘制了三个系列的折线图（家庭总消耗量、绿色电力和Tai电力），但我不知道如何通过刷新

以下是我的代码片段：

创建图表

// 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();
});

ajax回调函数

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");
        });
}

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

---

非常感谢您的帮助。谢谢。

您可以通过JSON中的所有数据点在循环中使用

addPoint

。将

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);
  }

load:function（）{
var图表=此；
setInterval（函数（）{
图表系列forEach（函数）{
对于（变量i=0；i<20；i++）{
s、 addPoint（Math.random（），false，true）；
}
});
chart.redraw（）；
}, 1000);
}

现场演示：

API参考：