javascript 如何在highchart中添加动态数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8998970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add dynamic data in a highchart?
提问by cobolstinks
I have a Highchart that is receiving JSON data via AJAX and jQuery. But my chart doesn't show the points until I hover the mouse over the chart. Even then the points are all at the very top of the chart. I don't think I'm adding my points to the series correctly. Please tell me what I'm doing wrong in the jsonpcallback function.
我有一个 Highchart，它通过 AJAX 和 jQuery 接收 JSON 数据。但是直到我将鼠标悬停在图表上时，我的图表才会显示这些点。即便如此，这些点都位于图表的最顶部。我认为我没有正确地将我的积分添加到系列中。请告诉我我在 jsonpcallback 函数中做错了什么。
Thanks!
谢谢！
<script type="text/javascript">
<!-- Begin Chart options-->
// define the options
var options = {
chart: {renderTo: 'container'},
title: {text: 'Brewery'},
subtitle: {text: ' '},
xAxis: {text: 'Time',type: 'datetime'},
yAxis: [{ // left y axis
title: {text: 'Temperature (℉)'},
labels: {align: 'left', x: 3, y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);}
},
showFirstLabel: false},
{ // right y axis
linkedTo: 0, gridLineWidth: 0, opposite: true,
title: {text: 'Temperature (℉)'},
labels: {align: 'right', x: -3, y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);}
},
showFirstLabel: false
}],
legend: {align: 'left', verticalAlign: 'top', y: 20,
floating: true, borderWidth: 0},
tooltip: {shared: true, crosshairs: true},
plotOptions: { series: {cursor: 'pointer',
point: {events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +'(℉)',
width: 200});
}}},
marker: {lineWidth: 1}}},
series: [ {name: 'Hot Liqour Tank'},
{name: 'MashTun'},
{name: 'Brew Kettle'},
{name: 'Post Chiller'},
{name: 'Control Box'}
]
};
<!-- End Chart Options -->
var chart;
//after DOM is loaded setup timeout to call the ajax method
$(document).ready(function() {
//call function to render the chart and setup the options
renderChart();
});
//this function requests the data
function reqData(){
$.ajax({
url: "http://192.168.0.11/"+Math.random(),
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpcallback"
});
}
function jsonpcallback(rtndata) {
for(var i = 0; i < rtndata.length; i++){
if(rtndata[i].sensor=="hlt")
{
chart.series[0].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="mt")
{
chart.series[1].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="bk")
{
chart.series[2].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="pc")
{
chart.series[3].addPoint([rtndata[i].time, rtndata[i].temp]);
}
else if(rtndata[i].sensor=="box")
{
chart.series[4].addPoint([rtndata[i].time, rtndata[i].temp]);
}
}
}
function renderChart(){
chart = new Highcharts.Chart(options);
}
//continually poll for data
setInterval(reqData, 5000);
</script>
采纳答案by doug
I think you are nearly there; the only piece i believe you are missing is an initialcall to your regDatafunction from the chart's load event.
我想你快到了；我认为您缺少的唯一部分是从图表的加载事件对regData函数的初始调用。
So to your second line after define the options, change this line:
因此，在定义 options后的第二行，更改此行：
chart: {renderTo: 'container'},
to this:
对此：
chart: {renderTo: 'container', events: {load: regData}},
回答by akv
Try converting the time strings to Javascript datetime objects. Highcharts will then read the datetimes correctly. For example, if the JSON date is in the format 'YYYY-MM-DD' you can use this code:
尝试将时间字符串转换为 Javascript 日期时间对象。Highcharts 然后将正确读取日期时间。例如，如果 JSON 日期的格式为“YYYY-MM-DD”，您可以使用以下代码：
var dates = [];
$.each(jsondata[0], function(itemNo, item) {
year = parseInt(item.split('-')[0], 10);
month = parseInt(item.split('-')[1], 10);
day = parseInt(item.split('-')[2], 10);
dt = Date.UTC(parseInt(year), parseInt(month), parseInt(day));
series[0].data.push([dt, parseInt(jsondata[2][itemNo], 10)]);
series[1].data.push([dt, parseInt(jsondata[1][itemNo], 10)]);
dates.push(dt);
});
options.series = series;
