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

Posted 2023-05-07

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

【英文标题】：Cannot change label from percentage to number in amchart5

【发布时间】：2022-01-13 15:25:07

【问题描述】：

我正在使用新的 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);    

问候

【参考方案1】：

v5 在 API 方面与 v4 完全不同。为了配置饼图的图例，您必须将其设置在系列中，如记录的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>