Javascript 如何使用amcharts 4在地图中的多个饼图中创建共享图例？

我有一张地图，它基于amCharts网站上的示例。我想在这些饼图中添加一个可单击的共享图例。因此，每当有人单击图例元素时，它都会更新所有饼图，以仅显示“活动”切片值。我已尝试通过以下方式创建自定义图例：

// Setting up legend
var legend = new am4maps.Legend();
legend.parent = chart.chartContainer;
legend.background.fill = am4core.color("#000");
legend.background.fillOpacity = 0.05;
legend.y = am4core.percent(100);
legend.verticalCenter = "bottom";
legend.padding(10,15,10,15)
legend.data = [{
    "name": "Category #1",
    "fill": chart.colors.getIndex(0)
}, {
    "name": "Category #2",
    "fill": chart.colors.getIndex(1)
}, {
    "name": "Category #3",
    "fill": chart.colors.getIndex(2)
}, {
    "name": "Category #4",
    "fill": chart.colors.getIndex(2)
}];

// Does something when legend marker is clicked
legend.itemContainers.template.events.on("hit", function(ev) {
    var index = ev.target.dataItem.index;
    if (ev.target.isActive) { 
        //????.hide();
    }
    else {
        //????.show();
    }
})

在这个示例（）中，我创建了一个自定义图例和一个函数，该函数在图例标记被“命中”时触发。我在这个函数中尝试了很多不同的方法，但都没有取得很大的进展。我只是不知道如何访问图表的不同切片元素（用“？？”表示），以便在图例标记“hit”上进行操作

---

我看到的另一个可能的途径是以某种方式将其直接插入图表中。但这似乎只适用于单饼图。（如图所示）此示例也正好显示了我想要的行为类型。问题是我想要一个图例，而不是每个饼都有一个。

我使用了您的第一种方法，使用自定义图例

可以使用图表上的“隐藏”属性隐藏特定类别

pieSeriesTemplate.dataFields.hidden = "hidden";

现在，您可以添加一个事件来在所有饼图数据上切换此属性。使用

“up”

事件，因为调用

“hit”

事件后会更新

event.target.isActive

legend.itemContainers.template.events.on("up", (ev) => {
  var category = ev.target.dataItem.dataContext.name;
  pieSeries.data.forEach(item => item.pieData.find(i => i.category === category).hidden = !ev.target.isActive);
  pieSeries.validateData();
});

---

我用叉子把你的密码笔更新了。希望能有所帮助。

非常感谢！它在放大时也能很好地工作，但我将尝试找到一个更有效的解决方案来找到正确的数据点。我还注意到，调用pieSeries.validateData（）时，映射似乎有点跳跃。