选项卡内 Accordian 中的 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>