如何在fl_chart中添加次坐标轴？空安全迁移相关咨询

fl_chart次坐标轴实现方案 #

fl_chart原生支持次坐标轴配置，折线图、柱状图等常用图表都可实现左右双Y轴效果，和你之前使用charts_flutter的实现逻辑基本一致，完全可以还原你给出的示例图效果。

核心配置逻辑

fl_chart的图表配置类中直接预留了左右Y轴的配置项，leftAxis对应左侧主坐标轴，rightAxis对应右侧次坐标轴，可分别独立配置刻度规则、标签样式、显示范围等属性，适配两个不同量级的数据集。

示例代码

以常用的折线图为例，双Y轴的基础配置如下：

LineChart(
  LineChartData(
    // 左侧主Y轴配置，可对应第一类数据（如销售额）
    leftAxis: AxisTitles(
      sideTitles: SideTitles(
        showTitles: true,
        reservedSize: 40, // 预留标签显示宽度
        interval: 200, // 刻度间隔
        getTitlesWidget: (value, meta) {
          return Text(
            value.toInt().toString(),
            style: const TextStyle(fontSize: 12),
          );
        },
      ),
    ),
    // 右侧次Y轴配置，可对应第二类数据（如增长率）
    rightAxis: AxisTitles(
      sideTitles: SideTitles(
        showTitles: true,
        reservedSize: 40,
        interval: 10,
        getTitlesWidget: (value, meta) {
          return Text(
            '${value.toStringAsFixed(1)}%',
            style: const TextStyle(fontSize: 12, color: Colors.red),
          );
        },
      ),
    ),
    // X轴配置按原有逻辑编写即可
    bottomAxis: AxisTitles(
      sideTitles: SideTitles(showTitles: true),
    ),
    // 数据集配置
    lineBarsData: [
      // 对应左侧主Y轴的折线数据
      LineChartBarData(
        spots: [FlSpot(0, 200), FlSpot(1, 400), FlSpot(2, 300), FlSpot(3, 600)],
        color: Colors.blue,
      ),
      // 对应右侧次Y轴的折线数据，若两类数据量级差异大，可先做数值映射
      LineChartBarData(
        spots: [FlSpot(0, 10), FlSpot(1, 30), FlSpot(2, 20), FlSpot(3, 50)],
        color: Colors.red,
      ),
    ],
    // 若需要添加示例图中的标注，可配置extraLinesData属性添加标注线、标注文本
  )
)

注意事项

如果两类数据集的数值量级差异较大，可对次坐标轴对应的数据做数值转换：将次轴的实际数值按比例映射到和主轴数值相同的展示区间，在渲染次轴标签时再转换回原始数值即可，该逻辑和charts_flutter的次轴映射逻辑一致。

内容的提问来源于stack exchange，提问作者David L