Flutter 交互式图表图形

Question

I am searching for a package in flutter where I can create a chart with an interactable graph, where I can manipulate data with drag and drop

Example: An example chart

Now I want to ajust each value in that step diagram with drag and drop (up and down)

I found high charts and some of my collegues used that to do so but not in flutter so im not sure if that is possible there.

Answer 1

Firstly, It's totally possible to create interactive charts with Flutter. You can either implement it yourself with a CustomPainter and some widgets.

Here's an example of a Curved basic chart.

CustomPaint(
   painter: CurveBackground(color: \\ yourColor),
   child: \\ your child
)


class CurveBackground extends CustomPainter {
  final Color color;

  CurveBackground({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = color;
    paint.style = PaintingStyle.fill;

    var path = Path();

    path.moveTo(0, Dimens.size_30());
    path.quadraticBezierTo(size.width * 0.4, size.height * 0.1,
        size.width * 0.3, size.height * 0.3);
    path.quadraticBezierTo(size.width * 0.1, size.height * 0.6,
        size.width * 0.45, size.height * 0.7);
    path.quadraticBezierTo(
        size.width * 1, size.height * 0.9, size.width * 0.9, size.height * 1.0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

You can also check out some specialized packages as: syncfusion_flutter_charts I think you'll be interested in the step_line chart .

Answer 2

您是否尝试过 charts_flutter或https://pub.dev/packages/syncfusion_flutter_charts ？