syncfusion-flutter-pyramid-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Pyramid Charts (SfPyramidChart)

实现金字塔图表（SfPyramidChart）

The Syncfusion Flutter

SfPyramidChart

widget renders high-performance pyramid charts natively in Dart. It visualizes proportional or hierarchical data as stacked triangular segments, making it ideal for sales funnels, population distribution, organizational hierarchy, and process stage analysis.

Syncfusion Flutter

SfPyramidChart

组件使用Dart原生渲染高性能金字塔图表，它将比例或层级数据可视化为堆叠的三角分段，非常适合销售漏斗、人口分布、组织架构层级和流程阶段分析场景。

When to Use This Skill

何时使用本技能

User wants to render a pyramid chart in a Flutter application

User references

SfPyramidChart

PyramidSeries

, or

syncfusion_flutter_charts

User needs to customize pyramid segments (color, gap, explode, mode)
User wants to add labels, legend, tooltip, or selection to a pyramid chart
User needs to export a pyramid chart as PNG or PDF
User asks about RTL support or accessibility in Syncfusion Flutter charts

用户需要在Flutter应用中渲染金字塔图表

用户提到

SfPyramidChart

、

PyramidSeries

或

syncfusion_flutter_charts

用户需要自定义金字塔分段（颜色、间隙、炸开、模式）
用户需要为金字塔图表添加标签、图例、工具提示或选择功能
用户需要将金字塔图表导出为PNG或PDF格式
用户询问Syncfusion Flutter图表的RTL支持或无障碍适配相关问题

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Package installation and pubspec.yaml setup
Import statement and basic widget initialization
Binding data source with xValueMapper / yValueMapper
Adding title, data labels, legend, and tooltip
Minimal runnable example

📄 阅读： references/getting-started.md

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

Pyramid Customization

金字塔自定义

📄 Read: references/pyramid-customization.md

PyramidMode: linear (height-based) vs surface (area-based)
Changing pyramid size with
```
height
```
and
```
width
```
(percentage strings)
Gap between segments using
```
gapRatio
```
(0 to 1)
Exploding segments:
```
explode
```
,
```
explodeIndex
```
,
```
explodeOffset
```
Palette colors, border color/width, opacity, pointColorMapper

📄 阅读： references/pyramid-customization.md

PyramidMode：linear（基于高度）与surface（基于面积）两种模式
使用
```
height
```
和
```
width
```
（百分比字符串）修改金字塔尺寸
通过
```
gapRatio
```
（取值0到1）设置分段之间的间隙
分段炸开功能：
```
explode
```
、
```
explodeIndex
```
、
```
explodeOffset
```
配色方案、边框颜色/宽度、透明度、pointColorMapper配置

Series Customization

系列自定义

📄 Read: references/series-customization.md

Animation:
```
animationDuration
```
and
```
animationDelay
```
Handling null/empty data points with
```
EmptyPointSettings
```
Empty point modes: gap, zero, drop, average
Color mapping per data point via
```
pointColorMapper
```

📄 阅读： references/series-customization.md

动画：
```
animationDuration
```
和
```
animationDelay
```
配置
使用
```
EmptyPointSettings
```
处理空/无效数据点
空数据点模式：gap、zero、drop、average
通过
```
pointColorMapper
```
为每个数据点配置对应颜色

Data Labels

数据标签

📄 Read: references/data-labels.md

Enabling data labels with
```
DataLabelSettings(isVisible: true)
```
Inside vs outside positioning (
```
labelPosition
```
)
Connector line settings (type, color, length)
Custom label templates via
```
builder
```
Smart labels and
```
labelIntersectAction
```
Overflow mode and hiding zero-value labels

📄 阅读： references/data-labels.md

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

Legend and Tooltip

图例与工具提示

📄 Read: references/legend-and-tooltip.md

Enabling and positioning the legend
Legend title, item templates, overflow behavior
Toggle series visibility via legend tap
Enabling tooltip with
```
TooltipBehavior
```
Tooltip formatting, custom templates, activation mode

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

