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

Question

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

// 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) 中，我创建了一个自定义图例和一个在图例标记为 'hit' 时触发的函数。我在这个函数中尝试了很多不同的东西，但还没有走多远。我只是不知道如何访问图表的不同切片元素（用 '????' 表示）以在图例标记 'hit'.

上进行操作

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

Answer 1

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

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

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 我 fork 并更新了你的码笔。希望对您有所帮助。

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

How to make a shared legend across multiple pie charts in a map using amcharts 4?

javascript

amcharts