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

这个网站中使用的是第二种方法，可以做为参考，有些情况图表不仅仅需要重新读数据，还需要重新画，估计就得用这种方法了？还没有仔细研究。有时间会做实验。