jqplot в Аккордеоне во Вкладке не работает - PullRequest
Новая
       1

jqplot в Аккордеоне во Вкладке не работает

1 голос
/ 15 февраля 2011

Я использую 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>

Как я уже говорил выше, эти диаграммы прекрасно загружаются, когда они не в аккордеоне, но выдают ошибки о неопределенных рендерерах в аккордеоне. Может кто-нибудь увидеть, что я сделал не так?

Ответы [ 2 ]

2 голосов
/ 08 августа 2011

ошибка связана с попыткой построить скрытый div

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

0 голосов
/ 02 марта 2012

это исправляет это для аккордеона 

<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>
...