2013-01-03 42 views
3

我想用交互式刷新來構建圖表。我使用jqPlot,但試圖通過調用replot()更新圖形或重繪它導致巨大的瀏覽器內存泄漏。你有什麼想法我可以修復它嗎?jQPLOT - 內存泄漏

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(); 
} 
+0

是否可以在服務器端構建圖形並將完成的圖像發送到瀏覽器? – djangofan

+0

哪個瀏覽器有內存泄漏? jqPlot和內存問題歷史悠久,特別是IE <9。 – Mark

+1

Chrome V24和Firefox – mal200

回答

0

我沒有一個「即插即用」的解決方案,但動態數據更新的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(); 
}