Question

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

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

$（＆＃34; #chart ID＆＃34;）。highcharts（data [＆＃34; lineChart＆＃34;] [＆＃34; value＆＃34;]）;

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

对象[＆＃34;应用于LineChart＆＃34;] [＆＃34;值＆＃34;]

我制作了一个包含三个系列的折线图（家庭总消费，绿色电力和泰国电力），但我不知道如何通过Highcharts addPoint method刷新它

这是我的代码片段：

创建图表

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

设置updateRealTimeData函数

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

ajax回调功能

{{1}}

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

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实时折线图

1 个答案: