syncfusion-flutter-funnel-charts

Name: syncfusion-flutter-funnel-charts
Author: syncfusion

github.com/syncfusion开发252 次安装16 周前更新

代码仓库

关于 syncfusion-flutter-funnel-charts

此技能介绍 Syncfusion Flutter 的 SfFunnelChart 组件，用漏斗图展示流程各阶段逐步减少的数据，适合构建可交互图表。它涵盖标签、图例、选择和导出等配置。

主要功能

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-funnel-charts

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

包含的文件

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

references/

accessibility.md

callbacks.md

chart-appearance.md

chart-title.md

common-patterns.md

datalabel.md

export-funnel-chart.md

funnel-customization.md

getting-started.md

legend.md

methods.md

overview.md

right-to-left.md

selection.md

series-customization.md

tooltip.md

详细介绍

Syncfusion Flutter 漏斗图

本技能介绍用于以漏斗形状可视化数据的 Syncfusion Flutter SfFunnelChart widget，通常用于表示流程中数值逐渐递减的各个阶段。

何时使用此技能

在以下情况下使用此技能：

可视化转化漏斗，展示销售或营销流程中的各个阶段
显示层级数据，其数值逐渐递减
跟踪流程阶段，适用于工作流、管道或顺序流程
分析转化率，比较不同阶段（潜在客户、意向客户、客户）的数据
显示销售管道，展示交易在各个阶段中的推进情况
可视化筛选流程，展示数据在每个步骤中的缩减情况
显示招聘漏斗，展示候选人在招聘各阶段中的进展
创建营销分析图表，展示用户从认知到转化的旅程
呈现流程效率，展示每个阶段的数据缩减情况
构建分析仪表板，通过漏斗图可视化业务指标

主要功能

漏斗可视化，包含颈部和主体分段
交互式选择，支持单选和多选
丰富的工具提示，可自定义外观和激活模式
数据标签，支持灵活的位置（内部/外部）和样式
图例支持，可自定义并切换显示状态
分段突出显示，强调特定数据点
分段间距，清晰区分各个分段
动画支持，可自定义时长和延迟
调色板颜色，自动应用颜色
导出功能，可导出为 PNG 图像和 PDF 文档
RTL 支持，适用于从右向左书写的语言
无障碍功能，包含语义标签和屏幕阅读器支持
响应式尺寸，可配置宽度和高度
空数据点处理，支持多种模式
颜色映射，根据数据设置颜色

文档与导航指南

入门

📄 阅读： references/getting-started.md

安装和程序包设置
SfFunnelChart 基本实现
添加数据源并绑定数据
创建第一个图表
程序包依赖项和导入
快速入门代码示例

组件概述

📄 阅读： references/overview.md

SfFunnelChart widget 概述和功能
何时使用漏斗图，而不是其他图表类型
主要功能和能力
常见用例和场景
组件架构

漏斗自定义

📄 阅读： references/funnel-customization.md

漏斗尺寸配置（高度和宽度）
颈部尺寸自定义（neckHeight 和 neckWidth）
分段间距（gapRatio）
突出显示分段（explode、explodeIndex、explodeOffset）
分段边框和不透明度
应用调色板颜色
自定义外观

系列自定义

📄 阅读： references/series-customization.md

动画设置（时长和延迟）
空数据点处理（gap、zero、drop、average 模式）
空数据点自定义（颜色、边框）
数据点颜色映射（pointColorMapper）
系列级样式选项

数据标签

📄 阅读： references/datalabel.md

启用并设置数据标签位置
标签对齐选项（outer、auto、top、bottom、middle）
标签位置（内部/外部）
设置数据标签样式（颜色、字体、边框）
使用系列颜色作为标签颜色
隐藏零值标签
溢出模式处理
使用 builder 创建数据标签模板

图例

📄 阅读： references/legend.md

启用图例（isVisible）
自定义图例外观
图例标题配置
图例位置（top、bottom、left、right、auto）
图例溢出模式（scroll、wrap）
切换系列可见性
设置带偏移量的浮动图例
使用 builder 创建图例项模板

