jqplot學習筆記

jqplot動態填充資料，網上以下三種方法：

大家在使用jqPlot動態更新圖表時，也許會碰到過在IE中出現記憶體溢出的問題，下面我們來看看集中動態更新jqPlot圖表的方式：

方式一：通過重建圖表實現動態顯示。

Javascript代碼  

1. var series = [{'test'}];  

3. var axes = {  

4.    xaxis : {  

5.        renderer : $.jqplot.CategoryAxisRenderer,  

6.        ticks : []  

7.    },  

8.    yaxis : {  

9.        min : 0,  

10.        max : 10,  

11.        tickInterval : 2  

12.    }  

13. };  

15. var plotConfig = createBarChartOptions(axes, series);  

17. resizeGlobalMonitorChartContainer(containerId);  

19. var plot = $.jqplot(g_channelDivId, chartData, plotConfig);  

實際上我們通過重複的建立圖表，確實可以實現動態更新，不過在IE下，我們會發現記憶體增長很厲害，起初，通過嘗試在重新建立圖表時，提前銷毀舊的圖表來釋放記憶體：

Javascript代碼  

1. /**

2. * 將plot圖表從容器中銷毀。

3. *  

4. * @param containerId

5. *            容器ID。

6. * @param plot

7. *            在容器中的圖表。

8. */

9. function releasePlotChart(containerId, plot) {  

10. if (plot) {  

11.        plot.destroy();  

13. var elementId = '#' + containerId;  

14.        $(elementId).unbind(); // for iexplorer

15.        $(elementId).empty();  

17.        plot = null;  

18.    }  

19. }  

當我們觀察記憶體變化的時候，會發現銷毀圖表時記憶體減少了，但是重建之後，記憶體會比原來多出一些，一定時間以後，記憶體就會不斷的增加，最後導致記憶體溢出。

方式二：通過動態資料載入，重繪實現。

Javascript代碼  

1. /**

2. * 重繪plot圖表。

3. *  

4. * @param containerId

5. *            容器ID。

6. * @param chartData

7. *            圖表資料。

8. * @param plotConfig

9. *            圖表配置資訊。

10. * @returns 返回重繪後的圖表對象。

11. */

12. function replotChart(plot, chartData) {  

13.    setChartDataToPlot(plot, chartData);  

15.    plot.replot({  

16.        resetAxes : true

17.    });  

19. return plot;  

20. }  

22. /**

23. * 將最新的資料設定到plot圖表中。

24. *  

25. * @param plot

26. * @param chartData

27. */

28. function setChartDataToPlot(plot, chartData) {  

29. for ( var i = 0; i < plot.series.length; i++) {  

30. for ( var j = 0; j < plot.series[i].data.length; j++) {  

31. try {  

32.                plot.series[i].data[j][1] = chartData[i][j];  

33.            } catch (e) {  

34.            }  

35.        }  

36.    }  

37. }  

通過運用這種方式，再次觀察記憶體變化，會發現記憶體溢出問題已經不存在了。

從中我們發現，只要重建Plot圖表，記憶體就會出現遞增的現象，因此，當我們需要切換圖表的時候，最好將原來的圖表隱藏起來，當再次需要顯示的時候，再恢複顯示，從而避免重複建立圖表，從而導致記憶體溢出。

目前我使用的是第三種方法，不知道在之後使用過程中會不會出現一些bug，有待觀察。

http://stackoverflow.com/questions/5178197/how-to-refresh-jqplot-bar-chart-without-redrawing-the-chart

這個網站中使用的是第二種方法，可以做為參考，有些情況圖表不僅僅需要重新讀資料，還需要重新畫，估計就得用這種方法了？還沒有仔細研究。有時間會做實驗。