jqplot可以通過一個傳說隱藏同一系列的mulltiple圖表嗎？

Question

我使用了一些基於jqplot的代碼，它繪製了一個條形圖，並允許通過單擊legendname來切換圖表系列，請參閱下面的函數代碼。

是否可以通過只有一個圖例來控制一系列不同的圖表？如果是這樣，怎麼樣？

function drawBarchart(name,ticks,labels,s11,s12,s21,s22){ 

     var plot1 = $.jqplot(name, [s11,s12,s21,s22], { //'chart1' -> define wrapper <div id='chart1'> </div> 
     // The "seriesDefaults" option is an options object that will 
     // be applied to all series in the chart. 
      grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'}, 
      seriesDefaults:{renderer:$.jqplot.BarRenderer, //choose bar chart 
       rendererOptions: {fillToZero: true}, 
       pointLabels: { show: true, location: 'e', edgeTolerance: -15 } //adds values+labels to bars 
      },//seriesDefaults 
      // Custom labels for the series are specified with the "label" 
      // option on the series option. Here a series option object 
      // is specified for each series. 
      series:[ //define labels 
       {label:labels[0], shadow: false}, 
       {label:labels[1], shadow: false}, 
       {label:labels[2], shadow: false}, 
      ],//series 
      // Show the legend and put it outside the grid, but inside the 
      // plot container, shrinking the grid to accomodate the legend. 
      // A value of "outside" would not shrink the grid and allow 
      // the legend to overflow the container. 
      legend: { 
       show: true, 
       placement: 'outsideGrid', 
       renderer: $.jqplot.EnhancedLegendRenderer //enables toggling data and legends 
      },//legend 
      axes: { 
      // Use a category axis on the x axis and use our custom ticks. 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: ticks, 
        tickOptions: {showGridline: false} 
       },//xaxis 
       // Pad the y axis just a little so bars can get close to, but 
       // not touch, the grid boundaries. 1.2 is the default padding. 
       yaxis: { 
        showTicks:false, 
        label: 'axis1', 
        pad: 1.05, 
        tickOptions: { showGridline: false} 
       },//yaxis 

       y2axis: { 
        showTicks:false, 
        label: 'axis2', 
        pad: 1.05, 
        tickOptions: {showGridline: false} 
       }//yaxis 

      },//axes 

      series:[ 
       {yaxis:'yaxis', label:'s11[0]'}, 
       {yaxis:'y2axis', label:'s11[1]'}, 
       {yaxis:'yaxis', label:'s12[0]'}, 
       {yaxis:'y2axis', label:'s12[1]'}, 
       {yaxis:'y2axis', label:'s21'}, 
       {yaxis:'y2axis', label:'s22'}, 


      ] 
     }); //$.jqplot('chart1', [s1, s2, s3], 
    }//barchart 

Answer 1

我已經做到了。這裏是你的代碼執行Jsfiddle Link

考慮到你必須自己繪製Legends而不是使用jqplot。 如果你能做到這一點，那麼我的代碼將照顧其餘的。

$(document).ready(function() { 
    var graphObj = []; 
    var s11 = [["a",1],["b",1],["c",5],["d",2]]; 
    var s12 = [["a",2],["b",2],["c",6],["d",5]]; 
    var s21 = [["a",3],["b",3],["c",7],["d",1]]; 
    var s22 = [["a",4],["b",4],["c",8],["d",8]]; 
    drawBarchart("chart1", s11, s12, s21, s22, 0); 
    drawBarchart("chart2", s11, s12, s21, s22, 1); 

    $(".jqplot-table-legend tr").click(function(){ 
     var index = this.rowIndex; 
     for(var j =0; j<graphObj.length; j++){ 
      graphObj[j].series[index].show = !graphObj[j].series[index].show; 
      graphObj[j].redraw(); 
     } 
    }); 

    function drawBarchart(name, s11, s12, s21, s22, i) { 

     graphObj[i] = $.jqplot(name, [s11, s12, s21, s22], { 
      // The "seriesDefaults" option is an options object that will 
      // be applied to all series in the chart. 
      grid: { 
       borderColor: 'transparent', 
       shadow: false, 
       drawBorder: false, 
       shadowColor: 'transparent' 
      }, 
      seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, //choose bar chart 
       rendererOptions: { 
        fillToZero: true 
       }, 
       pointLabels: { 
        show: false, 
        location: 'e', 
        edgeTolerance: -15 
       } //adds values+labels to bars 
      }, //seriesDefaults 
      // Custom labels for the series are specified with the "label" 
      // option on the series option. Here a series option object 
      // is specified for each series. 

      // Show the legend and put it outside the grid, but inside the 
      // plot container, shrinking the grid to accomodate the legend. 
      // A value of "outside" would not shrink the grid and allow 
      // the legend to overflow the container. 

      axes: { 
       // Use a category axis on the x axis and use our custom ticks. 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        tickOptions: { 
         showGridline: false 
        } 
       }, //xaxis 
       // Pad the y axis just a little so bars can get close to, but 
       // not touch, the grid boundaries. 1.2 is the default padding. 
       yaxis: { 
        showTicks: false, 
        label: 'axis1', 
        pad: 1.05, 
        tickOptions: { 
         showGridline: false 
        } 
       }, //yaxis 

       y2axis: { 
        showTicks: false, 
        label: 'axis2', 
        pad: 1.05, 
        tickOptions: { 
         showGridline: false 
        } 
       } //yaxis 

      }, //axes 

      series: [{ 
       yaxis: 'yaxis', 
       label: 's11[0]' 
      }, { 
       yaxis: 'y2axis', 
       label: 's11[1]' 
      }, { 
       yaxis: 'yaxis', 
       label: 's12[0]' 
      }, { 
       yaxis: 'y2axis', 
       label: 's12[1]' 
      }, { 
       yaxis: 'y2axis', 
       label: 's21' 
      }, { 
       yaxis: 'y2axis', 
       label: 's22' 
      }, 


      ] 
     }); 
    } 
});