java实时的折线图,具有多个数据流的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": "\u25CF {series.name}: {point.y:,.2f}

"

},

"yAxis": 0,

"type": "line",

"data": [] //data-stream-1

}, {

"color": "#ED008C",

"name": "Green Power",

"tooltip": {

"valueSuffix": "",

"pointFormat": "\u25CF {series.name}: {point.y:,.2f}

"

},

"yAxis": 0,

"type": "line",

"data": [] //data-stream-2

}, {

"color": "#F57E20",

"name": "Tai Power",

"tooltip": {

"valueSuffix": "",

"pointFormat": "\u25CF {series.name}: {point.y:,.2f}

"

},

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

}

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