Flutter圆形图表展示插件awesome_circular_chart的使用

Overview

awesome_circular_chart 是一个用于创建动画圆形图表的 Flutter 插件，灵感来源于 Zero to One with Flutter。通过提供数据对象，可以轻松创建动画饼图和径向图。

Contents

• Installation
• Getting Started
• Customization
  • Hole Label
  • Segment Edge Style
• Details
  • Chart Data Entries

Installation

在 pubspec.yaml 文件中添加 awesome_circular_chart 依赖：

dependencies:
  awesome_circular_chart: ^最新版本号

然后运行 flutter pub get 来安装插件。

Getting Started

导入包

首先，导入 awesome_circular_chart 包：

import 'package:awesome_circular_chart/awesome_circular_chart.dart';

创建 GlobalKey

为了能够访问和更新图表的数据，需要创建一个 GlobalKey：

final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();

创建图表数据

创建图表数据条目对象：

List<CircularStackEntry> data = [
  CircularStackEntry(
    [
      CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
      CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
      CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
      CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
    ],
    rankKey: 'Quarterly Profits',
  ),
];

创建 AnimatedCircularChart

在 build 方法中创建 AnimatedCircularChart，并传递 _chartKey 和初始数据：

@override
Widget build(BuildContext context) {
  return AnimatedCircularChart(
    key: _chartKey,
    size: const Size(300.0, 300.0),
    initialChartData: data,
    chartType: CircularChartType.Pie,
  );
}

更新数据

调用 updateData 方法来动画更新图表：

void _cycleSamples() {
  List<CircularStackEntry> nextData = [
    CircularStackEntry(
      [
        CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
        CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
        CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
        CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
      ],
      rankKey: 'Quarterly Profits',
    ),
  ];
  setState(() {
    _chartKey.currentState?.updateData(nextData);
  });
}

Customization

Hole Label

可以通过设置 holeLabel 和 labelStyle 来自定义图表中间的标签：

AnimatedCircularChart(
  key: _chartKey,
  size: const Size(300.0, 300.0),
  initialChartData: [
    CircularStackEntry(
      [
        CircularSegmentEntry(33.33, Colors.blue[400], rankKey: 'completed'),
        CircularSegmentEntry(66.67, Colors.blueGrey[600], rankKey: 'remaining'),
      ],
      rankKey: 'progress',
    ),
  ],
  chartType: CircularChartType.Radial,
  percentageValues: true,
  holeLabel: '1/3',
  labelStyle: TextStyle(
    color: Colors.blueGrey[600],
    fontWeight: FontWeight.bold,
    fontSize: 24.0,
  ),
)

Segment Edge Style

可以通过设置 edgeStyle 来自定义段落边缘样式：

AnimatedCircularChart(
  key: _chartKey,
  size: const Size(300.0, 300.0),
  initialChartData: [
    CircularStackEntry(
      [
        CircularSegmentEntry(33.33, Colors.blue[400], rankKey: 'completed'),
        CircularSegmentEntry(66.67, Colors.blueGrey[600], rankKey: 'remaining'),
      ],
      rankKey: 'progress',
    ),
  ],
  chartType: CircularChartType.Radial,
  edgeStyle: SegmentEdgeStyle.round,
  percentageValues: true,
)

Details

Chart Data Entries

图表期望一个包含 CircularStackEntry 对象的列表。每个 CircularStackEntry 对应图表中的一个完整圆。对于径向图，它是其中一个环；对于饼图，它是整个饼。

径向图中有多个 CircularStackEntry 会显示为同心圆。

每个 CircularStackEntry 由多个 CircularSegmentEntry 组成，包含数据点的值。在径向图中，一个段落对应当前环的一个弧段；在饼图中，它是一个单独的扇区。