人力车图中的实时图未更新
Real Time Graph Not updating in Rickshaw Graph
我生成图表的代码如下:
var allVenues = [];
var seriesData = [];
var callGraph = function () {
var where = jQuery('#hdnVal').val();
jQuery.ajax({
url: "PopulateTable",
type: 'GET',
data: {
'where': where
},
dataType: "json",
async: false,
success: function (responseJson) {
if (responseJson != null) {
jQuery.each(responseJson, function (key, value) {
jQuery('#hdnVal').val(value['date']);
});
allVenues.push(responseJson);
}
}
});
var length = 0;
var length1 = 0;
var dataXY = [];
var dataX = [];
length = allVenues.length;
for (var i = 0; i < length; i++) {
length1 = allVenues[i].length;
for (var j = 0; j < length1; j++) {
dataX.push([returnTimestamp(allVenues[i][j].date), returnDate(allVenues[i][j].date)]);
dataXY.push({x: returnTimestamp(allVenues[i][j].date), y: allVenues[i][j].price});
}
}
seriesData = [dataXY];
} ;
callGraph() ;
var palette = new Rickshaw.Color.Palette({scheme: 'classic9'});
var graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,
series: [
{
color: palette.color(),
data: seriesData[0],
name: 'Price'
}
]
});
graph.render();
setInterval(function () {
callGraph();
graph.series.addData(seriesData);
graph.render();
}, 5000);
在此代码中,我的 "seriesData" 数组正在更新,但图表没有更新。
生成的 json 数组在页面加载时对图表很有用,但是当我应用间隔时图表不会更新。
在没有像样的 Rickshaw 文档,也没有异步更新示例的情况下,很难说什么有效,什么无效。
似乎没有必要维护 allVenues
数组,除非您想在每次更新时从头开始重建图表。添加到系列数据并调用 .render()
应该就足够了。
您可能想要这样的东西:
(function() { // IIFE to isolate from the Global name space, if not otherwise wrapped.
var jqXHR;
var errors = {
count = 0,
threshold: 10 // number of consecutive error after which the update cycle should die
}
var palette = new Rickshaw.Color.Palette({ scheme: 'classic9' });
var lastDate = jQuery('#hdnVal').val();
var seriesData = []; // <<<<<<<<<<<< add
var graph = new Rickshaw.Graph({
element: document.getElementById('chart'),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,
series: [{
color: palette.color(),
data: seriesData, // <<<<<<<<<<<< change
name: 'Price'
}];
});
var callGraph = function (val) {
if(jqXHR) {
// In case previous ajax has not responded.
jqXHR.abort(); // Abort previous ajax and force its error handler to fire.
return; // Allow the error handler to report the abort error then retry/die.
}
jqXHR = jQuery.ajax({
url: "PopulateTable",
type: 'GET',
data: { 'where': val },
dataType: "json"
}).then(function (responseJson) { // ajax success handler
if (responseJson) {
// Here's the major guess!
// ***** start: delete *****
// graph.series.addData(responseJson.map(function(item) {
// lastDate = item.date;
// return { x: returnTimestamp(item.date), y: item.price };
// }));
// ***** end: delete *****
// ***** start: add *****
responseJson.forEach(function(item) {
lastDate = item.date;
seriesData.push({ x: returnTimestamp(item.date), y: item.price });
});
// ***** end: add *****
}
graph.render();
errors.count = 0; //reset errorCount
setTimeout(function() {
callGraph(lastDate);
}, 5000);
}, function(jqXHR, textStatus, errorThrown) { // ajax error handler
errors.count += 1;
console.log("callGraph()", textStatus, "errorCount: " + errorCount);
if(error.count < errors.threshold) {
setTimeout(function() {
callGraph(lastDate); // retry with same lastDate as previous ajax call.
}, 5000);
} else {
// Allow the update cycle to die
console.log("callGraph() errorTheshold reached");
}
});
};
callGraph(lastDate);
})();
请注意,由于 AJAX 的异步性,更新图和刺激更新周期的下一阶段是在 AJAX 成功处理程序中完成的。用setTimeout()
代替setInterval()
,杀循环的时候比较麻烦
如果还是不行,那么可能是graph.series.addData(...)
部分出了问题。它可能只需要调试,但您也可以尝试此处的两个建议 -
我生成图表的代码如下:
var allVenues = [];
var seriesData = [];
var callGraph = function () {
var where = jQuery('#hdnVal').val();
jQuery.ajax({
url: "PopulateTable",
type: 'GET',
data: {
'where': where
},
dataType: "json",
async: false,
success: function (responseJson) {
if (responseJson != null) {
jQuery.each(responseJson, function (key, value) {
jQuery('#hdnVal').val(value['date']);
});
allVenues.push(responseJson);
}
}
});
var length = 0;
var length1 = 0;
var dataXY = [];
var dataX = [];
length = allVenues.length;
for (var i = 0; i < length; i++) {
length1 = allVenues[i].length;
for (var j = 0; j < length1; j++) {
dataX.push([returnTimestamp(allVenues[i][j].date), returnDate(allVenues[i][j].date)]);
dataXY.push({x: returnTimestamp(allVenues[i][j].date), y: allVenues[i][j].price});
}
}
seriesData = [dataXY];
} ;
callGraph() ;
var palette = new Rickshaw.Color.Palette({scheme: 'classic9'});
var graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,
series: [
{
color: palette.color(),
data: seriesData[0],
name: 'Price'
}
]
});
graph.render();
setInterval(function () {
callGraph();
graph.series.addData(seriesData);
graph.render();
}, 5000);
在此代码中,我的 "seriesData" 数组正在更新,但图表没有更新。 生成的 json 数组在页面加载时对图表很有用,但是当我应用间隔时图表不会更新。
在没有像样的 Rickshaw 文档,也没有异步更新示例的情况下,很难说什么有效,什么无效。
似乎没有必要维护 allVenues
数组,除非您想在每次更新时从头开始重建图表。添加到系列数据并调用 .render()
应该就足够了。
您可能想要这样的东西:
(function() { // IIFE to isolate from the Global name space, if not otherwise wrapped.
var jqXHR;
var errors = {
count = 0,
threshold: 10 // number of consecutive error after which the update cycle should die
}
var palette = new Rickshaw.Color.Palette({ scheme: 'classic9' });
var lastDate = jQuery('#hdnVal').val();
var seriesData = []; // <<<<<<<<<<<< add
var graph = new Rickshaw.Graph({
element: document.getElementById('chart'),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,
series: [{
color: palette.color(),
data: seriesData, // <<<<<<<<<<<< change
name: 'Price'
}];
});
var callGraph = function (val) {
if(jqXHR) {
// In case previous ajax has not responded.
jqXHR.abort(); // Abort previous ajax and force its error handler to fire.
return; // Allow the error handler to report the abort error then retry/die.
}
jqXHR = jQuery.ajax({
url: "PopulateTable",
type: 'GET',
data: { 'where': val },
dataType: "json"
}).then(function (responseJson) { // ajax success handler
if (responseJson) {
// Here's the major guess!
// ***** start: delete *****
// graph.series.addData(responseJson.map(function(item) {
// lastDate = item.date;
// return { x: returnTimestamp(item.date), y: item.price };
// }));
// ***** end: delete *****
// ***** start: add *****
responseJson.forEach(function(item) {
lastDate = item.date;
seriesData.push({ x: returnTimestamp(item.date), y: item.price });
});
// ***** end: add *****
}
graph.render();
errors.count = 0; //reset errorCount
setTimeout(function() {
callGraph(lastDate);
}, 5000);
}, function(jqXHR, textStatus, errorThrown) { // ajax error handler
errors.count += 1;
console.log("callGraph()", textStatus, "errorCount: " + errorCount);
if(error.count < errors.threshold) {
setTimeout(function() {
callGraph(lastDate); // retry with same lastDate as previous ajax call.
}, 5000);
} else {
// Allow the update cycle to die
console.log("callGraph() errorTheshold reached");
}
});
};
callGraph(lastDate);
})();
请注意,由于 AJAX 的异步性,更新图和刺激更新周期的下一阶段是在 AJAX 成功处理程序中完成的。用setTimeout()
代替setInterval()
,杀循环的时候比较麻烦
如果还是不行,那么可能是graph.series.addData(...)
部分出了问题。它可能只需要调试,但您也可以尝试此处的两个建议 -