工具提示

📄 阅读： references/tooltip.md

启用工具提示（TooltipBehavior）
自定义工具提示外观（颜色、边框、阴影）
工具提示格式和模板
工具提示位置（auto、pointer）
激活模式（轻触、双击、长按）
工具提示时长和动画
自定义工具提示构建器

选择

📄 阅读： references/selection.md

启用选择（SelectionBehavior）
单选和多选
自定义选中扇区（颜色、边框、不透明度）
自定义未选中扇区
渲染时进行初始选择
切换选择行为
使用方法进行程序化选择

图表标题和外观

📄 阅读： references/chart-title.md

添加图表标题并设置样式
标题对齐方式（near、center、far）
标题背景和边框
标题文本样式

📄 阅读： references/chart-appearance.md

图表尺寸（宽度/高度）
图表边距配置
背景颜色和图像
自定义边框

回调和事件

📄 阅读： references/callbacks.md

onLegendItemRender - 自定义图例项
onTooltipRender - 自定义工具提示内容
onDataLabelRender - 自定义数据标签
onLegendTapped - 处理图例轻触
onSelectionChanged - 处理选择事件
onDataLabelTapped - 处理数据标签轻触
onPointTap - 处理扇区轻触
onPointDoubleTap - 处理双击
onPointLongPress - 处理长按
onChartTouchInteractionUp/Down/Move - 触摸交互
onRendererCreated - 访问系列控制器

常见模式和最佳实践

📄 阅读： references/common-patterns.md

销售流程漏斗模式
使用颜色展示营销转化
突出显示分离扇区
自定义颈部大小的技巧
使用控制器动态更新
模式组合示例
模式选择指南

高级功能

📄 阅读： references/methods.md

FunnelSeriesController 方法
pixelToPoint 转换
动态数据更新
程序化控制

📄 阅读： references/export-funnel-chart.md

将图表导出为 PNG 图像
将图表导出为 PDF 文档
图像质量和像素比
创建 PDF 文档

本地化和无障碍功能

📄 阅读： references/accessibility.md

屏幕阅读器支持
颜色对比度要求
大字体支持
触控目标尺寸
无障碍交互

📄 阅读： references/right-to-left.md

支持阿拉伯语、希伯来语等 RTL 语言
Directionality widget 用法
RTL 区域设置配置
图例和工具提示的 RTL 行为

快速入门示例

基本漏斗图

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

class BasicFunnelChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Prospects', 500),
      ChartData('Qualified', 350),
      ChartData('Contacted', 250),
      ChartData('Negotiating', 150),
      ChartData('Won', 100)
    ];
    
    return Scaffold(
      appBar: AppBar(title: Text('Sales Funnel')),
      body: Center(
        child: SfFunnelChart(
          title: ChartTitle(text: 'Sales Pipeline Analysis'),
          legend: Legend(isVisible: true),
          series: FunnelSeries<ChartData, String>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.stage,
            yValueMapper: (ChartData data, _) => data.value,
            dataLabelSettings: DataLabelSettings(isVisible: true)
          )
        )
      )
    );
  }
}

class ChartData {
  ChartData(this.stage, this.value);
  final String stage;
  final double value;
}

自定义漏斗图

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

class CustomFunnelChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Awareness', 1000, Colors.blue),
      ChartData('Interest', 750, Colors.green),
      ChartData('Consideration', 500, Colors.orange),
      ChartData('Intent', 300, Colors.purple),
      ChartData('Purchase', 150, Colors.red)
    ];
    
    return Scaffold(
      appBar: AppBar(title: Text('Marketing Funnel')),
      body: Center(
        child: SfFunnelChart(
          title: ChartTitle(
            text: 'Customer Journey Analysis',
            textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
          ),
          legend: Legend(
            isVisible: true,
            position: LegendPosition.bottom
          ),
          tooltipBehavior: TooltipBehavior(enable: true),
          series: FunnelSeries<ChartData, String>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.stage,
            yValueMapper: (ChartData data, _) => data.value,
            pointColorMapper: (ChartData data, _) => data.color,
            // Customize funnel appearance
            height: '80%',
            width: '80%',
            neckHeight: '20%',
            neckWidth: '15%',
            gapRatio: 0.1,
            explode: true,
            explodeIndex: 4,
            explodeOffset: '10%',
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelPosition: ChartDataLabelPosition.inside,
              textStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold
              )
            )
          )
        )
      )
    );
  }
}

