Flutter图表绘制插件graph_package的使用

在Flutter中，使用graph_package插件可以轻松绘制图表。本文将详细介绍如何通过graph_package插件绘制图表，并提供完整的示例代码。

Graph（绘制图表）

通过给定的数据来绘制图表。

示例数据

您可以下载以下示例数据文件来测试图表绘制功能：

示例图表

以下是使用上述数据生成的图表示例：

示例代码

以下是一个完整的示例代码，展示如何使用graph_package插件绘制图表。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mobile/graph.dart'; // 导入自定义的图形绘制类

void main() => runApp(const MaterialApp(
      home: Mygraph(),
      debugShowCheckedModeBanner: false,
    ));

class Mygraph extends StatefulWidget {
  const Mygraph({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Mygraph> createState() => _MygraphState();
}

class _MygraphState extends State<Mygraph> {
  Map<String, dynamic>? myData; // 存储从JSON文件加载的数据

  [@override](/user/override)
  void initState() {
    readjs(); // 初始化时加载数据
    super.initState();
  }

  Future<void> readjs() async {
    // 从assets目录加载JSON文件
    final String response = await rootBundle.loadString('assets/chart_data.json');
    final data = await json.decode(response); // 解码JSON数据
    setState(() {
      myData = data; // 将数据存储到状态中
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var scrsize = MediaQuery.of(context).size; // 获取屏幕尺寸

    // 如果数据加载完成，则绘制图表；否则显示加载动画
    if (myData != null) {
      return Scaffold(
        body: CustomPaint(
          painter: Graphcls(myData!), // 使用自定义的Graphcls类绘制图表
          child: SizedBox(width: scrsize.width, height: scrsize.height), // 设置画布大小
        ),
      );
    } else {
      return const Scaffold(
        body: Center(
          child: SizedBox(
            height: 50,
            width: 50,
            child: CircularProgressIndicator(), // 显示加载进度条
          ),
        ),
      );
    }
  }
}

自定义绘图类 Graphcls

为了绘制图表，我们还需要一个自定义的绘图类 Graphcls，该类继承自 CustomPainter 并实现其核心逻辑。以下是 Graphcls 的实现：

import 'dart:math';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class Graphcls extends CustomPainter {
  final Map<String, dynamic> data; // 接收数据

  Graphcls(this.data);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    Paint linePaint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4
      ..style = PaintingStyle.stroke;

    Paint circlePaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    double maxValue = data['values'].reduce(max); // 计算最大值
    double minValue = data['values'].reduce(min); // 计算最小值

    Offset startPoint = Offset(0, size.height - ((data['values'][0] - minValue) / (maxValue - minValue)) * size.height);

    for (int i = 1; i < data['values'].length; i++) {
      Offset endPoint = Offset((i * size.width / data['values'].length),
          size.height - ((data['values'][i] - minValue) / (maxValue - minValue)) * size.height);

      canvas.drawLine(startPoint, endPoint, linePaint); // 绘制线条
      canvas.drawCircle(endPoint, 5, circlePaint); // 绘制圆点

      startPoint = endPoint; // 更新起点
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}