jqplot dateaxis呈现正确的用法
几个星期前我发布了一个类似的问题，但没有得到任何答案，因此我现在简化了它，并且还有一个jsfiddle演示。
基本上我试图用dateqis使用jqplot，并试图通过改变输入数据重新绘制图表。
这是jsfddle链接
http://jsfiddle.net/shyampurk/JNTsv/2/
这是我的JavaScript
$.jqplot.config.enablePlugins = true;
var Graph;
var GraphUpdate;
var GraphData = [];
var interval = 3000;
var npoints = 25;
var maxIterations = 200;
var niters = 0;
function BuildDataArray() {
GraphData = [];
;
GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]];
Graph = $.jqplot('livechart', GraphData, {
stackseries : true,
seriesDefaults: {
showMarker: false,
fill: true,
fillAndStroke: true
},
axes: {
xaxis: {
//numberTicks:2,
//renderer:$.jqplot.DateAxisRenderer,
//pad:0,
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {
angle: -30
}
},
yaxis: {
label: 'Call Count',
//min:0,
//max:30,
tickInterval:2,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
cursor:{
zoom:true,
looseZoom: true
}
});
}
function UpdateDataArray() {
var newData = new Array();
newData = GraphData;
newData[0].shift();
Graph.series[0].data = newData[0];
//Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ;
Graph.replot({resetAxes:true});
}
function StartGraphLoop() {
BuildDataArray();
GraphUpdate = setInterval(UpdateGraph, interval);
}
function UpdateGraph() {
UpdateDataArray();
}
function StopGraphLoop() {
clearInterval(GraphUpdate);
}
StartGraphLoop();
我有一个StartGraphLoop（）函数，它构建了一个初始的系列数据数组并绘制了图形。 它还会激活一个setInterval，用于更新系列数据并稍后重新绘制图形。
在我的情况下，replot不起作用，jqplot在第一次replot调用之后变空白。 在jsfiddle示例中，初始绘图和重绘图都不起作用，但轴更新。
我真的很感激，如果有人可以指导我正确使用jqplot与dateaxisrenrendering与replot
谢谢
它没有得到更新，因为你正在尝试将更新的值赋给其中包含日期/时间值的图形。 它不理解这些值，因为该图知道x轴上的每个勾号一个数字。 就像第一个勾号总是1然后2等等。
尝试使用chrome调试工具来观察代码内部发生了什么，以及图形如何解释给出的数据。
试试这个：Jsfiddle链接
$.jqplot.config.enablePlugins = true;
var Graph;
var GraphUpdate;
var GraphData = [];
var interval = 3000;
var npoints = 25;
var maxIterations = 200;
var niters = 0;
function BuildDataArray() {
GraphData = []; ;
GraphData = [[["2013-07-17 21:11:20", 2], ["2013-07-17 21:12:20", 5], ["2013-07-17 21:14:20", 7]]];
Graph = $.jqplot('livechart', GraphData, {
stackseries : true,
seriesDefaults : {
showMarker : false,
fill : true,
fillAndStroke : true
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
tickOptions : {
angle : -30
}
},
yaxis : {
label : 'Call Count',
//min:0,
//max:30,
tickInterval : 2,
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
}
},
cursor : {
zoom : true,
looseZoom : true
}
});
}
function UpdateDataArray() {
var newData = new Array();
newData = Graph.series[0].data;
newData.shift();
newData.push( [1,Math.floor((Math.random()*10)+1)]);
Graph.series[0].data = newData;
Graph.replot({
resetAxes : true
});
}
function StartGraphLoop() {
BuildDataArray();
GraphUpdate = setInterval(UpdateGraph, interval);
}
function UpdateGraph() {
UpdateDataArray();
}
function StopGraphLoop() {
clearInterval(GraphUpdate);
}
StartGraphLoop();