如何使用 amchart 5 对饼图中间的值求和

Question

如何使用 am 图表在饼图中间显示值的总和。

am5.ready(function() {
    var totalUsers = {!! json_encode($totalUsers) !!};
    var root = am5.Root.new("total-users");
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    
    var chart = root.container.children.push(am5percent.PieChart.new(root, {
        layout: root.verticalLayout,
        innerRadius: am5.percent(50)
    }));

    var series = chart.series.push(am5percent.PieSeries.new(root, {
        valueField: "value",
        categoryField: "category",
        alignLabels: false
    }));

    series.labels.template.setAll({
        textType: "circular",
        centerX: 0,
        centerY: 0,
        
    });

    var label = chart.seriesContainer.children.push(am5.Label.new(root, {
    textAlign: "center",
    centerY: am5.p100,
    centerX: am5.p50,
    text:"[values.value.sum]"
  })
);
    
    series.data.setAll(totalUsers);

    var legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        marginTop: 15,
        marginBottom: 15,
    }));

    legend.data.setAll(series.dataItems);
    series.appear(1000, 100);

}); // end am5.ready()

我还想以十进制而不是百分比显示值。我试过文本："[values.value.sum]" 但它不起作用

Answer 1

如果您无法找到内置方式，您可以手动设置标签文本。鉴于我不知道你的 json 结构，让我们开始吧：

 const totalUsers = [{name:'Josh',value:10},{name:'Kyle',value:5}];      
 label.set('text', `${totalUsers.sum(user => user.value)}`);

如何使用 amchart 5 对饼图中间的值求和

how to sum of values in middle of pie chart using amchart 5

javascript

amcharts

amcharts5