能否让amCharts5简单饼图展示原始实际数值而非百分比?
amCharts5 饼图显示原始数值实现方法
完全可以实现该需求,只需调整饼图系列的标签取值配置即可,具体修改方式如下:
- 找到你代码中饼图系列的标签配置项,默认官方示例的配置是读取百分比字段展示,你只需将取值替换为原始数值字段即可
- 如果你使用的是官方简单饼图的基础代码,直接修改
labels.template.text配置即可:
// 原有默认百分比展示配置(替换掉即可) // series.labels.template.text = "{category}: {value.percent.formatNumber('#.0')}%"; // 修改为展示原始数值 series.labels.template.text = "{category}: {value.value}";
- 如果需要对原始数值做格式化(比如保留小数位、追加单位),可以使用内置格式化方法,示例如下:
// 保留2位小数的写法 series.labels.template.text = "{category}: {value.value.formatNumber('#.00')}"; // 追加单位的写法,比如单位是次 series.labels.template.text = "{category}: {value.value}次";
- 如果需要悬浮提示框也同步展示原始数值,同步修改tooltip配置即可:
series.slices.template.tooltipText = "{category}: {value.value}";
内容的提问来源于stack exchange,提问作者ChristianMV
相关产品推荐
相关产品推荐