class ChartData {
  ChartData(this.stage, this.value, this.color);
  final String stage;
  final double value;
  final Color color;
}

带工具提示和选择功能的漏斗图

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

class InteractiveFunnelChart extends StatefulWidget {
  @override
  _InteractiveFunnelChartState createState() => _InteractiveFunnelChartState();
}

class _InteractiveFunnelChartState extends State<InteractiveFunnelChart> {
  late TooltipBehavior _tooltipBehavior;
  late SelectionBehavior _selectionBehavior;

  @override
  void initState() {
    _tooltipBehavior = TooltipBehavior(
      enable: true,
      format: 'point.x: point.y leads',
      color: Colors.black87,
      textStyle: TextStyle(color: Colors.white)
    );
    
    _selectionBehavior = SelectionBehavior(
      enable: true,
      selectedColor: Colors.deepOrange,
      unselectedColor: Colors.grey[300]
    );
    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Visitors', 5000),
      ChartData('Sign-ups', 3500),
      ChartData('Active Users', 2000),
      ChartData('Premium Users', 800),
      ChartData('Renewals', 500)
    ];
    
    return Scaffold(
      appBar: AppBar(title: Text('Subscription Funnel')),
      body: Center(
        child: SfFunnelChart(
          title: ChartTitle(text: 'User Conversion Funnel'),
          legend: Legend(isVisible: true),
          tooltipBehavior: _tooltipBehavior,
          series: FunnelSeries<ChartData, String>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.stage,
            yValueMapper: (ChartData data, _) => data.count,
            selectionBehavior: _selectionBehavior,
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelPosition: ChartDataLabelPosition.outside
            )
          )
        )
      )
    );
  }
}

class ChartData {
  ChartData(this.stage, this.count);
  final String stage;
  final double count;
}

常见模式

📄 阅读： references/common-patterns.md，了解详细的实现模式

快速模式概览

销售漏斗 - 用于销售阶段的基础漏斗，阶段推进清晰
带颜色的营销转化漏斗 - 通过颜色区分阶段，构建视觉层次
突出显示分离扇区 - 通过分离扇区突出显示关键阶段
自定义颈部尺寸 - 调整颈部尺寸以实现不同的视觉效果
动态更新 - 使用 FunnelSeriesController 实时更新数据

每种模式都包含完整的代码示例、适用场景和最佳实践。完整实现请参阅常见模式参考。

关键属性

SfFunnelChart 的重要属性

series - FunnelSeries 配置及数据源
title - 图表标题（ChartTitle）
legend - 图例配置（Legend）
tooltipBehavior - 工具提示设置（TooltipBehavior）
palette - 系列的调色板
backgroundColor - 图表背景颜色
backgroundImage - 背景图片
borderColor - 图表边框颜色
borderWidth - 图表边框宽度
margin - 图表边距（EdgeInsets）
enableMultiSelection - 启用多扇区选择
onSelectionChanged - 选择变更回调
onLegendItemRender - 图例项渲染回调
onTooltipRender - 工具提示渲染回调
onDataLabelRender - 数据标签渲染回调
onLegendTapped - 图例点击回调
onDataLabelTapped - 数据标签点击回调
onChartTouchInteractionUp/Down/Move - 触摸交互回调

FunnelSeries 的重要属性

