logo标签列表

JQPlot：如何在不同位置重新绘图

javascriptjqueryjqplot
4
所以我需要在屏幕上绘制大约120个条形图，于是我执行以下操作：
var barPlot = $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj))

targetDiv是页面上不同的div的id，例如barDiv1，barDiv2等。

在IE9中，浏览器经常会挂起。因此，我的想法是将JQPlot对象存储到barPlot中，如上所示，然后如果不为空，则执行barPlot.replot()。我遇到的问题是如何指定一个新的target Id。我尝试了

barPlot.targetId = "#" + targetDiv;

但这并不起作用。请帮忙。

编辑：这里是 jsfiddle：http://jsfiddle.net/YX9wX/5/

点击“加载”，如果你alt+tab切换到其他窗口再切回来，你就会看到IE9卡住了，一直卡到全部绘制完成为止。

3
你能提供一个 jsfiddle 的示例吗？ - Dom
我同意@Dom的观点，我们需要一个更好的测试用例场景，因为这是一个关于优化的相当特定的问题！ - Khez
抱歉，我之前手头有其他任务，没能做jsfiddle，现在正在处理。 - Thang Pham
@Dom：我已经添加了jsffidle，请看一下http://jsfiddle.net/YX9wX/5/ - Thang Pham
@Khez：我已经添加了jsffidle，请看一下jsfiddle.net/YX9wX/5。 - Thang Pham
3个回答
3
也许我误解了你的问题，但是...你有一些HTML div目标（20个？）：
<div id="targetDiv1"></div>
<div id="targetDiv2"></div>
<div id="targetDiv3"></div>

一种常见的数据类型（任何类型）：
var data = [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]];
一个包含具体渲染选项（比如蓝色）的目标div中的第一个图形：
var barPlot = $.jqplot("targetDiv1", data, {series: [{color: "#0000ff"}]});

如果您想在其他带有不同呈现选项的div目标中重新绘制相同的数据，那么请尝试调用init方法，然后再调用replot:

barPlot.init("targetDiv2", barPlot.data, {series: [{color: "#ff0000"}]});
barPlot.replot({clear: false});

barPlot.init("targetDiv3", barPlot.data, {series: [{color: "#ff00ff"}]});
barPlot.replot({clear: false});
哦，谢谢。我会尝试一下，看看这是否能帮助我解决在Internet Explorer中绘制许多图表时的内存问题。 - Thang Pham
3
我认为应对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图表转换为图像。

上述链接中的方法将返回base64图像字符串，可以使用jQuery将其馈送给<img>标签。完成后，您可以安全地在jqplot对象上调用destroy()。

是的，直到所有绘制完成并且所有图表都显示出来之后，它才会挂起（无响应）。很抱歉我手头有其他任务繁忙，没能做jsfiddle，现在正在做。 - Thang Pham
谢谢，不知道为什么在 jsfiddle 上可以运行，但在我的系统上，它仍然尝试一次性绘制所有图形，而不是像示例那样逐个绘制。太奇怪了。还有其他想法吗？ - Thang Pham
尝试将超时时间从1毫秒更改为100毫秒：setTimeout(function(){createPlot(++plotIndex);},100);。如果图表仍然同时绘制，请重新检查您的代码。 - ic3b3rg
不确定问题出在哪里，但我已经添加了一个完整的工作HTML供您测试。 - ic3b3rg
请在您的回答中附上jsfiddle.net/YX9wX/6，之后我会授予奖励。谢谢。 - Thang Pham
显示剩余2条评论
1

我建议尝试另一种方法。

好的，当你创建20个图表时，IE会卡住，但其他浏览器也会卡住，只是时间更短。如果你在图表中加载了大量数据，所有浏览器都会卡住。这也取决于计算机性能和特定平台，比如手机上的浏览器。

我知道的最好的基本设计模式是使用一个加载层，并使用JQuery load()函数加载一个包含大量内容的页面。这个函数会在加载期间卡住你的浏览器（同步模式），但会显示一个带有图像的消息，以便用户理解。

在你的情况下，你可以在网页中默认隐藏一个div graphs-container，使用一个div来显示加载动画（或者通过CSS类将加载层应用到你的graphs-container中，在这种情况下默认可见），然后使用JQuery load()函数加载你的大页面。在成功加载回调中，你可以隐藏加载层并显示已加载的页面，包括所有的图表。

通常，我会将加载层类与一个动画gif轮和一个简单的文本组合起来。

为了提高渲染性能和节省用户带宽，您可以使用 PHP ob-gzhandler 压缩网页或直接使用.htaccess规则: http://www.xpertdeveloper.com/2012/04/htaccess-gzip-compression/。
另一个提示是只加载JS库一次，JQPlot有许多插件，您肯定在使用其中一些需要时间来加载。
以下是可能实现的加载层div以显示在图形加载期间具有动画效果的文本：
<!-- The loading layer with loading message and animated GIF -->
<div id='graphs-loading-layer' class='loading'>Loading in progress...</div>

<!-- The target div to load all your graphs -->    
<div id='graphs-container'></div>

<!-- Loading class example -->        
<style>
    .loading{   
        border:1px dotted black;
        font-size:25px;
        background-color:white;
        background-image:url(./loading.gif);
        background-repeat:no-repeat;
        background-position:center center;
        opacity:0.6;
        z-index:200;
        width:99%;
        min-height:442px;
        border-radius: 10px;
        position:relative;
        text-align:center;
        line-height:300px;
    }
</style>

<script>
   //allJQPlotGraphs.php is the file (or a call to a controller in MVC model) where the graphs are generated
   $('#graphs-container').hide().load('allJQPlotGraphs.php',{/*JSON map data*/},function(){
      //Here is the success callback, fade out the loading layer div
      $('#graphs-loading-layer').fadeOut(300,function(){     
          //Then, display the graphs container with all graphs loaded
          $('#graphs-container').fadeIn(300);
      });      
   });
</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接