图例的开启与位置配置
图例标题、项模板、溢出行为配置
点击图例切换系列可见性
通过
```
TooltipBehavior
```
开启工具提示
工具提示格式、自定义模板、触发模式配置

Selection and Callbacks

选择与回调

📄 Read: references/selection-and-callbacks.md

Enabling segment selection with
```
SelectionBehavior
```
Multi-selection, toggle selection, initial selection
Programmatic selection via
```
selectDataPoints
```

Key callbacks:

onPointTap

onSelectionChanged

onTooltipRender

onRendererCreated

for dynamic data updates via

PyramidSeriesController

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

通过
```
SelectionBehavior
```
开启分段选择功能
多选、切换选择、初始选中配置
通过
```
selectDataPoints
```
实现程序化选择

核心回调：

onPointTap

、

onSelectionChanged

、

onTooltipRender

通过

onRendererCreated

配合

PyramidSeriesController

实现动态数据更新

Appearance, Export, and RTL

外观、导出与RTL

📄 Read: references/appearance-export-rtl.md

Chart title customization (
```
ChartTitle
```
)
Chart sizing, margin, background color/image
Exporting chart as PNG image or PDF document
RTL support using
```
Directionality
```
widget or locale
Accessibility: contrast, font scaling, tap targets
```
pixelToPoint
```
method for coordinate conversion

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

图表标题自定义（
```
ChartTitle
```
）
图表尺寸、边距、背景色/背景图配置
导出图表为PNG图片或PDF文档
通过
```
Directionality
```
组件或locale配置RTL支持
无障碍适配：对比度、字体缩放、点击区域
```
pixelToPoint
```
方法实现坐标转换

Quick Start Example

快速开始示例

dart

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;
}

dart

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;
}

Common Patterns

常用实现模式

Exploding a specific segment

炸开指定分段

dart

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,
)

dart

PyramidSeries<ChartData, String>(
  explode: true,
  explodeIndex: 0,      // 需要高亮的分段索引
  explodeOffset: '5%',  // 分段向外偏移的距离
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

Surface mode (area proportional)

面积比例模式（surface）

dart

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,
)

dart

PyramidSeries<ChartData, String>(
  pyramidMode: PyramidMode.surface,  // 分段面积与Y值成正比（linear模式为高度与Y值成正比）
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

Tooltip + selection together

同时开启工具提示和选择功能

dart

// 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,
  ),
)

dart

// 在initState中初始化:
_tooltipBehavior = TooltipBehavior(enable: true);
_selectionBehavior = SelectionBehavior(enable: true);

// 组件中配置:
SfPyramidChart(
  tooltipBehavior: _tooltipBehavior,
  series: PyramidSeries<ChartData, String>(
    selectionBehavior: _selectionBehavior,
    dataSource: chartData,
    xValueMapper: (ChartData data, _) => data.x,
    yValueMapper: (ChartData data, _) => data.y,
  ),
)

Key Properties

核心属性

Property	Type	Description
`series`	`PyramidSeries`	The pyramid data series (one per chart)
`title`	`ChartTitle`	Chart title widget
`legend`	`Legend`	Legend configuration
`tooltipBehavior`	`TooltipBehavior`	Tooltip enable/customize
`enableMultiSelection`	`bool`	Allow selecting multiple segments
`palette`	`List<Color>`	Custom segment colors
`pyramidMode`	`PyramidMode`	`linear` or `surface` sizing
`gapRatio`	`double`	Gap between segments (0–1)
`explode`	`bool`	Enable segment explode on tap

属性	类型	描述
`series`	`PyramidSeries`	金字塔数据系列（每个图表对应一个系列）
`title`	`ChartTitle`	图表标题组件
`legend`	`Legend`	图例配置
`tooltipBehavior`	`TooltipBehavior`	工具提示开启/自定义配置
`enableMultiSelection`	`bool`	是否允许选择多个分段
`palette`	`List<Color>`	自定义分段配色
`pyramidMode`	`PyramidMode`	尺寸计算模式： `linear` 或 `surface`
`gapRatio`	`double`	分段之间的间隙（取值0-1）
`explode`	`bool`	是否开启点击分段炸开功能