amcharts - amCharts 带有值的自定义图例（正确的方法和对齐方式）

Question

我目前正在构建一个热图，其中包含 100 多个数据点（国家、价值）。

我创建了一个自定义图例，仅显示前 10 个国家及其价值。

但是对齐是关闭的（错误的一面以及名称和值之间的距离），有没有更好的方法来做到这一点？

chart.legend = new am4maps.Legend();
chart.legend.position = "right";
chart.legend.data = [];

for (let index = 0; index < 10; index++) {
    chart.legend.data.push({
        name: legend_data[index]['id'],
        fill: colorSet.next(),
        value: legend_data[index]['value']
    });
}

chart.legend.labels.template.text = "{name}: {value}%";
chart.legend.itemContainers.template.paddingTop = 2;
chart.legend.itemContainers.template.paddingBottom = 2;

标签： amcharts

Answer 1

非常简单的答案，我只需要设置 valueLabels 文本，而不是将两者连接到图例标签文本中。现在正确对齐。

chart.legend.labels.template.text = "{name}";
chart.legend.valueLabels.template.text = "{value}";