无法在 amchart5 中将标签从百分比更改为数字

Question

我正在使用新的 amcharts5，尽管引用了我的旧代码和其他链接，但我似乎无法将我的饼图“切片”和标签更改为纯数字。

基本上我的代码和图表加载，但问题是我的值是用百分比而不是数字来描述的。这是我下面的代码，我试图解决这个问题。

如有任何帮助，我们将不胜感激。

                    // Set data 
                    series.data.setAll([
                        { value: Type[0], category: "Type 1" }, 
                        { value: Type[1], category: "Type 2" }, 
                        { value: Type[2], category: "Type 3" },
                    ]);


                    // Create legend 
                    var legend = chart.children.push(am5.Legend.new(root, {

                        centerX: am5.percent(50),
                        x: am5.percent(50),
                        marginTop: 15,
                        marginBottom: 15
                    }));


                    legend.labels.template.text = "{category}: {value.value}";
                    legend.slices.template.tooltipText = "{category}: {value.value}";
                    chart.legend.valueLabels.template.text = "{value.value}";

                    legend.data.setAll(series.dataItems);

此致

Answer 1

v5 与 v4 完全不同，API-wise。为了配置饼图的图例，您必须按照记录 here:

在系列中设置它

let series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    categoryField: "country",
    valueField: "sales",
    legendLabelText: "{category}",
    legendValueText: "{value}"
  })
);

需要使用 set 或 setAll 在切片上设置工具提示（有关详细信息，请参阅 settings documentation）：

series.slices.template.set('tooltipText', '{category}: {value}');

与切片标签类似，使用上述函数设置text 属性：

series.labels.template.set('text', '{category}: {value}');

演示：

var root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push( 
  am5percent.PieChart.new(root, {
    layout: root.verticalLayout
  }) 
);

var data = [{
  country: "France",
  sales: 100000
}, {
  country: "Spain",
  sales: 160000
}, {
  country: "United Kingdom",
  sales: 80000
}];

 
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    valueField: "sales",
    categoryField: "country",
    legendLabelText: "{category}",
    legendValueText: "{value}"
  })
);
series.slices.template.set('tooltipText', '{category}: {value}');
series.labels.template.set('text', '{category}: {value}');

series.data.setAll(data);

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);

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<script src="//cdn.amcharts.com/lib/5/percent.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>

无法在 amchart5 中将标签从百分比更改为数字

Cannot change label from percentage to number in amchart5

amcharts

amcharts5