dataSource - 数据源列表
xValueMapper - 从数据映射 X 轴值
yValueMapper - 从数据映射 Y 轴值
pointColorMapper - 从数据映射颜色
name - 用于图例的系列名称
height - 漏斗高度的百分比（例如，'80%'）
width - 漏斗宽度的百分比（例如，'80%'）
neckHeight - 颈部高度的百分比（例如，'20%'）
neckWidth - 颈部宽度的百分比（例如，'15%'）
gapRatio - 扇区间的间距（0 到 1）
explode - 启用扇区分离
explodeIndex - 要分离的扇区索引
explodeOffset - 分离距离的百分比
opacity - 系列不透明度（0 到 1）
borderWidth - 扇区边框宽度
borderColor - 扇区边框颜色
dataLabelSettings - 数据标签配置
selectionBehavior - 选择行为设置
enableTooltip - 为系列启用工具提示
animationDuration - 动画时长（毫秒）
animationDelay - 动画延迟（毫秒）
emptyPointSettings - 空数据点处理方式
initialSelectedDataIndexes - 初始选中的索引
onPointTap - 数据点点击回调
onPointDoubleTap - 数据点双击回调
onPointLongPress - 数据点长按回调
onRendererCreated - 渲染器创建回调

DataLabelSettings 属性

isVisible - 显示或隐藏数据标签
labelPosition - 位置（内部或外部）
labelAlignment - 对齐方式（outer、auto、top、bottom、middle）
textStyle - 文本样式
color - 标签背景颜色
borderColor - 标签边框颜色
borderWidth - 标签边框宽度
borderRadius - 标签圆角半径
margin - 标签边距
opacity - 标签不透明度
angle - 标签旋转角度
useSeriesColor - 使用系列颜色作为标签背景
showZeroValue - 显示零值对应的标签
overflowMode - 溢出处理方式（none、trim、hide、shift）

图例属性

isVisible - 显示/隐藏图例
position - 位置（auto、top、bottom、left、right）
orientation - 方向（auto、horizontal、vertical）
title - 图例标题（LegendTitle）
overflowMode - 溢出模式（scroll、wrap）
toggleSeriesVisibility - 启用切换系列可见性
backgroundColor - 图例背景颜色
borderColor - 图例边框颜色
borderWidth - 图例边框宽度
opacity - 图例不透明度
padding - 图例内边距
iconHeight - 图例图标高度
iconWidth - 图例图标宽度
offset - 浮动图例偏移量

TooltipBehavior 属性

enable - 启用工具提示
color - 工具提示背景颜色
borderColor - 工具提示边框颜色
borderWidth - 工具提示边框宽度
opacity - 工具提示不透明度
duration - 显示时长（毫秒）
animationDuration - 动画时长
elevation - 工具提示立体效果/阴影
format - 工具提示文本格式
header - 工具提示标题文本
tooltipPosition - 位置（auto、pointer）
activationMode - 激活模式（tap、doubleTap、longPress、none）
builder - 自定义工具提示构建器

SelectionBehavior 属性

enable - 启用选择
selectedColor - 选中片段颜色
unselectedColor - 未选中片段颜色
selectedBorderColor - 选中片段边框颜色
selectedBorderWidth - 选中片段边框宽度
unselectedBorderColor - 未选中片段边框颜色
unselectedBorderWidth - 未选中片段边框宽度
selectedOpacity - 选中片段不透明度
unselectedOpacity - 未选中片段不透明度
toggleSelection - 启用切换选择

常见用例

销售管道 - 跟踪交易在各销售阶段的进展（潜在客户 → 成交）
营销漏斗 - 可视化客户旅程（认知 → 购买）
转化分析 - 展示用户在各流程阶段的转化率
招聘流程 - 展示候选人在各招聘阶段的进展
电商漏斗 - 跟踪购物车放弃情况和结账流程
潜在客户管理 - 监控潜在客户的资格认定和转化流程
订阅漏斗 - 分析用户引导和订阅流程
网站分析 - 展示访客参与度和转化指标
流程效率 - 可视化工作流瓶颈和流失节点
客户旅程 - 描绘客户从认知到忠诚各阶段的触点

支持 Markdown

登录后评论

基本信息

作者: syncfusion
仓库: syncfusion/flutter-ui-components-skills
分类: 开发
安装次数: 52
GitHub Stars: 2

报告问题