Fl_chart组件排障：YYYYMM格式下折线图数据显示异常

Fl_chart的X轴默认会对传入的数值做线性插值，你用的202209、202210、202301是整数形式的年月，其中202210和202301之间数值差了91，图表会自动生成中间的刻度值（比如202220、202230...），导致折线被错误拉伸。

不要直接用YYYYMM的整数作为X轴坐标，改用连续的索引值（如0、1、2），然后通过getBottomTitles将索引映射回对应的年月文本。

修改后的代码示例：

// 定义原始数据：索引对应[年月, 销售额]
final List<List<dynamic>> salesData = [
  [202209, 2500],
  [202210, 2800],
  [202301, 1800],
];

LineChart(LineChartData(
  gridData: FlGridData(show: false),
  titlesData: FlTitlesData(
    topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    bottomTitles: AxisTitles(
      sideTitles: SideTitles(
        getTitlesWidget: (value, meta) {
          // 将索引值映射为对应的年月文本
          int index = value.toInt();
          if (index >= 0 && index < salesData.length) {
            return Text(salesData[index][0].toString());
          }
          return Text('');
        },
        showTitles: true,
        reservedSize: 40,
        interval: 1, // 强制每个索引显示一个刻度
      ),
      axisNameWidget: Text("Month"),
      axisNameSize: 30,
    ),
  ),
  lineBarsData: [
    LineChartBarData(
      isStrokeCapRound: true,
      dotData: FlDotData(show: false),
      belowBarData: BarAreaData(show: false),
      spots: salesData.asMap().entries.map((entry) {
        // 用索引作为X轴坐标，销售额作为Y轴
        return FlSpot(entry.key.toDouble(), entry.value[1].toDouble());
      }).toList(),
    ),
  ],
));

• 用连续索引（0、1、2）替代原始的YYYYMM整数作为FlSpot的X值，确保X轴刻度连续无间隔
• 在getBottomTitles中，将索引值映射回对应的年月文本，保证显示正确的标签
• 设置interval: 1，强制X轴只显示数据点对应的刻度，避免生成多余的中间值

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