Question

我正在尝试使用amCharts版本4库创建气泡图。这里的每个气泡代表一个具有不同颜色的不同国家。现在，我需要为图表中存在的每个气泡生成图例。我无法达到同样的目的。谁能帮我。

我正在使用下面提到的教程来创建气泡图。

https://www.amcharts.com/demos/zoomable-bubble-chart

Answer 1

根据official docs，您可以将自定义数据用于图例。

chart.legend = new am4charts.Legend();
chart.legend.data = [{
  "name": "2016",
  "fill":"#72A6B2"
}, {
  "name": "2017",
  "fill": "#667E93"
}, {
  "name": "2018",
  "fill": "#488BB2"
}];

要使其适应您的数据并为所有国家/地区创建图例，您可以使用以下代码段：

chart.legend = new am4charts.Legend();
chart.legend.data = chart.data.map(i => ({
  "name": i.title, 
  "fill": i.color
}));

要更新图例切换上的数据，您可以在数据值上添加一个隐藏属性，并告诉amcharts使用它来隐藏一些项目符号。

series.dataFields.hidden = "hidden";

如果要在init上隐藏某些国家/地区，请将数据ID添加到图例数据和hidden属性中。

chart.legend.data = chart.data.map(i => ({
  id: i.id, 
  name: i.title, 
  fill: i.color,
  visible: !i.hidden
}));

在图例中添加点击事件以更新图表。使用"up"事件，因为event.target.isActive是在调用"hit"事件之后更新的。

chart.legend.itemContainers.template.events.on("up", (event) => {
  const id = event.target.dataItem.dataContext.id;
  chart.data.find(i => i.id === id).hidden = !event.target.isActive;
  chart.validateData();
});

我创建了this code pen作为参考。

为amcharts v4中的每个气泡生成图例

1 个答案: