[英]Unable to plot dynamically updating y-values on Highcharts spline plot
我正在嘗試動態更新highcharts樣條圖上的點。 我正在訪問一個phpMyAdmin數據庫,該數據庫使用json.AJAX HTTP get請求(具有其異步更新功能)來保存不斷更新的數據字段。
從控制台日志中可以看到的內容,以及一些測試,我的AJAX HTTP請求已成功從數據庫中獲取數據並將其返回給主機。 該問題與HIGHCHARTS語法有關。 我不知道如何正確地將數據“賦予”我的新點的“ y”坐標。
請參閱隨附的代碼:
<div id="noise" style="width: 300px, height: 300px">
<script>
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#noise').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
// AJAX post to host, which will send CS50::query into database
load: function () {
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = jQuery.ajax({
type: "GET",
url: '../host.php',
dataType: 'json',
data: { type: 'noise' },
success: function (noiseValue, textstatus) {
if (!('error' in noiseValue)) {
yourVariable = Number((noiseValue[0])["test"]);
console.log(yourVariable);
}
else {
console.log(noiseValue.error);
}
}
});
series.addPoint([x, y], true, true);
}, 2000);
}
}
},
title: {
text: 'Is Baby Crying?'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Quiet................................................Loud'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Baby Cries',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 2000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
</div>
您需要在成功回調中添加點,例如:
success: function (noiseValue, textstatus) {
if (!('error' in noiseValue)) {
yourVariable = Number((noiseValue[0])["test"]);
console.log(yourVariable);
series.addPoint([x, yourVariable]);
} else {
console.log(noiseValue.error);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.