SuperAPI AI 工具集

syncfusion-flutter-circular-charts

数据与分析

查看项目

更新于 10-16 02:01

技能介绍

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 设置,具体命令暂未提供。