Syncfusion Flutter Circular Charts 提供 SfCircularChart 组件,用于在 Flutter 应用中渲染饼图、圆环图和径向条形图,适合展示比例型数据。
用途
- 饼图(PieSeries):以圆形扇区展示数据,适合部分与整体的比例关系。
- 圆环图(DoughnutSeries):环形样式,可自定义内半径,适合在中心放置内容。
- 径向条形图(RadialBarSeries):以圆弧形式对比分类,可配置最大值与轨道样式。
主要能力
- 交互:工具提示、选中、点击手势、扇区弹出(explode)。
- 数据标签:支持内部/外部定位、连接线、智能布局避免重叠、自定义文本与模板、零值标签抑制。
- 外观:调色板与逐点颜色映射、渐变填充(线性/扫描/径向)、图像着色器、动画时长与延迟、空值处理、数据排序。
- 图例与标题:图例显示与自定义、标题、位置与方向、溢出处理、浮动图例、图例项模板。
- 注释:可在图表内放置组件(CircularChartAnnotation),按半径与对齐方式定位,支持水印图案。
- 无障碍与导出:对比度、大字体、可点击目标、RTL 布局;可导出为 PNG(toImage)或 PDF(syncfusion_flutter_pdf)。
使用方式
- 引入包:import 'package:syncfusion_flutter_charts/charts.dart';
- 创建 SfCircularChart,配置 series 列表(PieSeries、DoughnutSeries 或 RadialBarSeries),通过 xValueMapper 与 yValueMapper 绑定数据。
- 常用属性:series、xValueMapper、yValueMapper、dataLabelSettings、legend、tooltipBehavior、annotations、radius、innerRadius、explode、maximumValue、palette。
- 示例(饼图): 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, ), ], )
- 圆环图中心注释:使用 annotations 与 CircularChartAnnotation 放置组件,DoughnutSeries 设置 innerRadius(如 '60%')。
- 径向条形图:RadialBarSeries 可设置 maximumValue、cornerStyle(如 CornerStyle.bothCurve)、useSeriesColor、trackOpacity。
- 饼图点击弹出:PieSeries 设置 explode: true、explodeIndex、explodeGesture(如 ActivationMode.singleTap)。
适用场景
- 展示销售、占比、分类构成等比例数据。
- 需要环形进度或中心指标展示。
- 需要交互式图表(提示、选中、弹出)与自定义样式。
- 需要无障碍支持或 RTL 布局。
- 需要将图表导出为图片或 PDF。
限制
- 资料未提供具体收费、价格、平台兼容版本或性能指标,暂未提供。
- 资料未提供安装命令细节,仅提及包安装与 pubspec 设置,具体命令暂未提供。