1

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>

上で述べたように、これらのチャートは、アコーディオンにない場合は正常にロードされますが、アコーディオンにある場合は未定義のレンダラーに関するエラーをスローします。誰かが私が間違ったことを見ることができますか？

4

2 に答える 2

2

エラーは、非表示のdivにプロットしようとしたことに関連しています

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

于 2011-08-08T14:31:26.880 に答える
0

これはアコーディオンのためにそれを修正します

<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>
于 2012-03-02T11:58:02.843 に答える