我想构建一个具有交互式刷新功能的图表。我使用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();
}

10-07 19:46
查看更多