1

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

1 に答える 1

2

あなたは何のためにあるのか誤解しているかもしれないと思います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();
    }
});
于 2013-02-09T03:14:03.243 に答える