Flutter 實現平滑曲線折線圖

背景

公司最近引入了 Flutter 技術棧，Flutter 是谷歌的移動 UI 框架，能夠快速在 iOS 和 Android 上構建高質量的原生用戶界面。然而因爲 Flutter 還在早期發展階段沒有，生態建設還不夠完善。好比項目中須要用到圖表 UI 組件，通過一番調研，Google/charts 功能最強大，樣式最豐富（詳見 online gallery），因而引入到項目中。可是 charts 只實現了直線折線圖，因此只能 fork charts 項目本身實現平滑曲線效果。

基礎使用

• Goole/charts 這個圖表庫很強大，可是文檔不太友好，只有 online gallery 上有純示例代碼，幾乎沒有 Api 說明。

• 可行性分析的 Demo 效果

• 仔細研究優化後的效果

• 具體使用代碼及註釋

return Container(
  height: 150.0,
  child: charts.LineChart(
    _createChartData(), // 折線圖的點的數據列表
    animate: true, // 動畫
    defaultRenderer: charts.LineRendererConfig( // 折線圖繪製的配置
      includeArea: true,
      includePoints: true,
      includeLine: true,
      stacked: false,
    ),
    domainAxis: charts.NumericAxisSpec( // 主軸的配置
      tickFormatterSpec: DomainFormatterSpec(widget.dateRange), // tick 值的格式化，這裏把 num 轉換成 String
      renderSpec: charts.SmallTickRendererSpec( // 主軸繪製的配置
        tickLengthPx: 0, // 刻度標識突出的長度
        labelOffsetFromAxisPx: 12, // 刻度文字距離軸線的位移
        labelStyle: charts.TextStyleSpec( // 刻度文字的樣式
          color: ChartUtil.getChartColor(HColors.lightGrey),
          fontSize: HFontSizes.smaller.toInt(),
        ),
        axisLineStyle: charts.LineStyleSpec( // 軸線的樣式
          color: ChartUtil.getChartColor(ChartUtil.lightBlue),
        ),
      ),
      tickProviderSpec: charts.BasicNumericTickProviderSpec( // 軸線刻度配置
        dataIsInWholeNumbers: false,
        desiredTickCount: widget.data.length, // 指望顯示幾個刻度
      ),
    ),
    primaryMeasureAxis: charts.NumericAxisSpec( // 交叉軸的配置，參數參考主軸配置
      showAxisLine: false, // 顯示軸線
      tickFormatterSpec: MeasureFormatterSpec(),
      tickProviderSpec: charts.BasicNumericTickProviderSpec(
        dataIsInWholeNumbers: false,
        desiredTickCount: 4,
      ),
      renderSpec: charts.GridlineRendererSpec( // 交叉軸刻度水平線
        tickLengthPx: 0,
        labelOffsetFromAxisPx: 12,
        labelStyle: charts.TextStyleSpec(
          color: ChartUtil.getChartColor(HColors.lightGrey),
          fontSize: HFontSizes.smaller.toInt(),
        ),
        lineStyle: charts.LineStyleSpec(
          color: ChartUtil.getChartColor(ChartUtil.lightBlue),
        ),
        axisLineStyle: charts.LineStyleSpec(
          color: ChartUtil.getChartColor(ChartUtil.lightBlue),
        ),
      ),
    ),
    selectionModels: [ // 設置點擊選中事件
      charts.SelectionModelConfig(
        type: charts.SelectionModelType.info,
        listener: _onSelectionChanged,
      )
    ],
    behaviors: [
      charts.InitialSelection(selectedDataConfig: [ // 設置默認選中
        charts.SeriesDatumConfig<num>('LineChart', _index)
      ]),
    ],
  ),
);
複製代碼

平滑曲線效果實現

雖然基礎使用實現的折線圖效果已經很不錯了，但 UI 設計是平滑曲線效果，工程師也贊同曲線效果更優雅的觀點，因此決定挑戰自我，本身實現平滑曲線效果。 經過一層層源碼分析，最終發現繪製折線圖折線的實現位置，改寫該實現便可實現平滑曲線效果

line_chart.dart

defaultRenderer: charts.LineRendererConfig( // 折線圖繪製的配置
  includeArea: true,
  includePoints: true,
  includeLine: true,
  stacked: false,
),
複製代碼

line_renderer.dart

