如何在amCharts柱状图的Label Bullet中显示完整数值而非省略号
解决amCharts柱状图数值显示不全的问题
amCharts默认会对较大数值采用缩写格式(如千位用k、百万用M),导致柱子上的标签只显示2-3位。可以通过以下两种方式强制显示完整数值:
方法一:直接在标签文本中使用格式化语法
修改标签的text属性,通过formatNumber方法指定完整数字格式:
var labelBullet = series.bullets.push(new am4charts.LabelBullet()); labelBullet.label.text = "{visits.formatNumber('#')}"; // 关键修改 labelBullet.label.rotation = 270; labelBullet.label.horizontalCenter = "right"; labelBullet.label.verticalCenter = "middle"; labelBullet.label.fontSize = 10; labelBullet.label.hideOversized = false; labelBullet.label.fill = am4core.color("#fff");
'#'格式会输出完整整数,无缩写。如果需要保留小数,可改为'#.##'(保留两位小数)等格式。
方法二:自定义数字格式化器
如果需要更灵活的格式控制,可创建NumberFormatter实例并绑定到标签:
// 创建格式化器,设置为完整数字格式 var numberFormatter = new am4core.NumberFormatter(); numberFormatter.numberFormat = "#"; var labelBullet = series.bullets.push(new am4charts.LabelBullet()); labelBullet.label.text = "{visits}"; // 通过适配器格式化文本 labelBullet.label.adapter.add("text", function(text) { return numberFormatter.format(parseInt(text)); }); // 原有配置不变 labelBullet.label.rotation = 270; labelBullet.label.horizontalCenter = "right"; labelBullet.label.verticalCenter = "middle"; labelBullet.label.fontSize = 10; labelBullet.label.hideOversized = false; labelBullet.label.fill = am4core.color("#fff");
内容的提问来源于stack exchange,提问作者Farhad Hossain
相关产品推荐
相关产品推荐

