jqplot学习笔记

jqplot动态填充数据，网上以下三种方法：

大家在使用jqPlot动态更新图表时，也许会碰到过在IE中出现内存溢出的问题，下面我们来看看集中动态更新jqPlot图表的方式：

方式一：通过重建图表实现动态显示。

Javascript代码

var series = [{'test'}];
var axes = {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : []
},
yaxis : {
min : 0,
max : 10,
tickInterval : 2
}
};
var plotConfig = createBarChartOptions(axes, series);
resizeGlobalMonitorChartContainer(containerId);
var plot = $.jqplot(g_channelDivId, chartData, plotConfig);

实际上我们通过重复的创建图表，确实可以实现动态更新，不过在IE下，我们会发现内存增长很厉害，起初，通过尝试在重新创建图表时，提前销毁旧的图表来释放内存：

Javascript代码

/**
* 将plot图表从容器中销毁。
*
* @param containerId
* 容器ID。
* @param plot
* 在容器中的图表。
*/
function releasePlotChart(containerId, plot) {
if (plot) {
plot.destroy();
var elementId = '#' + containerId;
$(elementId).unbind(); // for iexplorer
$(elementId).empty();
plot = null;
}
}

当我们观察内存变化的时候，会发现销毁图表时内存减少了，但是重建之后，内存会比原来多出一些，一定时间以后，内存就会不断的增加，最后导致内存溢出。

方式二：通过动态数据加载，重绘实现。

Javascript代码

/**
* 重绘plot图表。
*
* @param containerId
* 容器ID。
* @param chartData
* 图表数据。
* @param plotConfig
* 图表配置信息。
* @returns 返回重绘后的图表对象。
*/
function replotChart(plot, chartData) {
setChartDataToPlot(plot, chartData);
plot.replot({
resetAxes : true
});
return plot;
}
/**
* 将最新的数据设置到plot图表中。
*
* @param plot
* @param chartData
*/
function setChartDataToPlot(plot, chartData) {
for ( var i = 0; i < plot.series.length; i++) {
for ( var j = 0; j < plot.series[i].data.length; j++) {
try {
plot.series[i].data[j][1] = chartData[i][j];
} catch (e) {
}
}
}
}

通过运用这种方式，再次观察内存变化，会发现内存溢出问题已经不存在了。

从中我们发现，只要重建Plot图表，内存就会出现递增的现象，因此，当我们需要切换图表的时候，最好将原来的图表隐藏起来，当再次需要显示的时候，再恢复显示，从而避免重复创建图表，从而导致内存溢出。

目前我使用的是第三种方法，不知道在之后使用过程中会不会出现一些bug，有待观察。

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

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

转载于:https://blog.51cto.com/5404163/1288229

jqplot学习笔记相关推荐

PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...

jqplot学习笔记

jqplot学习笔记相关推荐

最新文章

热门文章