我无法弄清楚自己或找到一个正确的例子来说明如何在 jqPlot 中以类似于这个 highcharts示例中所示的方式执行实时更新。
问问题
18810 次
3 回答
21
基于此,我准备了以下示例:
$(document).ready(function() {
var plot1 = $.jqplot('chart1', [new Array(1)], {
title: 'Live Random Data',
series: [
{
yaxis: 'y2axis',
label: '',
showMarker: false,
fill: false,
neighborThreshold: 3,
lineWidth: 2.2,
color: '#0571B6',
fillAndStroke: true}
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M:%S'
},
numberTicks: 10
},
y2axis: {
min: 100,
max: 150,
tickOptions: {
formatString: '%.2f'
},
numberTicks: 15
}
},
cursor: {
zoom: false,
showTooltip: false,
show: false
},
highlighter: {
useAxesFormatters: false,
showMarker: false,
show: false
},
grid: {
gridLineColor: '#333333',
background: 'transparent',
borderWidth: 3
}
});
var myData = [];
var x = (new Date()).getTime() - 101000;
var y;
var i;
for ( i = 0; i < 100; i++) {
x += 1000;
y = Math.floor(Math.random() * 100);
myData.push([x, y]);
}
plot1.series[0].data = myData;
plot1.resetAxesScale();
plot1.axes.xaxis.numberTicks = 10;
plot1.axes.y2axis.numberTicks = 15;
plot1.replot();
function updateSeries() {
myData.splice(0, 1);
x = (new Date()).getTime();
y = Math.floor(Math.random() * 100);
myData.push([x, y]);
plot1.series[0].data = myData;
plot1.resetAxesScale();
plot1.axes.xaxis.numberTicks = 10;
plot1.axes.y2axis.numberTicks = 15;
plot1.replot();
}
window.setInterval(updateSeries, 1000);
});
于 2012-08-16T18:37:37.023 回答
7
我在 JSFiddle jsfiddle.net/meccanismocomplesso/QAr4r/上添加了一个示例,它重现了您链接的示例。
我试图让这个话题尽可能地笼统。如果您需要更多解释,请阅读这篇文章。
var plot1 = $.jqplot('myChart', [data], options);
...
plot1.series[0].data = data; // update the graph
于 2013-12-24T12:48:38.913 回答
3
var plot1;
function updatePlot(data){
plot1 = $.jqplot('myChart', [data], options);
}
function reDrawPlot(data){`
updatePlot(data);
plot1.replot();
}
....
initialize plot
plot1 = $.jqplot('myChart', [data], options);
....
call function reDrawPlot with the new data as a parameter
于 2014-05-23T21:02:44.740 回答