javascript - JQPlot：如何在不同的位置重新绘制

Question

所以我需要在我的屏幕上绘制大约 120 个条形图，所以我执行以下操作

var barPlot = $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj))

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

在 IE9 中，浏览器经常挂起。所以我的想法是将 JQPlot 对象存储为barPlot像上面那样，然后如果不为空，则barPlot.replot(). 我遇到的问题是如何指定新的target Id. 我试试

barPlot.targetId = "#" + targetDiv;

但这不起作用。请帮忙

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

点击加载，如果你alt+tab离开然后alt_tab返回，你可以看到它挂在IE9上，一直挂到它完成所有绘图

score 3 · Accepted Answer

也许我误解了你的问题，但是......你有一些 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});

score 3 · Accepted Answer

我认为处理 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 图像字符串，可以<img>使用 jQuery 提供。完成后，您可以安全地在 jqplot 对象上调用 destroy()。

score 1 · Accepted Answer

我会尝试不同的方法。

好的，当您创建 20 个图形时，IE 会挂起，但其他浏览器也会挂起，但时间会更短。如果您在图表中加载大量数据，所有浏览器都会挂起。它还取决于计算机性能和特定平台，例如手机上的浏览器。

我知道加载大内容的最佳基本设计模式是使用加载层并使用 JQueryload()函数加载包含大内容的页面。此功能会在加载期间挂起您的浏览器（同步模式），但会显示带有图像的消息以供用户理解。

在你的情况下，你可以div graphs-container在你的网页中默认隐藏，使用 div 来显示加载动画（或者graphs-container在这种情况下，默认情况下通过 CSS 类将加载层应用于你的可见），然后使用 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>

javascript - JQPlot：如何在不同的位置重新绘制

3 回答 3

编辑

JSFiddle

Related

Reference