if (config.includeLine) {
   ...
        canvas.drawLine(
            clipBounds: _getClipBoundsForExtent(line.positionExtent),
            dashPattern: line.dashPattern,
            points: line.points,
            stroke: line.color,
            strokeWidthPx: line.strokeWidthPx,
            roundEndCaps: line.roundEndCaps);
      }
    });
  }
});
複製代碼

chart_canvas.dart

@override
void drawLine(
   ...
  _linePainter.draw(
      canvas: canvas,
      paint: _paint,
      points: points,
      clipBounds: clipBounds,
      fill: fill,
      stroke: stroke,
      roundEndCaps: roundEndCaps,
      strokeWidthPx: strokeWidthPx,
      dashPattern: dashPattern);
}
複製代碼

既然找到了具體繪製折線的入口，剩下的就是如何根據給出的數據集合，繪製出平滑的曲線，並且曲線的範圍不能超出數據集合的範圍。前先後後嘗試了三種繪製曲線的算法，前兩種都因爲超出數據集合範圍而棄用了，最後的曲線效果採用的第三種算法繪製的。

• 樣條插值

樣條插值是一種工業設計中經常使用的、獲得平滑曲線的一種插值方法，三次樣條又是其中用的較爲普遍的一種。算法參考 Java 三次樣條插值，代碼實現以下： interpolation.dart

class Interpolation {
  int n;
  List<num> xs;
  List<num> ys;

  bool spInitialized;
  List<num> spY2s;

  Interpolation(List<num> _xs, List<num> _ys) {
    this.n = _xs.length;
    this.xs = _xs;
    this.ys = _ys;
    this.spInitialized = false;
  }

  num spline(num x) {
    if (!this.spInitialized) {
      // Assume Natural Spline Interpolation
      num p, qn, sig, un;
      List<num> us;

      us = new List<num>(n - 1);
      spY2s = new List<num>(n);
      us[0] = spY2s[0] = 0.0;

      for (int i = 1; i <= n - 2; i++) {
        sig = (xs[i] - xs[i - 1]) / (xs[i + 1] - xs[i - 1]);
        p = sig * spY2s[i - 1] + 2.0;
        spY2s[i] = (sig - 1.0) / p;
        us[i] = (ys[i + 1] - ys[i]) / (xs[i + 1] - xs[i]) -
            (ys[i] - ys[i - 1]) / (xs[i] - xs[i - 1]);
        us[i] = (6.0 * us[i] / (xs[i + 1] - xs[i - 1]) - sig * us[i - 1]) / p;
      }
      qn = un = 0.0;

      spY2s[n - 1] = (un - qn * us[n - 2]) / (qn * spY2s[n - 2] + 1.0);
      for (int k = n - 2; k >= 0; k--) {
        spY2s[k] = spY2s[k] * spY2s[k + 1] + us[k];
      }

      this.spInitialized = true;
    }

    int klo, khi, k;
    num h, b, a;

    klo = 0;
    khi = n - 1;
    while (khi - klo > 1) {
      k = (khi + klo) >> 1;
      if (xs[k] > x)
        khi = k;
      else
        klo = k;
    }
    h = xs[khi] - xs[klo];
    if (h == 0.0) {
      throw new Exception('h==0.0');
    }
    a = (xs[khi] - x) / h;
    b = (x - xs[klo]) / h;
    return a * ys[klo] +
        b * ys[khi] +
        ((a * a * a - a) * spY2s[klo] + (b * b * b - b) * spY2s[khi]) *
            (h * h) /
            6.0;
  }
}
複製代碼

line_painter.dart

/// Draws smooth lines between each point.
void _drawSmoothLine(Canvas canvas, Paint paint, List<Point> points) {
  var interval = 0.1;
  var interpolationPoints = List<Point>();
  for (int k = 0; k < points.length; k++) {
    if ((k + 1) < points.length) {
      num temp = 0;
      while (temp < points[k + 1].x) {
        temp = temp + interval;
        interpolationPoints.add(Point(temp, 0.0));
      }
    }
  }
  var tempX = points.map((item) => item.x).toList();
  var tempY = points.map((item) => item.y).toList();
  var ip = Interpolation(tempX, tempY);
  for (int j = 0; j < interpolationPoints.length; j++) {
    interpolationPoints[j] =
        Point(interpolationPoints[j].x, ip.spline(interpolationPoints[j].x));
  }
  interpolationPoints.addAll(points);
  interpolationPoints.sort((a, b) {
    if (a.x == b.x)
      return 0;
    else if (a.x < b.x)
      return -1;
    else
      return 1;
  });
  final path = new Path();
  path.moveTo(interpolationPoints[0].x.toDouble(), interpolationPoints[0].y.toDouble());
  for (int i = 1; i < interpolationPoints.length; i++) {
    path.lineTo(interpolationPoints[i].x.toDouble(), interpolationPoints[i].y.toDouble());
  }
  canvas.drawPath(path, paint);
}
複製代碼

最終效果圖

看起來效果仍是挺完美的，可是其實有個致命問題，曲線的頂點可能會超出折線圖數據的範圍

• 貝塞爾曲線

三次貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點座標繪製出的一條光滑曲線，其難點是兩個控制點的計算，算法參考 貝塞爾曲線平滑擬合折線段，代碼實現以下： line_painter.dart

/// Draws smooth lines between each point.
void _drawSmoothLine(Canvas canvas, Paint paint, List<Point> points) {
  var targetPoints = List<Point>();
  targetPoints.add(points[0]);
  targetPoints.addAll(points);
  targetPoints.add(points[points.length - 1]);
  final path = new Path();
  for (int i = 1; i < targetPoints.length - 2; i++) {
    path.moveTo(
        targetPoints[i].x.toDouble(), targetPoints[i].y.toDouble());
    var controllerPoint1 = Point(
      targetPoints[i].x + (targetPoints[i + 1].x - targetPoints[i - 1].x) / 4,
      targetPoints[i].y + (targetPoints[i + 1].y - targetPoints[i - 1].y) / 4,
    );
    var controllerPoint2 = Point(
      targetPoints[i + 1].x - (targetPoints[i + 2].x - targetPoints[i].x) / 4,
      targetPoints[i + 1].y - (targetPoints[i + 2].y - targetPoints[i].y) / 4,
    );
    path.cubicTo(
        controllerPoint1.x, controllerPoint1.y, controllerPoint2.x,
        controllerPoint2.y, targetPoints[i + 1].x, targetPoints[i + 1].y);
  }
  canvas.drawPath(path, paint);
}
複製代碼

平滑曲線效果也是能夠實現的，可是依然存在頂點越界的問題

• 貝塞爾曲線（MonotoneX）

由於以前 RN 項目用到了 victory-native / victory-chart，經過源碼和文檔發現它的曲線效果實現是依賴了 d3-shap 的 d3.curveMonotoneX，算法參考 monotone.js，實現代碼以下：

注：因爲算法須要當前點和前兩個點才能畫出一段曲線，因此在折線點數據集合最後人爲添加了一個點，不然畫出來的曲線會缺乏最後一段

line_painter.dart

/// Draws smooth lines between each point.
void _drawSmoothLine(Canvas canvas, Paint paint, List<Point> points) {
  var targetPoints = List<Point>();
  targetPoints.addAll(points);
  targetPoints.add(Point(
      points[points.length - 1].x * 2, points[points.length - 1].y * 2));
  var x0,
      y0,
      x1,
      y1,
      t0,
      path = Path();
  for (int i = 0; i < targetPoints.length; i++) {
    var t1;
    var x = targetPoints[i].x;
    var y = targetPoints[i].y;
    if (x == x1 && y == y1) return;
    switch (i) {
      case 0:
        path.moveTo(x, y);
        break;
      case 1:
        break;
      case 2:
        t1 = MonotoneX.slope3(x0, y0, x1, y1, x, y);
        MonotoneX.point(
            path,
            x0,
            y0,
            x1,
            y1,
            MonotoneX.slope2(x0, y0, x1, y1, t1),
            t1);
        break;
      default:
        t1 = MonotoneX.slope3(x0, y0, x1, y1, x, y);
        MonotoneX.point(
            path,
            x0,
            y0,
            x1,
            y1,
            t0,
            t1);
    }
    x0 = x1;
    y0 = y1;
    x1 = x;
    y1 = y;
    t0 = t1;
  }
  canvas.drawPath(path, paint);
}
複製代碼

最終效果圖，頂點都是折線圖數據集合裏的點，完美！

• 源碼

詳見 GitHub dev 分支 github.com/123lxw123/c…

本文版權屬於再惠研發團隊，歡迎轉載，轉載請保留出處。@123lxw123