Flutter图表绘制插件 fast_charts 的使用

fast_charts 是一个用于快速渲染不同可定制图表的Flutter插件。它能够高效地渲染各种图表，如分组柱状图、堆叠柱状图、径向堆叠柱状图和饼图等，并且支持动画效果。

特性

• 支持以下类型的图表：
  • 分组柱状图
  • 堆叠柱状图
  • 径向堆叠柱状图
  • 饼图

示例图片

分组柱状图	堆叠柱状图	径向堆叠柱状图	饼图

• 支持水平和垂直方向的柱状图。
• 支持反转柱状图的主要刻度。
• 支持数据序列变化时的动画效果。

动画示例

分组柱状图	堆叠柱状图	径向堆叠柱状图	饼图

• 提供多种自定义选项，包括颜色、形状和标签。

快速开始

首先，在项目中导入 fast_charts 包：

import 'package:fast_charts/fast_charts.dart';

准备数据并将其传递给图表小部件：

final data = Series(
  data: { 'alpha': 11, 'beta': 17, 'gamma': 41 },
  colorAccessor: (domain, value) => colors[domain],
  measureAccessor: (value) => value.toDouble(),
  labelAccessor: (domain, value, percent) => ChartLabel('${percent}%',
    style: TextStyle(fontSize: 10),
  ),
);
return PieChart(data: data);

准备数据

饼图需要单个系列的数据，而柱状图可以接受多个系列的数据。每个系列代表一组值，每个值对应特定的域（通常是X轴），并表示某种测量值（通常是Y轴）。

final data = {
  DateTime(2023, 1): (income: 47300, expense: 15000),
  DateTime(2023, 2): (income: 81000, expense: 14500),
  DateTime(2023, 3): (income: 32050, expense: 37400),
};
final expenses = Series(
  data: data,
  measureAccessor: (value) => value.expense.toDouble(),
  colorAccessor: (domain, value) => Colors.red,
);
final incomes = Series(
  data: data,
  measureAccessor: (value) => value.income.toDouble(),
  colorAccessor: (domain, value) => Colors.green,
);

自定义系列

你可以根据域或值选择每个值的颜色，或者两者结合。例如，在饼图中你可能需要为每个值选择不同的颜色，而在堆叠柱状图中你可能会为每个系列选择颜色。

final incomes = Series(
  data: data,
  measureAccessor: (value) => value.income.toDouble(),
  colorAccessor: (domain, value) => value.income < value.expense ? Colors.amber : Colors.green,
);

你还可以指定标签的样式。如果不指定标签样式，则图表上不会显示任何标签。通过提供 labelAccessor 函数，你可以选择标签的位置、样式和文本。

final data = {
  DateTime(2023, 1): (income: 47300, expense: 15000, color: Colors.redAccent),
  DateTime(2023, 2): (income: 81000, expense: 14500, color: Colors.greenAccent),
  DateTime(2023, 3): (income: 32050, expense: 37400, color: Colors.blueAccent),
};
final expenses = Series(
  data: data,
  measureAccessor: (value) => value.expense.toDouble(),
  colorAccessor: (domain, value) => value.color,
  labelAccessor: (domain, value, percent) => ChartLabel('$percent%',
    style: TextStyle(
      fontSize: 11,
      color: ThemeData.estimateBrightnessForColor(value.color) == Brightness.dark
        ? Colors.white
        : Colors.black,
    ),
    position: LabelPosition.inside,
    alignment: Alignment.center,
  ),
);

完整示例 Demo

以下是一个完整的示例代码，展示了如何在应用中使用 fast_charts 插件：

import 'package:flutter/material.dart';
import 'package:fast_charts/fast_charts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fast Charts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Fast Charts Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final data = Series(
      data: { 'alpha': 11, 'beta': 17, 'gamma': 41 },
      colorAccessor: (domain, value) => Colors.blue,
      measureAccessor: (value) => value.toDouble(),
      labelAccessor: (domain, value, percent) => ChartLabel('${percent}%',
        style: TextStyle(fontSize: 10),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: PieChart(data: data),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  // 更新数据或其他逻辑
                });
              },
              child: Text('Update Data'),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何创建一个简单的饼图，并提供了更新数据的功能。你可以根据需要扩展此示例以包含其他类型的图表和更复杂的数据处理逻辑。