javascript - JQPlot: 別の位置に再プロットする方法

Question

画面に約 120 個の棒グラフをプロットする必要があるため、次のようにします。

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

targetDivのようなdivページ上の異なるの idです ...barDiv1barDiv2

IE9 では、ブラウザが頻繁にハングします。したがって、JQPlot オブジェクトをbarPlot上記のように格納するという私の考えは、null でない場合は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>

タンファムから編集

これと組み合わせて、jqplot オブジェクトで destroy() を呼び出して解放し、メモリリークの問題を修正できます。ただし、jqplot オブジェクトで destroy() を呼び出すとグラフが消えるため、次を使用して jqplot グラフを画像に変換します

https://bitbucket.org/cleonello/jqplot/issue/14/export-capabilities#comment-554274

上記のリンクのメソッドは、<img>jQuery を使用してフィードできる base64 イメージ文字列を返します。それが完了したら、jqplot オブジェクトで destroy() を安全に呼び出すことができます。

score 1 · Accepted Answer

別のアプローチを試してみます。

OK、IE は 20 個のグラフを作成しているときにハングしますが、他のブラウザーもハングしますが、それよりも短いだけです。グラフに大量のデータをロードしている場合、すべてのブラウザーがハングします。また、コンピューターのパフォーマンスや、電話のブラウザーなどの特定のプラットフォームにも依存します。

大きなコンテンツを読み込むための私が知っている最良の基本的な設計パターンは、読み込みレイヤーを使用し、JQueryload()関数を使用して大きなコンテンツを含むページを読み込むことです。この関数は、ロード中にブラウザーをハングアップさせます (同期モード) が、ユーザーが理解できるように画像付きのメッセージが表示されます。

あなたの場合、div graphs-containerWebページにデフォルトで非表示を設定し、divを使用してローディングアニメーションを表示し（または、この場合はデフォルトでCSSクラスによるローディングレイヤーをgraphs-container可視に適用します）、JQueryを使用して大きなページをロードしますload()関数。読み込み成功のコールバックでは、読み込みレイヤーを非表示にして、読み込まれたページ、ケース内のすべてのグラフを表示できます。

通常、アニメーション GIF ホイールと単純なテキストを使用して、読み込みレイヤークラスを作成します。

PHP ob-gzhandlerレンダリングのパフォーマンスを向上させ、ユーザーの帯域幅を節約するために、ルールを使用して、またはルールを直接使用して Web ページを圧縮することもでき.htaccessます: http://www.xpertdeveloper.com/2012/04/htaccess-gzip-compression/

もう 1 つのヒントは、JS ライブラリを 1 回だけロードすることです。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