dart - 如何为 Flutter 应用绘制折线图？

Question

目前，我找到了两种可以用来画线的方法，可能可以改进成折线图:

1. 使用 canvas.drawCircle(..) 和 canvas.drawLine(..)

    canvas.drawCircle(new Offset(2.0, 5.0), 10.0, paint);
    canvas.drawCircle(new Offset(50.0, 100.0), 10.0, paint);
    canvas.drawLine(new Offset(2.0, 5.0), new Offset(50.0, 100.0), paint);
   

   

2. 使用 canvas.drawPoints(PointMode.lines, ..) 我更喜欢 #2，因为我可以将所有点传递给一个函数 canvas.drawPoints(..)。

    List offsetList = [new Offset(2.0, 5.0), new Offset(50.0, 100.0),];
    canvas.drawPoints(PointMode.lines, offsetList, paint);
   

   

绘制对象:

    final paint = new Paint()
  ..color = Colors.blue[400]
  ..strokeCap = StrokeCap.round
   ..style = PaintingStyle.fill;

问题:

目前，我认为#2 是绘制折线图的更好方法，但是如何使点像 #1 一样可见？你知道其他更好的方法可以用来绘制折线图吗？

Answer 1

我相信现在您不再担心这个问题了，所以对于任何想要另一种方式的人来说。您也可以使用 canvas.drawPath(...)，这里是使用它的折线图的简单实现。

@override
void paint(Canvas canvas, Size size) {
  canvas.translate(0.0, size.height);
  final Path path = new Path();
  final Paint paint = new Paint();
  paint.color = Colors.blue[100];  
  final double center = size.height/2;
  path.moveTo(0.0, 0.0); // first point in bottom left corner of container
  List<double> ypos = [10.0, 40.0, 100.0, 60.0, 40.0, 55.0, 200.0]; // random y points
  path.lineTo(0.0, - (ypos[0] + center)); // creates a point translated in y inline with leading edge
  final int dividerCnst = ypos.length; // number of points in graph
  for(int i = 1; i < dividerCnst + 1; i++){
    path.lineTo(size.width/dividerCnst * i - size.width/(dividerCnst * 2), - (ypos[i-1] + center));
  }
  path.lineTo(size.width, -(ypos[dividerCnst - 1] + center)); // the last point in line with trailing edge
  path.lineTo(size.width, 0.0); // last point in bottom right corner of container
  path.close();
  canvas.drawPath(path, paint);
  canvas.restore();
}

(0,0) 位于左上角，因此要更改此设置，我将 canvas.translate(0.0, size.height) 将原点转换为左下角。在 Fluttr +ve 中，Y 值为负数，我已将其添加到变量中心，因此我的点不在底部，而是在更高处。这个结果返回 this。

希望这对某人有所帮助。和平。