jqplot在一个标签内的手风琴不起作用

Question

我正在使用jqplot在手风琴中显示图形。 http://www.jqplot.com/tests/UI.php

当我只显示没有被分割成各种手风琴标题的图表时，它完美地工作。当我开始把图表到各种手风琴头我开始JavaScript的错误，当我鼠标悬停在图表应显示：

Error: plot.plugins.pieRenderer is undefined 

Error: plot.plugins.barRenderer is undefined 

---

<script type="text/javascript"> 
      $(function() { 
       $("#RTD_BreakGroups").accordion({ 
        autoHeight: false, 
        navigation: true, 
        collapsible: true, 
        active: false 
       }); 

       $("#RTD_BreakGroups").bind('accordionchange', function(event, ui) { 
        var index = $(this).find("h3").index(ui.newHeader[0]); 
        switch (index) 
        { 
         case 1: 
          goodbadplot.replot(); 
          percentdiffplot.replot(); 
          break; 
         case 10: 
         Engineergoodplot.replot(); 
         Engineerbadplot.replot(); 
         break; 
       } 
      }); 
     }); 

---

<div id="RTD_BreakGroups"> 
     <h3><a href="#">RTD Overview</a></h3> 
     <div> 
      <div id="GoodVsBad" data-height="450" data-width="450" style="height:450px;width:450px;"></div> 
      <div id="GoodVsBadThreshold" data-height="250" data-width="700" style="height:250px;width:700px;"></div> 
      <style type="text/css"> 
       #GoodVsBadThreshold .jqplot-meterGauge-tick, #GoodVsBadThreshold .jqplot-meterGauge-label 
       { 
        font-size: 10pt; 
       } 
      </style> 
     </div> 
<h3><a href="#">Engineer Overview</a></h3> 
     <div> 
      This grouping shows how RTD has been behaving if the player is a engineer. 
      <div id="EngineerGoodRolls" data-height="450" data-width="1024" style="height:450px;width:1024px;"></div> 
      <div id="EngineerBadRolls" data-height="450" data-width="1024" style="height:450px;width:1024px;"></div> 
     </div> 
    </div> 

---

就像我上面所说的那样，这些图表不会在手风琴中加载，但会在手风琴中抛出关于未定义渲染器的错误。任何人都可以看到我做错了什么吗？

Answer 1

的错误与试图绘制成一个隐藏的div

https://bitbucket.org/cleonello/jqplot/issue/252/ppluginsbarrenderer-is-undefined

Answer 2

此修复它为手风琴

<script> 
var plotline; 
var plotgraph = 0;  
$(document).ready(function(){ 
    $("#accordion").accordion({ 
     autoHeight: false, 
     navigation: true 
    }); 
    $("#accordion").bind('accordionchange', function(event, ui) { 
     if (plotgraph==0){ 
      drawGrid();  
     } 
    }); 
}); 


function drawGrid() { 
    if ($('#chartdiv').is(":visible")) { 
      plotline=[11, 9, 5, 12, 14]; 
      plotgraph = $.jqplot('chartdiv',[plotline],{  
      stackSeries: true,  
      showMarker: false,  
      seriesDefaults: {   
       fill: true  
      },  
      axes: {   
       xaxis: {    
        renderer: $.jqplot.CategoryAxisRenderer,    
        ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]   
       }  
      }  
     }); 
    }  
    else{ 
     plotgraph = 0; 
    } 
} 
</script> 

<div id="accordion"> 
    <h3><a href="#">Table</a></h3> 
    <div class="ui-widget"> 
     <table style="border: solid white 20px;"> 
      <tr> 
       <th>Mon</th> 
       <th>Tues</th> 
       <th>Wed</th> 
       <th>Thr</th> 
       <th>Fri</th> 
      </tr> 
      <tr> 
       <td>11</td> 
       <td>9</td> 
       <td>5</td> 
       <td>12</td> 
       <td>14</td> 
      </tr> 
     </table> 
    </div> 
    <h3><a href="#">Graph</a></h3> 
    <div class="ui-widget"> 
     <div id="chartdiv" style="height:400px;width:850px;"></div>  
    </div> 
</div> 

或本作标签

<script> 
var plotline; 
var plotgraph = 0;  
$(document).ready(function(){ 
    $('.button').button(); 
     $("#tabs").tabs({ 
      show: function(event, ui) {  
      if (plotgraph==0){ 
       drawGrid();  
      } 
     } 
    }); 
}); 


function drawGrid() { 
    if ($('#chartdiv').is(":visible")) { 
      plotline=[11, 9, 5, 12, 14]; 
      plotgraph = $.jqplot('chartdiv',[plotline],{  
      stackSeries: true,  
      showMarker: false,  
      seriesDefaults: {   
       fill: true  
      },  
      axes: {   
       xaxis: {    
        renderer: $.jqplot.CategoryAxisRenderer,    
        ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]   
       }  
      }  
     }); 
    }  
    else{ 
     plotgraph = 0; 
    } 
} 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Table</a></li> 
     <li><a href="#tabs-2">Graph</a></li>   
    </ul> 
    <div id="tabs-1"> 
     <table> 
      <tr> 
       <th>Mon</th> 
       <th>Tues</th> 
       <th>Wed</th> 
       <th>Thr</th> 
       <th>Fri</th> 
      </tr> 
      <tr> 
       <td>11</td> 
       <td>9</td> 
       <td>5</td> 
       <td>12</td> 
       <td>14</td> 
      </tr> 
     </table> 
    </div> 
    <div id="tabs-2"> 
     <div class="ui-widget"> 
      <p class="ui-widget-content para"> 
       <div id="chartdiv" style="height:400px;width:850px;"></div> 
      </p> 
     </div> 
    </div> 
</div>