Flutter SfCartesianChart如何将Y轴数值转为k单位字符串展示
解决方案
你可以通过SfCartesianChart中NumericAxis自带的labelFormatter回调实现需求,该回调仅修改Y轴展示的标签文本,不会影响图表内部的原始数值计算逻辑,不需要修改yValueMapper的传值类型。
实现步骤
- 先定义数值格式化工具函数,将原始数值转换为带k单位的格式:
String formatWithUnit(num value) { // 大于等于1000的数值转换为Xk格式 if (value >= 1000) { // toStringAsFixed(0)表示保留0位小数,需要保留小数可调整参数 return '${(value / 1000).toStringAsFixed(0)}k'; } // 小于1000的数值直接返回原格式 return value.toStringAsFixed(0); }
- 在你的
primaryYAxis配置中新增labelFormatter属性,调用上面的格式化函数处理标签:
修改后的对应代码段如下:
primaryYAxis: NumericAxis( minimum: 0, maximum: highSale, interval: highSale < 200 ? 100 : 2000, majorGridLines: MajorGridLines(width: 0), axisLine: AxisLine(width: 0), // 新增标签格式化逻辑 labelFormatter: (AxisLabelRenderDetails details) { return ChartTextLabel( formatWithUnit(details.value), details.textStyle, ); }, ),
补充说明
如果需要Tooltip悬浮提示的数值也同步显示为带k的格式,可给TooltipBehavior配置formatter回调,同样用上面的格式化函数处理数值即可,不影响图表的原始数值计算。
内容的提问来源于stack exchange,提问作者rameez khan
相关产品推荐
相关产品推荐

