Flutter 圆形图表

一个用于使用 Flutter 创建动画圆形图表小部件的库，灵感来自 Zero to One with Flutter。

通过提供数据对象，您可以轻松创建动画饼图和径向图，并将它们绘制成图表并进行动画。

Flutter-Circular-Chart

animated_radial_chart_example_label

animated_pie_chart_example

查看示例文件夹以获取上述屏幕截图的源代码。

安装

从 pub 安装最新版本。

入门

导入包

import 'package:flutter_circular_chart/flutter_circular_chart.dart';

创建 GlobalKey 以便访问图表并更新其数据

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

创建图表数据条目对象

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

创建一个 AnimatedCircularChart，并传递 _chartKey 和初始 data

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

调用 updateData 来动画化图表

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

自定义

圆孔标签

属性 默认值
holeLabel 空
labelStyle Theme.of(context).textTheme.body2

示例

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

hole_label_example

段边缘样式

属性 默认值
edgeStyle SegmentEdgeStyle.flat
SegmentEdgeStyle 描述
flat (默认) 段以平坦的边缘开始和结束。
round 段以半圆形开始和结束。

示例

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

segment_edge_round_example

详情

图表数据条目

图表需要一个 CircularStackEntry 对象列表，其中包含绘制它们所需的数据。

每个 CircularStackEntry 对应图表中的一个完整圆。对于径向图，这是环之一；对于饼图，它是整个饼图。

具有多个 CircularStackEntry 的径向图会将它们显示为同心圆。

每个 CircularStackEntry 由多个 CircularSegmentEntry 对象组成，其中包含数据点的值。在径向图中，段对应于当前环的弧段；在饼图中，它是单个切片。

GitHub

https://github.com/xqwzts/flutter_circular_chart