【发布时间】：2015-04-17 02:32:07
【问题描述】：
我正在使用 Highcharts 和实时数据。我已经正确设置了我的 ajax，并且调用了 setTimeout 来引入实时数据。每当该数据进入时，我想将 addPoint() 添加到我的系列并绘制新图形（向左移动）。下面是我的代码，第 85 行是 .addPoint 调用，但您会在控制台中看到它显示为不是函数或未定义。
我也从控制台知道我正在从我的图表中正确调用我的数据（chart1.data.series[0] 返回和对象）。以下是关于系列数据和 addPoint 的 highcharts 文档：http://api.highcharts.com/highcharts#Series.addPoint >
知道我哪里出错了吗？我是 js 新手 1 年 <.>
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%"></div>
</body>
<script>
chart1 = {
yAxisMin: null,
yAxisMax: null
};
// empty objects for our data and to create chart
seriesData = [];
BPM = [];
time1 = [];
// console.log(chart1.data.series);
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
function requestData() {
var url = 'http://msbandhealth.azurewebsites.net/odata/PulsesAPI/';
$.ajax({
url: url,
dataType: 'json',
context: seriesData,
success: function(data) {
shift = chart1.data.series[0].data.length > 20;
// structure our data
for (var i = 0; i < data.value.length; i++) {
bpm = data.value[i].BPM;
time = data.value[i].Time;
console.log(time);
this.push([time, BPM]);
BPM.push(bpm);
time1.push(time);
}
// console.log(series[0]);
// find the highest pulse so we can set it to the highest y point
chart1.yAxisMax = (function(array) {
var pulse_array = [];
for (var i = 0; i < array.length; i++) {
if (array[i] != null) {
pulse_array.push(array[i]);
}
}
return Math.max.apply(Math, pulse_array);
})(BPM);
// find the lowest pulse rate and set it to lowest y point
chart1.yAxisMin = (function(array) {
var pulse_array = [];
for (var i = 0; i < array.length; i++) {
if (array[i] != null) {
pulse_array.push(array[i]);
}
}
return Math.min.apply(Math, pulse_array);
})(BPM);
// set our data series and create new chart
chart1.data.series[0].data = BPM;
chart = new Highcharts.Chart(chart1.data);
$('#container').css({
height: '400px'
});
chart1.data.series[0].addPoint(BPM, true, true);
// setTimeout(requestData, 3000);
console.log(chart1.data.series);
}
});
}
// give highcharts something to render to
container = document.getElementById("container");
chart1.data = {
chart: {
renderTo: container,
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: requestData()
}
},
title: {
text: ' Real Time Pulse Analysis'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
min: chart1.yAxisMin,
max: chart1.yAxisMax,
title: {
text: 'Heart Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Beats Per Minute',
data: []
}]
};
});
});
</script>
</html>
【问题讨论】：
-
UPDATE 必须添加 moment.js 才能正确解析我的 x 轴日期。 addPoint 仍然没有按照我想要的方式工作。我希望我的点从图表上滑到左边，并在设定的超时时间进入右边。相反，它在间隔内重绘整个图表。这就是我想要的：highcharts.com/demo/dynamic-update
标签： javascript json api highcharts