JqPlot seriesToggle

Question

我使用的是Javascript的JqPlot。

我能得到一些帮助让seriesToggle正常工作吗？在我的代码中，我有seriesToggle：'normal‘。这不管用。该图显示完美，但图例显示在旁边，当我单击该图时，图例仍停留在那里。显示/隐藏图例的正确代码是什么？

下面是我的代码：

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

Answer 1

我想你可能误解了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();
    }
});