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>

选项卡内的Accordian中的jqplot不起作用

2 个答案: