syncfusion-flutter-circular-charts

Name: syncfusion-flutter-circular-charts
Author: syncfusion

github.com/syncfusion开发254 次安装17 周前更新

代码仓库

关于 syncfusion-flutter-circular-charts

面向 Flutter 开发者的参考技能，介绍如何使用 Syncfusion 的 `SfCircularChart` 构建饼图、圆环图和径向条形图，并配置外观、交互、无障碍功能与导出。

主要功能

01饼图、圆环图和径向条形图系列
02数据标签、图例和工具提示
03扇区选择与点击交互
04颜色、渐变和动画
05导出 PNG 和 PDF
06无障碍功能与 RTL 支持

适用场景

01展示整体中的部分比例
02用径向条形图比较类别
03为图表添加标签和注释
04导出图表用于报告

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/flutter-ui-components-skills --skill syncfusion-flutter-circular-charts

安装后在 Claude Code 中输入/syncfusion-flutter-circular-charts确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

accessibility-and-export.md

annotations-and-appearance.md

chart-types.md

data-labels.md

getting-started.md

legend-and-title.md

series-customization.md

tooltip-and-selection.md

详细介绍

实现 Syncfusion Flutter 圆形图表

SfCircularChart 是 Syncfusion 的高性能 Flutter 组件，用于绘制饼图、圆环图和径向条形图。它开箱即支持丰富的交互功能（工具提示、选择、分离扇区）、精美的自定义选项（渐变、动画、数据标签）和无障碍功能。

何时使用此技能

用户想要使用饼图展示部分与整体的比例
用户想要使用圆环图——环形图表，可选择在中心显示内容
用户想要使用径向条形图，通过圆弧比较不同类别
任何关于 SfCircularChart、PieSeries、DoughnutSeries 或 RadialBarSeries 的问题
自定义扇区颜色、分离扇区行为、合并较小的扇区
在扇区内部或外部添加带连接线的数据标签
配置图例、工具提示、选择、注释
将图表导出为 PNG 或 PDF
处理无障碍功能或 RTL 布局

组件概览

SfCircularChart 组件是一种高性能图表解决方案，用于以圆形格式展示比例数据。它支持三种主要系列类型：

PieSeries：传统饼图，以圆形扇区展示数据。支持分离扇区、半圆渲染、合并较小的扇区、按数据点自定义半径，以及多种交互模式。
DoughnutSeries：内半径可自定义的环形图。适合在中心显示注释，支持圆角、中心凸起效果，以及饼图的所有功能。
RadialBarSeries：带有可自定义轨道的圆形进度样式图表。功能包括最大值配置、圆角样式（平角／圆角）、轨道不透明度和颜色自定义，以及沿圆弧显示的数据标签。

所有系列类型都支持丰富的交互功能（工具提示、选择、点击手势）、全面的数据标签定位（内部／外部，带连接线）、图例配置、可自定义时长和延迟的动画、渐变填充（线性／扫描／径向）、图像着色器、空数据点处理、数据排序，以及将图表导出为 PNG／PDF 格式。此组件还提供无障碍功能、RTL 支持，以及通过颜色映射、数据点专属颜色和注释进行的丰富自定义选项。

快速入门

import 'package:syncfusion_flutter_charts/charts.dart';

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> data = [
      ChartData('Jan', 35),
      ChartData('Feb', 28),
      ChartData('Mar', 34),
      ChartData('Apr', 32),
      ChartData('May', 40),
    ];

    return SfCircularChart(
      title: ChartTitle(text: 'Monthly Sales'),
      legend: Legend(isVisible: true),
      tooltipBehavior: TooltipBehavior(enable: true),
      series: <CircularSeries>[
        PieSeries<ChartData, String>(
          dataSource: data,
          xValueMapper: (ChartData d, _) => d.x,
          yValueMapper: (ChartData d, _) => d.y,
          dataLabelSettings: DataLabelSettings(isVisible: true),
          enableTooltip: true,
        ),
      ],
    );
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double y;
}

常见模式

带中心注释的圆环图

SfCircularChart(
  annotations: <CircularChartAnnotation>[
    CircularChartAnnotation(
      widget: Text('62%', style: TextStyle(fontSize: 25)),
    ),
  ],
  series: <CircularSeries>[
    DoughnutSeries<ChartData, String>(
      dataSource: data,
      xValueMapper: (d, _) => d.x,
      yValueMapper: (d, _) => d.y,
      innerRadius: '60%',
    ),
  ],
)

带轨道和圆角的径向条形图

RadialBarSeries<ChartData, String>(
  dataSource: data,
  xValueMapper: (d, _) => d.x,
  yValueMapper: (d, _) => d.y,
  maximumValue: 100,
  cornerStyle: CornerStyle.bothCurve,
  useSeriesColor: true,
  trackOpacity: 0.3,
)

点击时分离扇区的饼图

PieSeries<ChartData, String>(
  dataSource: data,
  xValueMapper: (d, _) => d.x,
  yValueMapper: (d, _) => d.y,
  explode: true,
  explodeIndex: 0,
  explodeGesture: ActivationMode.singleTap,
)

关键属性

属性	位置	用途
`series`	`SfCircularChart`	`CircularSeries` 列表（Pie／Doughnut／RadialBar）
`xValueMapper`	系列	每个数据点的类别标签
`yValueMapper`	系列	每个数据点的数值
`dataLabelSettings`	系列	显示／设置数据标签样式
`legend`	`SfCircularChart`	显示图例
`tooltipBehavior`	`SfCircularChart`	配置工具提示
`annotations`	`SfCircularChart`	在图表上叠加组件
`radius`	系列	外部尺寸，例如 `'80%'`（默认值）
`innerRadius`	Doughnut／RadialBar	中心孔洞大小
`explode`	Pie／Doughnut	启用点击时分离扇区
`maximumValue`	RadialBarSeries	完整圆弧的参考值
`palette`	`SfCircularChart`	图表级颜色列表