我遵循以下指导创建生动的图表: http://www.highcharts.com/documentation/how-to-use#live-charts
它赶上值和更新图表每“3”秒。 它工作正常!
现在,是有可能显示在标签上的实时值? 就像是:
这应该是改变每轮询.....或者至少,显示在其他图表代替最后产生的价值?
这是我的HTML / JS代码来生成图表:
<script type="text/javascript">
var chart; // global
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 30; // shift if the series is longer than 20
var series = chart.series[1],
shift = series.data.length > 30; // shift if the series is longer than 20
var series = chart.series[2],
shift = series.data.length > 30; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint([point[0], point[1]], true, shift);
chart.series[1].addPoint([point[0], point[2]], true, shift);
chart.series[2].addPoint([point[0], point[3]], true, shift);
setTimeout(requestData, 3000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 40 * 1000
},
yAxis: {
minPadding: 0.5,
maxPadding: 0.5,
showLastLabel: true,
title: {
text: '',
margin: 1
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M:%S', this.x) +'<br/>'+
'MDA: '+ this.y;
}
},
series: [{
name: 'Point1',
data: []
}, {
name: 'Point2',
data: []
}, {
name: 'Point3',
color: '#FF00FF',
data: []
}]
});
});
</script>