Серия JqPlotToggle

Я использую JqPlot для Javascript.

Могу ли я помочь, чтобы серияToggle работала правильно. В моем коде есть seriesToggle: «нормальный». Это не работает. График отображается идеально, но легенда отображается сбоку, и когда я нажимаю на график, легенда просто остается там. Какой правильный код для отображения/скрытия легенды?

Вот мой код:

<script class="code" type="text/javascript">

$(document).ready(function(){


var plotCustomerSurveyGraph = $.jqplot('CustomerSurveyLineGraph', [[3.6, 3.2, 3.6], [2.4, 2.7, 2.9], [3.5, 3.1, 3.0]], 
{ 
            axes:
            {
                xaxis:
                {
                      ticks: ['1','2','3'],
                    showTicks: false
                },
                yaxis:
                {
                    //labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    ticks: ['1','2','3','4'],
                    showTicks: true
                }
            },
    title:{
                text: '3 Month Trends',
                fontSize: 12 },
            width: 480, height: 480,
            legend:{show:true, location: 'e', placement: 'outsideGrid', renderer: $.jqplot.EnhancedLegendRenderer,             rendererOptions: {

            seriesToggle: 'normal'
            //seriesToggleReplot: {resetAxes: true}
        }},
    seriesDefaults: 
    {
                rendererOptions: {smooth: true}

    },
    series:[ 
                {
                    lineWidth:1, 
                    label:'COGS',
                    markerOptions: { size:7, style:'dimaond' }
                }, 
                {
                    lineWidth:1, 
                    label:'Wages',
                    markerOptions: { size: 7, style:"dimaond" }
                }
                ]
    }

);      
});


<div class="small_dash_container">
    <div id="CustomerSurveyLineGraph" style="height:120px; width:220px; margin-left:10px;"></div>
</div>

<script class="include" type="text/javascript" src="elements/js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="elements/js/jqplot/examples/syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="elements/js/jqplot/examples/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="elements/js/jqplot/examples/syntaxhighlighter/scripts/shBrushXml.min.js"></script>

<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot//plugins/jqplot.pointLabels.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot.barRenderer.min.js"></script>

<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>    
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>    
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/examples/jquery-ui/js/jquery-ui.min.js"></script>        
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.blockRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="elements/js/jqplot/plugins/jqplot.highlighter.min.j"></script>

javascript series show legend jqplot
person user2023359    schedule 08.02.2013    source источник
comment
можно подробнее что не работает?   -  person Iswanto San    schedule 08.02.2013
comment
@IswantoSan: добавлено больше деталей.   -  person user2023359    schedule 08.02.2013

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вы могли неправильно понять, для чего предназначено seriesToggle. Смысл этой опции в том, чтобы позволить пользователю щелкнуть имя серии в легенде и отобразить/скрыть соответствующую серию на графике.

Тем не менее, если у вас действительно есть причина скрыть легенду, следующее переключает легенду, чтобы она была видимой и скрытой при нажатии на график:

$('#chart1').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data) {
    if($('#chart1 .jqplot-table-legend').is(':visible')) {
        $('#chart1 .jqplot-table-legend').hide();
    }
    else {
        $('#chart1 .jqplot-table-legend').show();
    }
});
person nick_w    schedule 09.02.2013