javascript/amcharts-使用图例显示/隐藏Amchart柱形图的1个图形的列的简单方法

我似乎找不到一个简单的方法来添加图例，该图例在amcharts的单个图形中具有项目切换功能。我四处搜索，发现了一个柱状图，其中有可切换的图形（）。我找到了可切换项目图例，但它没有正确调整大小（）

这是我能找到的最接近于从单个图形（）的多个项目添加图例的方法。它来自阿姆查特网站本身，但没有可切换的功能。如何在此处添加允许调整列大小的可切换功能（即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;

}

---

更新-已更新，包括以下修改

为了完全调整图表的大小，您必须实际修改

数据提供程序

，并从数组中删除元素并重新绘制图表。可以使用图例将数据项存储到事件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"]);

/*
基于类别生成图例标记的插件
并使用从图表数据中填充颜色/线颜色字段
图例的自定义数据数组。还允许切换标记
以及从图表中完全删除/添加列
该插件假定只有一个图形对象。
*/
addInitHandler（函数（图表）{
//方法在切换标记时处理删除/添加列的操作
功能手柄自定义MarkerToggle（legendEvent）{
var dataProvider=legendEvent.chart.dataProvider；
var itemIndex；//存储已删除项的位置
//设置一个自定义标志，以便dataUpdated事件不会无限激发（如果有）
//您自己的数据更新事件
legendEvent.chart.togglegend=true；
//下面将切换标记的打开和关闭。
//在轴上“隐藏”列和保留空间的唯一方法是将其删除
//完全来自数据提供程序。您需要使用隐藏标志作为一种手段
//根据需要存储/检索对象，然后将其排序回其原始位置
//在图表上使用init处理程序中的dataIdx属性
if（未定义！==legendEvent.dataItem.hidden&&legendEvent.dataItem.hidden）{
legendEvent.dataItem.hidden=false；
dataProvider.push（legendEvent.dataItem.storedObj）；
legendEvent.dataItem.storedObj=未定义；
//按dataIdx对数组重新排序，使其以正确的顺序返回。
dataProvider.sort（函数（lhs、rhs）{
返回lhs.dataIdx-rhs.dataIdx；
});
}否则{
//关闭标记
legendEvent.dataItem.hidden=true；
//使用
//dataIdx属性。
对于（var i=0；i

---

非常感谢！！我还没有把你的解决方案放在我的实际代码中，但是codepen上的演示看起来很完美！工作完全符合我的预期。感谢代码和演示链接。这真的节省了我很多时间。唯一的一件事是，用户界面需要调整，以便在正常的列系列中使用

legend.itemContainers.template.togglable=true时可以看到动画。我在一个页面中有多个图表（它们的数字是动态的），并试图从动画角度获得更一致的感觉。@Mahesh
legend.itemContainers.template.togglable=true适用于AmCharts v4，这是v3的答案。如果您对v4有问题，请提出单独的问题，而不是对v4发布前几年编写的答案发表评论。@xorspark，很抱歉，我不知道上述代码中的AMSCHARTS版本。是的，我正在寻找版本4的解决方案。将为同一问题创建一个新问题