映射到饼图 - Amcharts

Question

我正在尝试通过 Amcharts 自定义此图表演示：

https://www.amcharts.com/demos/countries-morphing-to-pie-charts/

我不知道如何以及在哪里可以提供我的数据作为输入。我看到该示例使用饼图的随机数据，并使用以下代码行进行设置：

dataItem.value = Math.round(Math.random() * 100);

我需要为图表中每个国家/地区的饼图设置自定义值。

也许我必须编辑这些代码行：

var pieSeries = pieChart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "value";
pieSeries.dataFields.category = "category";
pieSeries.data = [{ value: 100, category: "First" }, { value: 20, category: "Second" }, { value: 10, category: "Third" }];

但是怎么办？我想将数据作为 JSON 的数组传递，但格式不是真正的问题。

你有什么想法吗？

谢谢。

Answer 1

您有关于 hit 事件所在国家/地区的信息： event.target.dataItem.dataContext.id。 id 字段代表国家代码。

因此您可以在 showPieChart(polygon) 函数中使用它来从国家代码中检索特定数据。您将从 polygon.dataItem.dataContext.id

获取该函数中的国家/地区代码

因此，例如，构建您的数据：

let myData = {'ES': [{value: 51, category: 'first'}, {value: 99, category: 'second'}, { value: 4, category: "Third" }], 'FR': [{value: 80, category: 'first'}, {value: 20, category: 'second'}, { value: 23, category: "Third"}];

然后，将 dataItem.value = Math.round(Math.random() * 100); 替换为：

dataItem.value = myData[polygon.dataItem.dataContext.id][i].value;

映射到饼图 - Amcharts

Map to Piecharts - Amcharts

javascript

charts

maps

amcharts