Flutter图表绘制插件chart_it的使用

chart_it 是一个完全用 Dart 编写的、高度可定制且无缝动画的图表集合。它支持多种类型的图表，包括柱状图、多柱状图、饼图和环形图等。

安装

在你的项目中的 pubspec.yaml 文件中添加 chart_it 包：

dependencies:
  chart_it: ^0.2.1

或者，你也可以在 Flutter 项目中运行以下命令：

$ flutter pub add chart_it

文档

完整的文档可以在这里查看：完整文档

支持的图表

chart_it 中的所有图表分为两类：

1. 笛卡尔图表

   • 柱状图
   • 多柱状图

2. 径向图表

   • 饼图
   • 环形图

根据你需要绘制的图表类型选择相应的图表组件，并提供必要的数据。

快速示例

1. 柱状图

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bar Chart Example')),
        body: Center(
          child: BarChart(
            maxYValue: 50,
            data: BarSeries(
              barData: <BarGroup>[
                SimpleBar(
                  xValue: 10,
                  label: (value) => 'Group 1',
                  yValue: const BarData(yValue: 25),
                ),
                SimpleBar(
                  xValue: 6,
                  label: (value) => 'Group 1',
                  yValue: const BarData(yValue: 12),
                ),
                SimpleBar(
                  xValue: 19,
                  label: (value) => 'Group 1',
                  yValue: const BarData(yValue: 38),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多高级用法，请参考文档：柱状图指南

2. 环形图

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Donut Chart Example')),
        body: Center(
          child: PieChart(
            data: PieSeries(
              donutRadius: 50.0,
              donutSpaceColor: Colors.white,
              donutLabel: () => 'Market Shares',
              slices: <SliceData>[
                SliceData(
                  style: const SliceDataStyle(radius: 105.0, color: Colors.red),
                  label: (percent, value) => 'Tesla',
                  value: 34,
                ),
                SliceData(
                  style: const SliceDataStyle(radius: 90.0, color: Colors.blueGrey),
                  label: (percent, value) => 'Space X',
                  value: 18,
                ),
                SliceData(
                  style: const SliceDataStyle(radius: 90.0, color: Colors.green),
                  label: (percent, value) => 'Google',
                  value: 42,
                ),
                SliceData(
                  style: const SliceDataStyle(radius: 90.0, color: Colors.cyanAccent),
                  label: (percent, value) => 'Microsoft',
                  value: 57,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多高级用法，请参考文档：饼图和环形图指南

动画

默认情况下，图表组件会在首次加载时以及每次更新数据时进行动画效果。你可以通过设置 animateOnLoad 和 animateOnUpdate 属性来覆盖这种行为。

child: BarChart(
  animateOnLoad: false,
  animateOnUpdate: true,
  animationDuration: const Duration(milliseconds: 750),
  data: BarSeries(
    // ...
  ),
)

如果你希望控制自己的动画，可以通过提供自定义的 AnimationController 来实现：

child: BarChart(
  animation: AnimationController(
    duration: Duration(milliseconds: 500),
    vsync: this,
  ),
  data: BarSeries(
    // ...
  ),
)