JqPlot系列切换

JqPlot seriesToggle

本文关键字：系列 JqPlot      更新时间：2023-09-26

我正在为Javascript使用JqPlot。

我能帮我把这个系列的开关正常工作吗。在我的代码中，我有seriesTaggle:"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>

我想您可能误解了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();
    }
});
相关文章：