Flutter开发折线图时如何设置不同颜色的水平参考线？

你使用的是fl_chart库的折线图组件，以下是两种可直接落地的实现方案：

效果参考 #

方案1：复用现有网格逻辑（轻量需求） #

直接修改网格的水平线条绘制回调，根据y轴值匹配对应颜色的线条，改造成本极低：

gridData: FlGridData(
  show: true,
  getDrawingHorizontalLine: (value) {
    // 匹配参考线位置返回对应样式
    if (value == 2) {
      return FlLine(color: Colors.orange, strokeWidth: 2);
    } else if (value == 5) {
      return FlLine(color: Colors.red, strokeWidth: 2);
    }
    // 普通网格线保持原有样式
    return FlLine(color: Colors.grey, strokeWidth: 1);
  },
  drawVerticalLine: true,
  getDrawingVerticalLine: (value) => FlLine(color: Colors.grey, strokeWidth: 1),
),

适用场景：参考线刚好和网格刻度对齐，不需要额外标签、虚线等特殊样式。

方案2：独立配置辅助线（推荐） #

使用库内置的extraLinesData参数专门绘制参考线，和网格逻辑完全解耦，支持更多自定义能力：

LineChartData(
  minX: 0,
  maxX: 11,
  minY: 0,
  maxY: 6,
  titlesData: LineTitles.getTitleData(),
  gridData: FlGridData(
    show: true,
    getDrawingHorizontalLine: (value) => FlLine(color: Colors.grey, strokeWidth: 1),
    drawVerticalLine: true,
    getDrawingVerticalLine: (value) => FlLine(color: Colors.grey, strokeWidth: 1),
  ),
  // 新增独立参考线配置
  extraLinesData: ExtraLinesData(
    horizontalLines: [
      HorizontalLine(
        y: 2,
        color: Colors.orange,
        strokeWidth: 2,
        // 可选配置：虚线样式
        dashArray: [4, 4],
        // 可选配置：线旁标签
        label: HorizontalLineLabel(
          show: true,
          labelResolver: (line) => '预警阈值：${line.y}',
          alignment: Alignment.topLeft,
        ),
      ),
      HorizontalLine(
        y: 5,
        color: Colors.red,
        strokeWidth: 2,
        label: HorizontalLineLabel(
          show: true,
          labelResolver: (line) => '超标阈值：${line.y}',
          alignment: Alignment.topLeft,
        ),
      ),
    ],
  ),
  borderData: FlBorderData(show: true, border: Border.all(color: Colors.grey, width: 1)),
  lineBarsData: [
    LineChartBarData(
      spots: [
        FlSpot(4.9, 5),
        FlSpot(6.8, 2.5),
        FlSpot(8, 4),
        FlSpot(9.5, 3),
        FlSpot(11, 4),
      ],
      isCurved: true,
      barWidth: 3,
    ),
  ],
)

这个方案支持任意位置的参考线（包括非刻度值位置），还可根据需求配置虚线、标签、边距等扩展样式，更适合业务场景使用。

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