在 amcharts 中使用自定义百分比修改漏斗标签值

Question

我想做两件事：

1) 修改此漏斗图中右侧以黄色突出显示的标签值。

2) 更改百分比的计算方式：通常，我的数据中每个类别都有一个 "percentage" 字段，我希望它在标签中显示为突出显示的百分比。例如，类别 "second" 的 data.percentage 是 10%。因此需要显示10%，如图所示。

代码：

var chart = am4core.create("chartdiv", am4charts.SlicedChart);
chart.hiddenState.properties.opacity = 0; 

chart.data = [{
    "name": "The first",
    "value": 600,
    "percentage": "100%"
}, {
    "name": "The second",
    "value": 300,
    "percentage": "10%"
}, {
    "name": "The third",
    "value": 200,
    "percentage": "10%"
}, {
    "name": "The fourth",
    "value": 180,
    "percentage": "35%"
}, {
    "name": "The fifth",
    "value": 50,
    "percentage": "20%"
}];

var series = chart.series.push(new am4charts.FunnelSeries());
series.colors.step = 2;
series.dataFields.value = "value";
series.dataFields.category = "name";
series.alignLabels = true;

series.labelsContainer.paddingLeft = 15;
series.labelsContainer.width = 200;

我发现该系列对象有一个名为 labels 的成员，其中包含标签值，但我不知道如何在代码本身中修改它们。我该怎么做？

Answer 1

要修改您使用的标签的内容 series.labels.template.text。

您可以使用大括号引用其中数据中的任何字段：

series.labels.template.text = "{category}: {percentage}";

{percentage} 将替换为该特定切片数据的 "percentage" 中保存的任何值。

This article 概述文本中的数据占位符。

在 amcharts 中使用自定义百分比修改漏斗标签值

Modifying funnel label values with custom percentages in amcharts

label

amcharts

amcharts4