javascript/amcharts - 凡例を使用してAmchart Column Chartの1つのグラフの列を表示/非表示にする簡単な方法

Question

のグラフのアイテムに切り替え可能な機能を持つ凡例を簡単に追加できないようですamcharts。私は周りを検索し、切り替え可能なグラフ（JSFiddle 1）を持つ縦棒グラフを見つけました。私は切り替え可能なアイテムの凡例を見つけましたが、正しくサイズを変更していません（JSFiddle 2）。

これは、単一グラフ（CodePen 1）の複数の項目から凡例を追加するのに最も近い方法です。それはamchartウェブサイト自体からのものですが、切り替え可能な機能はありません。列のサイズ変更を可能にする切り替え可能な機能をここに追加するにはどうすればよいですか（つまり、2つの項目が10列より大きな列で表示されます）。私は、スイッチ機能を追加することができるかどうかだけ確認するために、最初にこれを試してみましたが、それは動作しません：

AmCharts.addInitHandler(function(chart) { 
    //check if legend is enabled and custom generateFromData property 
    //is set before running 
    if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) { 
    return; 
    } 

    var categoryField = chart.categoryField; 
    var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField; 
    var legendData = chart.dataProvider.map(function(data) { 
    var markerData = { 
     "title": data[categoryField] + ": " + data[chart.graphs[0].valueField], 
     "color": data[colorField] 
    }; 
    if (!markerData.color) { 
     markerData.color = chart.graphs[0].lineColor; 
    } 
    return markerData; 
    }); 

    chart.legend.data = legendData; 

    // here is the code I add 
    chart.legend.switchable=true; 

} 

Answer 1

更新からAmCharts knowledge base demoは、以下の変更が含まれるように更新されました。

実際には、図表のサイズを変更するには、dataProviderを実際に変更し、要素を配列から削除してグラフを再描画する必要があります。凡例のclickMarkerを使用して、データ項目をイベントdataItemオブジェクトに格納し、必要に応じて隠しフラグを使用して取得することができます。一緒に以前のソリューションからフィドルを組み合わせることで、私はこの思い付いた：

/* 
    Plugin to generate legend markers based on category 
    and fillColor/lineColor field from the chart data by using 
    the legend's custom data array. Also allows for toggling markers 
    and completely removing/adding columns from the chart 

    The plugin assumes there is only one graph object. 
*/ 
AmCharts.addInitHandler(function(chart) { 

    //method to handle removing/adding columns when the marker is toggled 
    function handleCustomMarkerToggle(legendEvent) { 
     var dataProvider = legendEvent.chart.dataProvider; 
     var itemIndex; //store the location of the removed item 

     //Set a custom flag so that the dataUpdated event doesn't fire infinitely, in case you have 
     //a dataUpdated event of your own 
     legendEvent.chart.toggleLegend = true; 
     // The following toggles the markers on and off. 
     // The only way to "hide" a column and reserved space on the axis is to remove it 
     // completely from the dataProvider. You'll want to use the hidden flag as a means 
     // to store/retrieve the object as needed and then sort it back to its original location 
     // on the chart using the dataIdx property in the init handler 
     if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) { 
     legendEvent.dataItem.hidden = false; 
     dataProvider.push(legendEvent.dataItem.storedObj); 
     legendEvent.dataItem.storedObj = undefined; 
     //re-sort the array by dataIdx so it comes back in the right order. 
     dataProvider.sort(function(lhs, rhs) { 
      return lhs.dataIdx - rhs.dataIdx; 
     }); 
     } else { 
     // toggle the marker off 
     legendEvent.dataItem.hidden = true; 
     //get the index of the data item from the data provider, using the 
     //dataIdx property. 
     for (var i = 0; i < dataProvider.length; ++i) { 
      if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) { 
      itemIndex = i; 
      break; 
      } 
     } 
     //store the object into the dataItem 
     legendEvent.dataItem.storedObj = dataProvider[itemIndex]; 
     //remove it 
     dataProvider.splice(itemIndex, 1); 
     } 
     legendEvent.chart.validateData(); //redraw the chart 
    } 

    //check if legend is enabled and custom generateFromData property 
    //is set before running 
    if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) { 
    return; 
    } 

    var categoryField = chart.categoryField; 
    var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField; 
    var legendData = chart.dataProvider.map(function(data, idx) { 
    var markerData = { 
     "title": data[categoryField] + ": " + data[chart.graphs[0].valueField], 
     "color": data[colorField], 
     "dataIdx": idx 
    }; 
    if (!markerData.color) { 
     markerData.color = chart.graphs[0].lineColor; 
    } 
    data.dataIdx = idx; 
    return markerData; 
    }); 

    chart.legend.data = legendData; 

    //make the markers toggleable 
    chart.legend.switchable = true; 
    chart.legend.addListener("clickMarker", handleCustomMarkerToggle); 

}, ["serial"]); 

Demo