Flutter图表绘制插件charts_flutter_updated的使用

在Flutter应用中，数据可视化是一个常见的需求。charts_flutter_updated 是一个基于 Material Design 的数据可视化库，它完全用 Dart 编写。通过该库，您可以轻松地在 Flutter 应用中绘制各种图表。

支持的图表类型

charts_flutter_updated 支持多种图表类型，包括但不限于：

• 折线图（Line Chart）
• 柱状图（Bar Chart）
• 饼图（Pie Chart）
• 散点图（Scatter Chart）
• 组合图（Combo Chart）

更多图表类型可以查看其官方在线画廊：在线画廊。

使用步骤

以下是一个简单的示例，展示如何使用 charts_flutter_updated 插件来绘制折线图。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 charts_flutter_updated 依赖：

dependencies:
  charts_flutter_updated: ^0.9.0

然后运行以下命令以获取依赖：

flutter pub get

2. 创建数据模型

定义一个数据模型类，用于表示图表的数据点。例如，我们创建一个表示时间序列数据的类：

class Sales {
  final DateTime year;
  final int sales;

  Sales(this.year, this.sales);
}

3. 创建数据源

创建一个数据源列表，包含要绘制的数据点：

final List<Sales> lineData = [
  Sales(DateTime(2017, 01), 5),
  Sales(DateTime(2018, 01), 25),
  Sales(DateTime(2019, 01), 100),
  Sales(DateTime(2020, 01), 75),
];

4. 构建图表

使用 charts_flutter_updated 提供的 LineChart 小部件来构建折线图。以下是完整的代码示例：

import 'package:flutter/material.dart';
import 'package:charts_flutter_updated/charts_flutter_updated.dart' as charts;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Charts Flutter Updated 示例')),
        body: LineChartExample(),
      ),
    );
  }
}

class LineChartExample extends StatelessWidget {
  final List<charts.Series<Sales, DateTime>> seriesList = [
    charts.Series(
      id: 'Sales',
      data: lineData,
      domainFn: (Sales sales, _) => sales.year, // X轴数据
      measureFn: (Sales sales, _) => sales.sales, // Y轴数据
    )
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        child: charts.LineChart(
          seriesList,
          animate: true, // 是否启用动画效果
        ),
      ),
    );
  }
}

5. 运行效果

运行上述代码后，您将看到一个折线图，显示了从 2017 年到 2020 年的销售数据。示意图如下：

6. 自定义图表

charts_flutter_updated 提供了丰富的自定义选项，例如设置颜色、样式等。以下是一个带有不同颜色和点标记的折线图示例：

class CustomLineChartExample extends StatelessWidget {
  final List<charts.Series<Sales, DateTime>> seriesList = [
    charts.Series(
      id: 'Sales',
      data: lineData,
      domainFn: (Sales sales, _) => sales.year,
      measureFn: (Sales sales, _) => sales.sales,
      colorFn: (Sales sales, _) =>
          charts.ColorUtil.fromDartColor(Colors.blue), // 设置折线颜色
      pointFactory: (Sales sales, _) => charts.CirclePoint(), // 设置点标记
    )
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        child: charts.LineChart(
          seriesList,
          animate: true,
        ),
      ),
    );
  }
}