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

我想通过使用Highcharts在折线图上实现实时动态图 . 这就是我的期望：Spline updating each second .

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

$（“＃chart ID”） . highcharts（data [“lineChart”] [“value”]）;

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

object [“lineChart”] [“value”]

我已经渲染了一个包含三个系列（ Home Total Consumption, Green Power, and Tai Power ）的折线图，但我不知道如何通过Highcharts addPoint method刷新它 .

这是我的代码片段：

Create the chart

// 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>
"
            },
            "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>
"
            },
            "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>
"
            },
            "yAxis": 0,
            "type": "line",
            "data": [] //data-stream-3
        }]

    });

    updateRealTimeData();
});

Set up the updateRealTimeData function

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 Callback function

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

很感谢任何形式的帮助 . 谢谢 .