JQPlot：如何在不同位置重新绘制(JQPlot: How to replot at different position)
所以我需要在我的屏幕上绘制大约120个条形图，所以我做了以下几点
var barPlot = $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj))targetDiv是页面上不同div的id，如barDiv1 ， barDiv2 ......
在IE9中，浏览器经常挂起。 所以我的想法是将JQPlot对象存储到barPlot ，如果不是null，则barPlot.replot() 。 我遇到的问题是如何指定新的target Id 。 我试试
barPlot.targetId = "#" + targetDiv;但这不起作用。 请帮忙
编辑 ：这里是jsfiddle： http ： //jsfiddle.net/YX9wX/5/
点击加载，如果你退出alt + tab并返回alt_tab，你可以看到它挂在IE9上，并挂起，直到它完成所有绘图
So I need to plot about 120 bar charts on my screen, so I do the following
var barPlot = $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj))targetDiv is the id of different div on the page like barDiv1, barDiv2 ...
In IE9, the browser hang very often. so my idea to store the JQPlot object to barPlot like above, then if not null, then barPlot.replot(). The problem I ran into is how do I specify the a new target Id. I try
barPlot.targetId = "#" + targetDiv;but this does not work. Please help
EDIT: here is jsfiddle: http://jsfiddle.net/YX9wX/5/
Click load, and if you alt+tab away and alt_tab back, you can see it hang on IE9, and hang until it finish all the drawing
最满意答案
我认为处理IE挂机的最佳方法是在每个情节后给浏览器一个短暂的休息时间：
$(function(){createPlot(1);}); function createPlot(plotIndex){ var targetDiv = "barDiv" + plotIndex; // define jsonBarObj, jsonLegendObj & jsonColsObj here $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj)) if(plotIndex < 20) setTimeout(function(){createPlot(++plotIndex);},1); }编辑
的jsfiddle
这是一个完整的工作html：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.barRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.cursor.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasTextRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.highlighter.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.categoryAxisRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <style> //jquery.jqplot.css /*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/ .jqplot-target { position: relative; color: #666666; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* height: 300px; width: 400px;*/ } /*rules applied to all axes*/ .jqplot-axis { font-size: 0.75em; } .jqplot-xaxis { margin-top: 10px; } .jqplot-x2axis { margin-bottom: 10px; } .jqplot-yaxis { margin-right: 10px; } .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px; } /*rules applied to all axis tick divs*/ .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre; } .jqplot-xaxis-tick { top: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-top: 10px;*/ vertical-align: top; } .jqplot-x2axis-tick { bottom: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-bottom: 10px;*/ vertical-align: bottom; } .jqplot-yaxis-tick { right: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-right: 10px;*/ text-align: right; } .jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0px; padding:1px 5px 1px 5px; /* background-color: white;*/ z-index: 2; font-size: 1.5em; } .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-left: 10px;*/ /* padding-right: 15px;*/ text-align: left; } .jqplot-yMidAxis-tick { text-align: center; white-space: nowrap; } .jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute; } .jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute; } .jqplot-yaxis-label { margin-right: 10px; /* text-align: center;*/ font-size: 11pt; position: absolute; } .jqplot-yMidAxis-label { font-size: 11pt; position: absolute; } .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { /* text-align: center;*/ font-size: 11pt; margin-left: 10px; position: absolute; } .jqplot-meterGauge-tick { font-size: 0.75em; color: #999999; } .jqplot-meterGauge-label { font-size: 1em; color: #999999; } table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; } table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255,255,255,0.6); border: 1px solid #cccccc; position: absolute; font-size: 0.75em; } td.jqplot-table-legend { vertical-align:middle; } /* These rules could be used instead of assigning element styles and relying on js object properties. */ /* td.jqplot-table-legend-swatch { padding-top: 0.5em; text-align: center; } tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { padding-top: 0px; } */ td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer; } .jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through; } div.jqplot-table-legend-swatch-outline { border: 1px solid #cccccc; padding:1px; } div.jqplot-table-legend-swatch { width:0px; height:0px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; } .jqplot-title { top: 0px; left: 0px; padding-bottom: 0.5em; font-size: 1.2em; } table.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; } .jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-point-label { font-size: 0.75em; z-index: 2; } td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center; } div.jqplot-cursor-legend-swatch { width: 1.2em; height: 0.7em; } .jqplot-error { /* Styles added to the plot target container when there is an error go here.*/ text-align: center; } .jqplot-error-message { /* Styling of the custom error message div goes here.*/ position: relative; top: 46%; display: inline-block; } div.jqplot-bubble-label { font-size: 0.8em; /* background: rgba(90%, 90%, 90%, 0.15);*/ padding-left: 2px; padding-right: 2px; color: rgb(20%, 20%, 20%); } div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(90%, 90%, 90%, 0.7); } div.jqplot-noData-container { text-align: center; background-color: rgba(96%, 96%, 96%, 0.3); } </style> </head> <body id="b"> <button class="button">Load</button> <div class="chart" id="chart0" style="width: 300px; height: 200px"></div> <div class="chart" id="chart1" style="width: 300px; height: 200px"></div> <div class="chart" id="chart2" style="width: 300px; height: 200px"></div> <div class="chart" id="chart3" style="width: 300px; height: 200px"></div> <div class="chart" id="chart4" style="width: 300px; height: 200px"></div> <div class="chart" id="chart5" style="width: 300px; height: 200px"></div> <div class="chart" id="chart6" style="width: 300px; height: 200px"></div> <div class="chart" id="chart7" style="width: 300px; height: 200px"></div> <div class="chart" id="chart8" style="width: 300px; height: 200px"></div> <div class="chart" id="chart9" style="width: 300px; height: 200px"></div> <div class="chart" id="chart10" style="width: 300px; height: 200px"></div> <div class="chart" id="chart11" style="width: 300px; height: 200px"></div> <div class="chart" id="chart12" style="width: 300px; height: 200px"></div> <div class="chart" id="chart13" style="width: 300px; height: 200px"></div> <div class="chart" id="chart14" style="width: 300px; height: 200px"></div> <div class="chart" id="chart15" style="width: 300px; height: 200px"></div> <div class="chart" id="chart16" style="width: 300px; height: 200px"></div> <div class="chart" id="chart17" style="width: 300px; height: 200px"></div> <div class="chart" id="chart18" style="width: 300px; height: 200px"></div> <div class="chart" id="chart19" style="width: 300px; height: 200px"></div> <div class="chart" id="chart20" style="width: 300px; height: 200px"></div> <div class="chart" id="chart21" style="width: 300px; height: 200px"></div> <div class="chart" id="chart22" style="width: 300px; height: 200px"></div> <div class="chart" id="chart23" style="width: 300px; height: 200px"></div> <div class="chart" id="chart24" style="width: 300px; height: 200px"></div> <div class="chart" id="chart25" style="width: 300px; height: 200px"></div> <div class="chart" id="chart26" style="width: 300px; height: 200px"></div> <div class="chart" id="chart27" style="width: 300px; height: 200px"></div> <div class="chart" id="chart28" style="width: 300px; height: 200px"></div> <div class="chart" id="chart29" style="width: 300px; height: 200px"></div> <div class="chart" id="chart30" style="width: 300px; height: 200px"></div> <div class="chart" id="chart31" style="width: 300px; height: 200px"></div> <div class="chart" id="chart32" style="width: 300px; height: 200px"></div> <div class="chart" id="chart33" style="width: 300px; height: 200px"></div> <div class="chart" id="chart34" style="width: 300px; height: 200px"></div> <div class="chart" id="chart35" style="width: 300px; height: 200px"></div> <div class="chart" id="chart36" style="width: 300px; height: 200px"></div> <div class="chart" id="chart37" style="width: 300px; height: 200px"></div> <div class="chart" id="chart38" style="width: 300px; height: 200px"></div> <div class="chart" id="chart39" style="width: 300px; height: 200px"></div> <div class="chart" id="chart40" style="width: 300px; height: 200px"></div> <div class="chart" id="chart41" style="width: 300px; height: 200px"></div> <div class="chart" id="chart42" style="width: 300px; height: 200px"></div> <div class="chart" id="chart43" style="width: 300px; height: 200px"></div> <div class="chart" id="chart44" style="width: 300px; height: 200px"></div> <div class="chart" id="chart45" style="width: 300px; height: 200px"></div> <div class="chart" id="chart46" style="width: 300px; height: 200px"></div> <div class="chart" id="chart47" style="width: 300px; height: 200px"></div> <div class="chart" id="chart48" style="width: 300px; height: 200px"></div> <div class="chart" id="chart49" style="width: 300px; height: 200px"></div> <div class="chart" id="chart50" style="width: 300px; height: 200px"></div> <div class="chart" id="chart51" style="width: 300px; height: 200px"></div> <div class="chart" id="chart52" style="width: 300px; height: 200px"></div> <div class="chart" id="chart53" style="width: 300px; height: 200px"></div> <div class="chart" id="chart54" style="width: 300px; height: 200px"></div> <div class="chart" id="chart55" style="width: 300px; height: 200px"></div> <div class="chart" id="chart56" style="width: 300px; height: 200px"></div> <div class="chart" id="chart57" style="width: 300px; height: 200px"></div> <div class="chart" id="chart58" style="width: 300px; height: 200px"></div> <div class="chart" id="chart59" style="width: 300px; height: 200px"></div> <div class="chart" id="chart60" style="width: 300px; height: 200px"></div> <div class="chart" id="chart61" style="width: 300px; height: 200px">2</div> <div class="chart" id="chart62" style="width: 300px; height: 200px"></div> <div class="chart" id="chart63" style="width: 300px; height: 200px"></div> <div class="chart" id="chart64" style="width: 300px; height: 200px"></div> <div class="chart" id="chart65" style="width: 300px; height: 200px"></div> <div class="chart" id="chart66" style="width: 300px; height: 200px"></div> <div class="chart" id="chart67" style="width: 300px; height: 200px"></div> <div class="chart" id="chart68" style="width: 300px; height: 200px"></div> <div class="chart" id="chart69" style="width: 300px; height: 200px"></div> <div class="chart" id="chart70" style="width: 300px; height: 200px"></div> <div class="chart" id="chart71" style="width: 300px; height: 200px"></div> <div class="chart" id="chart72" style="width: 300px; height: 200px"></div> <div class="chart" id="chart73" style="width: 300px; height: 200px"></div> <div class="chart" id="chart74" style="width: 300px; height: 200px"></div> <div class="chart" id="chart75" style="width: 300px; height: 200px"></div> <div class="chart" id="chart76" style="width: 300px; height: 200px"></div> <div class="chart" id="chart77" style="width: 300px; height: 200px"></div> <div class="chart" id="chart78" style="width: 300px; height: 200px"></div> <div class="chart" id="chart79" style="width: 300px; height: 200px"></div> <div class="chart" id="chart80" style="width: 300px; height: 200px"></div> <div class="chart" id="chart81" style="width: 300px; height: 200px"></div> <div class="chart" id="chart82" style="width: 300px; height: 200px"></div> <div class="chart" id="chart83" style="width: 300px; height: 200px"></div> <div class="chart" id="chart84" style="width: 300px; height: 200px"></div> <div class="chart" id="chart85" style="width: 300px; height: 200px"></div> <div class="chart" id="chart86" style="width: 300px; height: 200px"></div> <div class="chart" id="chart87" style="width: 300px; height: 200px"></div> <div class="chart" id="chart88" style="width: 300px; height: 200px"></div> <div class="chart" id="chart89" style="width: 300px; height: 200px"></div> <div class="chart" id="chart90" style="width: 300px; height: 200px"></div> <div class="chart" id="chart91" style="width: 300px; height: 200px"></div> <div class="chart" id="chart92" style="width: 300px; height: 200px"></div> <div class="chart" id="chart93" style="width: 300px; height: 200px"></div> <div class="chart" id="chart94" style="width: 300px; height: 200px"></div> <div class="chart" id="chart95" style="width: 300px; height: 200px"></div> <div class="chart" id="chart96" style="width: 300px; height: 200px"></div> <div class="chart" id="chart97" style="width: 300px; height: 200px"></div> <div class="chart" id="chart98" style="width: 300px; height: 200px"></div> <div class="chart" id="chart99" style="width: 300px; height: 200px"></div> <div class="chart" id="chart100" style="width: 300px; height: 200px"></div> <div class="chart" id="chart101" style="width: 300px; height: 200px"></div> <div class="chart" id="chart102" style="width: 300px; height: 200px"></div> <div class="chart" id="chart103" style="width: 300px; height: 200px"></div> <div class="chart" id="chart104" style="width: 300px; height: 200px"></div> <div class="chart" id="chart105" style="width: 300px; height: 200px"></div> <div class="chart" id="chart106" style="width: 300px; height: 200px"></div> <div class="chart" id="chart107" style="width: 300px; height: 200px"></div> <div class="chart" id="chart108" style="width: 300px; height: 200px"></div> <div class="chart" id="chart109" style="width: 300px; height: 200px"></div> <div class="chart" id="chart110" style="width: 300px; height: 200px"></div> <div class="chart" id="chart111" style="width: 300px; height: 200px"></div> <div class="chart" id="chart112" style="width: 300px; height: 200px"></div> <div class="chart" id="chart113" style="width: 300px; height: 200px"></div> <div class="chart" id="chart114" style="width: 300px; height: 200px"></div> <div class="chart" id="chart115" style="width: 300px; height: 200px"></div> <div class="chart" id="chart116" style="width: 300px; height: 200px"></div> <div class="chart" id="chart117" style="width: 300px; height: 200px"></div> <div class="chart" id="chart118" style="width: 300px; height: 200px"></div> <div class="chart" id="chart119" style="width: 300px; height: 200px"></div> <div class="chart" id="chart120" style="width: 300px; height: 200px"></div> </body> <script> var data = [[2.609466E7],[4272988.0],[999165.0],[123805.0]]; var label = ["Business Workstations","Home Desktops","Display Devices","Accessories"]; var colorsSpec = ['#fab818', '#c1e800', '#9ed927', '#00c2b4', '#33ccff', '#2bacf8', '#4c8ded', '#7079db', '#753374', '#e63262', '#f77a19', '#fedb00']; jQuery('.button').click(function(){ loadChart(1); }); function loadChart(chartIndex){ var size = jQuery('.chart').size(); var targetDiv = 'chart' + chartIndex; generateStackedBarCharts(data, label, [''], targetDiv); if(chartIndex < size) { setTimeout(function(){loadChart(++chartIndex);}); } } function generateStackedBarCharts(jsonDataObj, jsonLegendObj, jsonColsObj, targetDiv) { plot3 = $.jqplot(targetDiv, jsonDataObj, { // Only animate if we're not using excanvas (not in IE 7 or IE // 8).. animate: !$.jqplot.use_excanvas, animateReplot: !$.jqplot.use_excanvas, seriesColors: colorsSpec, // Tell the plot to stack the bars. stackSeries: true, captureRightClick: true, seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { // Put a 30 pixel margin between bars. barMargin: 30, // Highlight bars when mouse button pressed. // Disables default highlighting on mouse over. highlightMouseDown: true }, pointLabels: { show: true, hideZeros: true, edgeTolerance: -5 } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: jsonColsObj, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: -30, fontFamily: 'Arial', fontSize: '9pt' } }, yaxis: { // Don't pad out the bottom of the data range. By default, // axes scaled as if data extended 10% above and below the // actual range to prevent data points right on grid // boundaries. // Don't want to do that here. padMin: 0, min: 0 } }, legend: { show: true, labels: jsonLegendObj, location: 'e', placement: 'outside' }, cursor: { show: true, zoom: true, showTooltip: true, followMouse: true } }); } </script> </html>编辑来自Thang Pham
与此结合使用，您可以在jqplot对象上调用destroy（）来释放它以修复泄漏内存的问题。 但是，由于在jqplot对象上调用destroy（）会使图表消失，我将jqplot图表转换为图像使用
https://bitbucket.org/cleonello/jqplot/issue/14/export-capabilities#comment-554274
来自上面链接的方法将返回base64图像字符串，该字符串可以使用jQuery提供给<img> 。 完成后，您可以安全地在jqplot对象上调用destroy（）。
I think the best way to deal with IE hanging is to give the browser a short break after each plot:
$(function(){createPlot(1);}); function createPlot(plotIndex){ var targetDiv = "barDiv" + plotIndex; // define jsonBarObj, jsonLegendObj & jsonColsObj here $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj)) if(plotIndex < 20) setTimeout(function(){createPlot(++plotIndex);},1); }Edit
JSFiddle
Here's a full working html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.barRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.cursor.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasTextRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.highlighter.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.categoryAxisRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <style> //jquery.jqplot.css /*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/ .jqplot-target { position: relative; color: #666666; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* height: 300px; width: 400px;*/ } /*rules applied to all axes*/ .jqplot-axis { font-size: 0.75em; } .jqplot-xaxis { margin-top: 10px; } .jqplot-x2axis { margin-bottom: 10px; } .jqplot-yaxis { margin-right: 10px; } .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px; } /*rules applied to all axis tick divs*/ .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre; } .jqplot-xaxis-tick { top: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-top: 10px;*/ vertical-align: top; } .jqplot-x2axis-tick { bottom: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-bottom: 10px;*/ vertical-align: bottom; } .jqplot-yaxis-tick { right: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-right: 10px;*/ text-align: right; } .jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0px; padding:1px 5px 1px 5px; /* background-color: white;*/ z-index: 2; font-size: 1.5em; } .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-left: 10px;*/ /* padding-right: 15px;*/ text-align: left; } .jqplot-yMidAxis-tick { text-align: center; white-space: nowrap; } .jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute; } .jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute; } .jqplot-yaxis-label { margin-right: 10px; /* text-align: center;*/ font-size: 11pt; position: absolute; } .jqplot-yMidAxis-label { font-size: 11pt; position: absolute; } .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { /* text-align: center;*/ font-size: 11pt; margin-left: 10px; position: absolute; } .jqplot-meterGauge-tick { font-size: 0.75em; color: #999999; } .jqplot-meterGauge-label { font-size: 1em; color: #999999; } table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; } table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255,255,255,0.6); border: 1px solid #cccccc; position: absolute; font-size: 0.75em; } td.jqplot-table-legend { vertical-align:middle; } /* These rules could be used instead of assigning element styles and relying on js object properties. */ /* td.jqplot-table-legend-swatch { padding-top: 0.5em; text-align: center; } tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { padding-top: 0px; } */ td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer; } .jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through; } div.jqplot-table-legend-swatch-outline { border: 1px solid #cccccc; padding:1px; } div.jqplot-table-legend-swatch { width:0px; height:0px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; } .jqplot-title { top: 0px; left: 0px; padding-bottom: 0.5em; font-size: 1.2em; } table.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; } .jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-point-label { font-size: 0.75em; z-index: 2; } td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center; } div.jqplot-cursor-legend-swatch { width: 1.2em; height: 0.7em; } .jqplot-error { /* Styles added to the plot target container when there is an error go here.*/ text-align: center; } .jqplot-error-message { /* Styling of the custom error message div goes here.*/ position: relative; top: 46%; display: inline-block; } div.jqplot-bubble-label { font-size: 0.8em; /* background: rgba(90%, 90%, 90%, 0.15);*/ padding-left: 2px; padding-right: 2px; color: rgb(20%, 20%, 20%); } div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(90%, 90%, 90%, 0.7); } div.jqplot-noData-container { text-align: center; background-color: rgba(96%, 96%, 96%, 0.3); } </style> </head> <body id="b"> <button class="button">Load</button> <div class="chart" id="chart0" style="width: 300px; height: 200px"></div> <div class="chart" id="chart1" style="width: 300px; height: 200px"></div> <div class="chart" id="chart2" style="width: 300px; height: 200px"></div> <div class="chart" id="chart3" style="width: 300px; height: 200px"></div> <div class="chart" id="chart4" style="width: 300px; height: 200px"></div> <div class="chart" id="chart5" style="width: 300px; height: 200px"></div> <div class="chart" id="chart6" style="width: 300px; height: 200px"></div> <div class="chart" id="chart7" style="width: 300px; height: 200px"></div> <div class="chart" id="chart8" style="width: 300px; height: 200px"></div> <div class="chart" id="chart9" style="width: 300px; height: 200px"></div> <div class="chart" id="chart10" style="width: 300px; height: 200px"></div> <div class="chart" id="chart11" style="width: 300px; height: 200px"></div> <div class="chart" id="chart12" style="width: 300px; height: 200px"></div> <div class="chart" id="chart13" style="width: 300px; height: 200px"></div> <div class="chart" id="chart14" style="width: 300px; height: 200px"></div> <div class="chart" id="chart15" style="width: 300px; height: 200px"></div> <div class="chart" id="chart16" style="width: 300px; height: 200px"></div> <div class="chart" id="chart17" style="width: 300px; height: 200px"></div> <div class="chart" id="chart18" style="width: 300px; height: 200px"></div> <div class="chart" id="chart19" style="width: 300px; height: 200px"></div> <div class="chart" id="chart20" style="width: 300px; height: 200px"></div> <div class="chart" id="chart21" style="width: 300px; height: 200px"></div> <div class="chart" id="chart22" style="width: 300px; height: 200px"></div> <div class="chart" id="chart23" style="width: 300px; height: 200px"></div> <div class="chart" id="chart24" style="width: 300px; height: 200px"></div> <div class="chart" id="chart25" style="width: 300px; height: 200px"></div> <div class="chart" id="chart26" style="width: 300px; height: 200px"></div> <div class="chart" id="chart27" style="width: 300px; height: 200px"></div> <div class="chart" id="chart28" style="width: 300px; height: 200px"></div> <div class="chart" id="chart29" style="width: 300px; height: 200px"></div> <div class="chart" id="chart30" style="width: 300px; height: 200px"></div> <div class="chart" id="chart31" style="width: 300px; height: 200px"></div> <div class="chart" id="chart32" style="width: 300px; height: 200px"></div> <div class="chart" id="chart33" style="width: 300px; height: 200px"></div> <div class="chart" id="chart34" style="width: 300px; height: 200px"></div> <div class="chart" id="chart35" style="width: 300px; height: 200px"></div> <div class="chart" id="chart36" style="width: 300px; height: 200px"></div> <div class="chart" id="chart37" style="width: 300px; height: 200px"></div> <div class="chart" id="chart38" style="width: 300px; height: 200px"></div> <div class="chart" id="chart39" style="width: 300px; height: 200px"></div> <div class="chart" id="chart40" style="width: 300px; height: 200px"></div> <div class="chart" id="chart41" style="width: 300px; height: 200px"></div> <div class="chart" id="chart42" style="width: 300px; height: 200px"></div> <div class="chart" id="chart43" style="width: 300px; height: 200px"></div> <div class="chart" id="chart44" style="width: 300px; height: 200px"></div> <div class="chart" id="chart45" style="width: 300px; height: 200px"></div> <div class="chart" id="chart46" style="width: 300px; height: 200px"></div> <div class="chart" id="chart47" style="width: 300px; height: 200px"></div> <div class="chart" id="chart48" style="width: 300px; height: 200px"></div> <div class="chart" id="chart49" style="width: 300px; height: 200px"></div> <div class="chart" id="chart50" style="width: 300px; height: 200px"></div> <div class="chart" id="chart51" style="width: 300px; height: 200px"></div> <div class="chart" id="chart52" style="width: 300px; height: 200px"></div> <div class="chart" id="chart53" style="width: 300px; height: 200px"></div> <div class="chart" id="chart54" style="width: 300px; height: 200px"></div> <div class="chart" id="chart55" style="width: 300px; height: 200px"></div> <div class="chart" id="chart56" style="width: 300px; height: 200px"></div> <div class="chart" id="chart57" style="width: 300px; height: 200px"></div> <div class="chart" id="chart58" style="width: 300px; height: 200px"></div> <div class="chart" id="chart59" style="width: 300px; height: 200px"></div> <div class="chart" id="chart60" style="width: 300px; height: 200px"></div> <div class="chart" id="chart61" style="width: 300px; height: 200px">2</div> <div class="chart" id="chart62" style="width: 300px; height: 200px"></div> <div class="chart" id="chart63" style="width: 300px; height: 200px"></div> <div class="chart" id="chart64" style="width: 300px; height: 200px"></div> <div class="chart" id="chart65" style="width: 300px; height: 200px"></div> <div class="chart" id="chart66" style="width: 300px; height: 200px"></div> <div class="chart" id="chart67" style="width: 300px; height: 200px"></div> <div class="chart" id="chart68" style="width: 300px; height: 200px"></div> <div class="chart" id="chart69" style="width: 300px; height: 200px"></div> <div class="chart" id="chart70" style="width: 300px; height: 200px"></div> <div class="chart" id="chart71" style="width: 300px; height: 200px"></div> <div class="chart" id="chart72" style="width: 300px; height: 200px"></div> <div class="chart" id="chart73" style="width: 300px; height: 200px"></div> <div class="chart" id="chart74" style="width: 300px; height: 200px"></div> <div class="chart" id="chart75" style="width: 300px; height: 200px"></div> <div class="chart" id="chart76" style="width: 300px; height: 200px"></div> <div class="chart" id="chart77" style="width: 300px; height: 200px"></div> <div class="chart" id="chart78" style="width: 300px; height: 200px"></div> <div class="chart" id="chart79" style="width: 300px; height: 200px"></div> <div class="chart" id="chart80" style="width: 300px; height: 200px"></div> <div class="chart" id="chart81" style="width: 300px; height: 200px"></div> <div class="chart" id="chart82" style="width: 300px; height: 200px"></div> <div class="chart" id="chart83" style="width: 300px; height: 200px"></div> <div class="chart" id="chart84" style="width: 300px; height: 200px"></div> <div class="chart" id="chart85" style="width: 300px; height: 200px"></div> <div class="chart" id="chart86" style="width: 300px; height: 200px"></div> <div class="chart" id="chart87" style="width: 300px; height: 200px"></div> <div class="chart" id="chart88" style="width: 300px; height: 200px"></div> <div class="chart" id="chart89" style="width: 300px; height: 200px"></div> <div class="chart" id="chart90" style="width: 300px; height: 200px"></div> <div class="chart" id="chart91" style="width: 300px; height: 200px"></div> <div class="chart" id="chart92" style="width: 300px; height: 200px"></div> <div class="chart" id="chart93" style="width: 300px; height: 200px"></div> <div class="chart" id="chart94" style="width: 300px; height: 200px"></div> <div class="chart" id="chart95" style="width: 300px; height: 200px"></div> <div class="chart" id="chart96" style="width: 300px; height: 200px"></div> <div class="chart" id="chart97" style="width: 300px; height: 200px"></div> <div class="chart" id="chart98" style="width: 300px; height: 200px"></div> <div class="chart" id="chart99" style="width: 300px; height: 200px"></div> <div class="chart" id="chart100" style="width: 300px; height: 200px"></div> <div class="chart" id="chart101" style="width: 300px; height: 200px"></div> <div class="chart" id="chart102" style="width: 300px; height: 200px"></div> <div class="chart" id="chart103" style="width: 300px; height: 200px"></div> <div class="chart" id="chart104" style="width: 300px; height: 200px"></div> <div class="chart" id="chart105" style="width: 300px; height: 200px"></div> <div class="chart" id="chart106" style="width: 300px; height: 200px"></div> <div class="chart" id="chart107" style="width: 300px; height: 200px"></div> <div class="chart" id="chart108" style="width: 300px; height: 200px"></div> <div class="chart" id="chart109" style="width: 300px; height: 200px"></div> <div class="chart" id="chart110" style="width: 300px; height: 200px"></div> <div class="chart" id="chart111" style="width: 300px; height: 200px"></div> <div class="chart" id="chart112" style="width: 300px; height: 200px"></div> <div class="chart" id="chart113" style="width: 300px; height: 200px"></div> <div class="chart" id="chart114" style="width: 300px; height: 200px"></div> <div class="chart" id="chart115" style="width: 300px; height: 200px"></div> <div class="chart" id="chart116" style="width: 300px; height: 200px"></div> <div class="chart" id="chart117" style="width: 300px; height: 200px"></div> <div class="chart" id="chart118" style="width: 300px; height: 200px"></div> <div class="chart" id="chart119" style="width: 300px; height: 200px"></div> <div class="chart" id="chart120" style="width: 300px; height: 200px"></div> </body> <script> var data = [[2.609466E7],[4272988.0],[999165.0],[123805.0]]; var label = ["Business Workstations","Home Desktops","Display Devices","Accessories"]; var colorsSpec = ['#fab818', '#c1e800', '#9ed927', '#00c2b4', '#33ccff', '#2bacf8', '#4c8ded', '#7079db', '#753374', '#e63262', '#f77a19', '#fedb00']; jQuery('.button').click(function(){ loadChart(1); }); function loadChart(chartIndex){ var size = jQuery('.chart').size(); var targetDiv = 'chart' + chartIndex; generateStackedBarCharts(data, label, [''], targetDiv); if(chartIndex < size) { setTimeout(function(){loadChart(++chartIndex);}); } } function generateStackedBarCharts(jsonDataObj, jsonLegendObj, jsonColsObj, targetDiv) { plot3 = $.jqplot(targetDiv, jsonDataObj, { // Only animate if we're not using excanvas (not in IE 7 or IE // 8).. animate: !$.jqplot.use_excanvas, animateReplot: !$.jqplot.use_excanvas, seriesColors: colorsSpec, // Tell the plot to stack the bars. stackSeries: true, captureRightClick: true, seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { // Put a 30 pixel margin between bars. barMargin: 30, // Highlight bars when mouse button pressed. // Disables default highlighting on mouse over. highlightMouseDown: true }, pointLabels: { show: true, hideZeros: true, edgeTolerance: -5 } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: jsonColsObj, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: -30, fontFamily: 'Arial', fontSize: '9pt' } }, yaxis: { // Don't pad out the bottom of the data range. By default, // axes scaled as if data extended 10% above and below the // actual range to prevent data points right on grid // boundaries. // Don't want to do that here. padMin: 0, min: 0 } }, legend: { show: true, labels: jsonLegendObj, location: 'e', placement: 'outside' }, cursor: { show: true, zoom: true, showTooltip: true, followMouse: true } }); } </script> </html>EDIT From Thang Pham
In combine with this, you can call destroy() on jqplot object to release it to fix the issue with leaking memory. However since call destroy() on jqplot object will make the chart disappear, I convert the jqplot chart to image using
https://bitbucket.org/cleonello/jqplot/issue/14/export-capabilities#comment-554274
the method from the above link will return base64 image string, which to can feed to <img> using jQuery. Once that is done, you can safely call destroy() on jqplot object.
更多推荐
发布评论