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

时间：2012-12-28 20:16:06

标签： javascript jquery jqplot

所以我需要在屏幕上绘制大约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上，并挂起直到它完成所有绘图

3 个答案:

答案 0 :(得分：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});

答案 1 :(得分：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图表转换为图像

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

上面链接中的方法将返回base64图像字符串，该字符串可以使用jQuery提供给<img>。完成后，您可以安全地在jqplot对象上调用destroy（）。

答案 2 :(得分：1)

我会尝试不同的方法。

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

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

在您的情况下，您可以在网页中默认隐藏div graphs-container，使用div显示加载动画（或通过CSS类将加载图层应用到您的{{ 1}}在这种情况下默认可见），然后使用JQuery graphs-container函数加载大页面。在成功加载回调中，您可以隐藏加载图层并显示已加载的页面，以及您案例中的所有图形。

通常，我使用动画gif轮和简单文本组合加载图层类。

要提高呈现效果并节省用户带宽，您还可以使用PHP ob-gzhandler或直接使用load()规则压缩网页：http://www.xpertdeveloper.com/2012/04/htaccess-gzip-compression/

另一个提示是只加载一次JS库，JQPlot有很多你肯定使用的插件需要时间加载。

这是一个加载图层div的可能实现，用于在图形加载时显示带有动画的文本：

.htaccess
相关问题
最新问题