如何在Flutter SfCartesianChart的数值旁显示百分号(%)？

要给Y轴刻度和数据标签的数值加上百分号，你可以通过以下两个关键配置实现：

1. 为Y轴刻度添加百分号 #

在primaryYAxis的NumericAxis中使用labelFormatter属性，自定义刻度文本的显示格式：

primaryYAxis: NumericAxis(
  minimum: 0,
  maximum: 100,
  interval: 10,
  majorGridLines: const MajorGridLines(width: 0),
  axisLine: const AxisLine(width: 0),
  // 自定义刻度显示，追加百分号
  labelFormatter: (AxisLabelRenderDetails details) {
    return AxisLabel('${details.text}%', details.textStyle);
  },
),

2. 为数据标签添加百分号 #

在LineSeries中配置dataLabelMapper，自定义每个数据点的标签文本，替代默认的数值显示：

LineSeries<SalesData, int>(
  dataSource: overallSalesData
      .map((sale) => SalesData(
            sale['attempNo'] as int,
            sale['score'] as double,
          ))
      .toList(),
  xValueMapper: (SalesData sales, _) => sales.attempNo,
  yValueMapper: (SalesData sales, _) => sales.sales.toDouble(),
  // 自定义数据标签内容，追加百分号
  dataLabelMapper: (SalesData sales, _) => '${sales.sales}%',
  dataLabelSettings: const DataLabelSettings(
    isVisible: true,
  ),
  // 其他原有配置...
),

修改后的完整图表代码 #

Stack(
  children: [
    SfCartesianChart(
      primaryXAxis: NumericAxis(
        isVisible: false,
        interval: 1,
        majorGridLines: const MajorGridLines(width: 0),
      ),
      primaryYAxis: NumericAxis(
        minimum: 0,
        maximum: 100,
        interval: 10,
        majorGridLines: const MajorGridLines(width: 0),
        axisLine: const AxisLine(width: 0),
        labelFormatter: (AxisLabelRenderDetails details) {
          return AxisLabel('${details.text}%', details.textStyle);
        },
      ),
      series: <LineSeries<SalesData, int>>[
        LineSeries<SalesData, int>(
          dataSource: overallSalesData
              .map((sale) => SalesData(
                    sale['attempNo'] as int,
                    sale['score'] as double,
                  ))
              .toList(),
          xValueMapper: (SalesData sales, _) => sales.attempNo,
          yValueMapper: (SalesData sales, _) => sales.sales.toDouble(),
          dataLabelMapper: (SalesData sales, _) => '${sales.sales}%',
          dataLabelSettings: const DataLabelSettings(
            isVisible: true,
          ),
          markerSettings: const MarkerSettings(
            isVisible: true,
          ),
          pointColorMapper: (SalesData sales, _) {
            if (sales.sales >= 80) {
              return const Color(0xFF0073C8);
            } else if (sales.sales >= 60) {
              return const Color(0xFF0089EF);
            } else if (sales.sales >= 40) {
              return const Color(0xFF00B4C8);
            } else if (sales.sales >= 20) {
              return const Color(0xFFFFCB54);
            } else {
              return const Color(0xFFFFB200);
            }
          },
        ),
      ],
    ),
    Positioned(
      bottom: -40,
      left: 100,
      child: CustomPaint(
        painter: ArrowPainter(context),
        size: const Size(200.0, 100.0),
      ),
    ),
  ],
);

这样修改后，Y轴的所有刻度值和每个数据点的标签都会自动带上百分号，同时不影响图表的数值计算逻辑（因为yValueMapper依然返回原始的double类型数值）。

内容的提问来源于stack exchange，提问作者Rashid Ali