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

Question

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

// 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();
    }
})

在这个例子中 (codepen) 我创建了一个自定义图例和一个在图例标记被“命中”时触发的函数。我在这个函数中尝试了很多不同的东西，但还没有走远。我只是不知道如何访问图表的不同切片元素（用“????”表示）以对图例标记“命中”进行操作。

我见过的另一种可能的方法是以某种方式将其直接插入图表中。但这似乎只适用于单个饼图。 （显示here）这个例子也准确地展示了我想要的那种行为。问题是我想要一个传奇，而不是每个派都有一个。

Answer 1

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

您可以使用图表上的 hidden 属性来隐藏特定类别。

pieSeriesTemplate.dataFields.hidden = "hidden";

您现在可以添加一个事件来切换所有饼图数据的此属性。使用"up" 事件，因为event.target.isActive 在"hit" 事件被调用后更新。

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();
});

Here我分叉并更新了你的代码笔。希望对您有所帮助。