JqPlot series切換

Question

我正在使用JqPlot for Javascript。

我可否請幫忙讓系列切換正常工作。 在我的代碼中，我有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(); 
    } 
});