我想构建一个具有交互式刷新功能的图表。我使用jqPlot,但是尝试通过调用replot()或重绘来更新图形会导致巨大的浏览器内存泄漏。你知道我该如何解决吗?
function crateChart() {
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
this.plot = $.jqplot('chart', [s1, s2], {
seriesDefaults: {
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 3,
startAngle: -90,
showDataLabels: true,
dataLabels: 'value'
}
}
});
}
function update () {
ChartTester.plot.series[0].data = [
['a', Math.random() * 100],
['b', Math.random() * 100],
['c', Math.random() * 100],
['d', Math.random() * 100]
];
ChartTester.plot.destroy();
$('#chart *').unbind();
$('#chart').empty();
ChartTester.plot.redraw();
}
最佳答案
我没有“即插即用”的解决方案,但是一个在JQPlot图表上动态更新数据来激发您灵感的很好的例子:http://jsfiddle.net/fracu/HrZcj/
基本上,更新功能是这样的:
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();
}