Highcharts 多数据流实时折线图

Question

我想用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），但我不知道如何通过[=刷新它18=].

这是我的代码片段：

创建图表

// 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

Highcharts 多数据流实时折线图

Highcharts real-time line chart with multiple data streams

javascript

json

ajax-polling

highcharts