syncfusion-flutter-pyramid-charts

实现 Pyramid 图表（SfPyramidChart）

Syncfusion Flutter 的 SfPyramidChart widget 使用 Dart 原生渲染高性能 Pyramid 图表。它将比例或层级数据显示为堆叠的三角形分段，非常适合销售漏斗、人口分布、组织层级和流程阶段分析。

何时使用此技能

• 用户想在 Flutter 应用中渲染 Pyramid 图表
• 用户提到 SfPyramidChart、PyramidSeries 或 syncfusion_flutter_charts
• 用户需要自定义 Pyramid 分段（颜色、间距、突出显示、模式）
• 用户想为 Pyramid 图表添加标签、图例、工具提示或选择功能
• 用户需要将 Pyramid 图表导出为 PNG 或 PDF
• 用户询问 Syncfusion Flutter 图表是否支持 RTL 或无障碍功能

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装软件包并配置 pubspec.yaml
• 导入语句和基础 widget 初始化
• 使用 xValueMapper / yValueMapper 绑定数据源
• 添加标题、数据标签、图例和工具提示
• 最小可运行示例

Pyramid 自定义

📄 阅读： references/pyramid-customization.md

• PyramidMode：linear（基于高度）与 surface（基于面积）
• 使用 height 和 width（百分比字符串）调整 Pyramid 大小
• 使用 gapRatio（0 到 1）设置分段间距
• 突出显示分段：explode、explodeIndex、explodeOffset
• 调色板颜色、边框颜色/宽度、不透明度、pointColorMapper

系列自定义

📄 阅读： references/series-customization.md

• 动画：animationDuration 和 animationDelay
• 使用 EmptyPointSettings 处理 null/空数据点
• 空数据点模式：gap、zero、drop、average
• 通过 pointColorMapper 为各个数据点映射颜色

数据标签

📄 阅读： references/data-labels.md

• 使用 DataLabelSettings(isVisible: true) 启用数据标签
• 内部或外部定位（labelPosition）
• 连接线设置（类型、颜色、长度）
• 通过 builder 自定义标签模板
• 智能标签和 labelIntersectAction
• 溢出模式以及隐藏零值标签

图例和工具提示

📄 阅读： references/legend-and-tooltip.md

• 启用图例并设置其位置
• 图例标题、项目模板、溢出行为
• 点击图例切换系列可见性
• 使用 TooltipBehavior 启用工具提示
• 工具提示格式、自定义模板、激活模式

选择和回调

📄 阅读： references/selection-and-callbacks.md

• 使用 SelectionBehavior 启用分段选择
• 多选、切换选择、初始选择
• 通过 selectDataPoints 以编程方式选择
• 关键回调：onPointTap、onSelectionChanged、onTooltipRender
• 使用 onRendererCreated 和 PyramidSeriesController 动态更新数据

外观、导出和 RTL

📄 阅读： references/appearance-export-rtl.md

• 自定义图表标题（ChartTitle）
• 图表尺寸、边距、背景颜色/图片
• 将图表导出为 PNG 图片或 PDF 文档
• 使用 Directionality widget 或区域设置支持 RTL
• 无障碍功能：对比度、字体缩放、点击目标
• 用于坐标转换的 pixelToPoint 方法

快速入门示例

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class PyramidChartExample extends StatelessWidget {
  final List<ChartData> chartData = [
    ChartData('Enterprise', 654),
    ChartData('Mid-Market', 575),
    ChartData('SMB', 446),
    ChartData('Startup', 341),
    ChartData('Individual', 160),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfPyramidChart(
        title: ChartTitle(text: 'Sales Pipeline'),
        legend: Legend(isVisible: true),
        series: PyramidSeries<ChartData, String>(
          dataSource: chartData,
          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
          dataLabelSettings: DataLabelSettings(isVisible: true),
        ),
      ),
    );
  }
}

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

常见模式

突出显示特定分段

PyramidSeries<ChartData, String>(
  explode: true,
  explodeIndex: 0,      // Index of segment to highlight
  explodeOffset: '5%',  // Distance the segment moves out
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

Surface 模式（面积比例）

PyramidSeries<ChartData, String>(
  pyramidMode: PyramidMode.surface,  // Area ∝ Y value (vs linear: height ∝ Y)
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

同时使用工具提示和选择功能

// In initState:
_tooltipBehavior = TooltipBehavior(enable: true);
_selectionBehavior = SelectionBehavior(enable: true);

// In widget:
SfPyramidChart(
  tooltipBehavior: _tooltipBehavior,
  series: PyramidSeries<ChartData, String>(
    selectionBehavior: _selectionBehavior,
    dataSource: chartData,
    xValueMapper: (ChartData data, _) => data.x,
    yValueMapper: (ChartData data, _) => data.y,
  ),
)

主要属性

属性	类型	描述
series	PyramidSeries	金字塔数据系列（每个图表一个）
title	ChartTitle	图表标题组件
legend	Legend	图例配置
tooltipBehavior	TooltipBehavior	启用/自定义工具提示
enableMultiSelection	bool	允许选择多个分段
palette	List<Color>	自定义分段颜色
pyramidMode	PyramidMode	linear 或 surface 尺寸模式
gapRatio	double	分段间距（0–1）
explode	bool	启用点击时分段展开