Back to Details

syncfusion-blazor-accumulation-chart

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Accumulation Charts

实现Syncfusion Blazor累积图表

A comprehensive guide for implementing the Syncfusion Blazor Accumulation Chart component to create interactive pie, doughnut, funnel, and pyramid charts that visualize proportional and hierarchical data in Blazor applications.
这是一份完整指南，用于实现Syncfusion Blazor Accumulation Chart组件，在Blazor应用中创建交互式饼图、环形图、漏斗图、金字塔图，可视化比例数据与层级数据。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Create pie charts to show proportional data distribution
  • Build doughnut charts with center labels or multiple series
  • Implement funnel charts for stage-based data (sales pipeline, conversion rates)
  • Create pyramid charts for hierarchical data visualization
  • Display percentage distributions and part-to-whole relationships
  • Visualize market share, survey results, or categorical proportions
  • Show composition data with interactive slicing and legends
  • Add data labels with smart positioning and connector lines
  • Implement center labels for doughnut charts with dynamic content
  • Customize appearance with gradients, themes, and annotations
  • Group small slices to improve readability
  • Handle user interactions with tooltips, selection, and events
  • Create accessible charts with ARIA support and keyboard navigation
当你需要完成以下需求时可使用本技能：
  • 创建饼图展示比例数据分布
  • 构建带中心标签或多系列的环形图
  • 实现漏斗图展示阶段型数据（销售 pipeline、转化率）
  • 创建金字塔图用于层级数据可视化
  • 展示百分比分布与部分-整体关系
  • 可视化市场份额、调研结果或分类占比
  • 通过交互式切片和图例展示组成结构数据
  • 添加带智能定位和连接线的数据标签
  • 为环形图实现支持动态内容的中心标签
  • 通过渐变、主题和注释自定义外观
  • 分组小切片提升可读性
  • 通过工具提示、选中能力和事件处理用户交互
  • 创建符合可访问性标准的图表，支持ARIA和键盘导航

Component Overview

组件概述

The Syncfusion Blazor Accumulation Chart component specializes in circular and triangular visualizations for proportional data:
  • 4 Chart Types: Pie, Doughnut, Funnel, Pyramid
  • Data Labels: Smart positioning, connector lines, templates, text wrapping
  • Legends: Customizable positioning, paging, click behavior
  • Tooltips: Formatted display, custom templates
  • Center Labels: Doughnut-specific feature with dynamic content
  • Grouping: Combine small slices into "Others" category
  • Customization: Gradients, annotations, themes, colors, borders
  • Interactivity: Selection, explosion, hover effects, animations
  • Accessibility: WCAG compliance, ARIA support, keyboard navigation
  • Export: Print support, image export
Syncfusion Blazor Accumulation Chart组件专门用于比例数据的圆形和三角形可视化：
  • 4种图表类型： 饼图、环形图、漏斗图、金字塔图
  • 数据标签： 智能定位、连接线、模板、文本自动换行
  • 图例： 可自定义位置、分页、点击行为
  • 工具提示： 格式化展示、自定义模板
  • 中心标签： 环形图专属功能，支持动态内容
  • 分组能力： 合并小切片到「其他」分类
  • 自定义能力： 渐变、注释、主题、颜色、边框
  • 交互能力： 选中、切片弹出、hover效果、动画
  • 可访问性： 符合WCAG标准、支持ARIA、键盘导航
  • 导出能力： 支持打印、图片导出

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
Use this when:
  • Setting up a new Blazor Accumulation Chart project
  • Installing NuGet packages and dependencies
  • Creating your first pie or doughnut chart
  • Understanding basic component structure
  • Working with Visual Studio, VS Code, or .NET CLI
  • Binding data to accumulation charts
Topics covered:
  • Installation prerequisites and system requirements
  • NuGet package installation (Syncfusion.Blazor.Charts)
  • Service registration and namespace imports
  • Theme and script references
  • Basic SfAccumulationChart implementation
  • Data source configuration (XName, YName properties)
  • Adding title, data labels, tooltip, and legend
  • Running the application
📄 阅读： references/getting-started.md
适用场景：
  • 搭建新的Blazor累积图表项目
  • 安装NuGet包和依赖
  • 创建你的第一个饼图或环形图
  • 理解基础组件结构
  • 在Visual Studio、VS Code或.NET CLI环境下开发
  • 为累积图表绑定数据
涵盖主题：
  • 安装前置条件与系统要求
  • NuGet包安装（Syncfusion.Blazor.Charts）
  • 服务注册与命名空间导入
  • 主题与脚本引用
  • SfAccumulationChart基础实现
  • 数据源配置（XName、YName属性）
  • 添加标题、数据标签、工具提示与图例
  • 运行应用

Chart Types

图表类型

📄 Read: references/chart-types.md
Use this when:
  • Choosing the right chart type for your data
  • Implementing pie charts (default type)
  • Creating doughnut charts with inner radius
  • Building funnel charts for conversion visualization
  • Designing pyramid charts for hierarchical data
  • Understanding type-specific properties
Topics covered:
  • Pie Chart: Default circular visualization, when to use
  • Doughnut Chart: Inner radius configuration, center content area
  • Funnel Chart: Neck dimensions, width/height ratios, data flow
  • Pyramid Chart: Linear vs surface mode, base positioning
  • Type property configuration
  • Visual differences and use cases
  • Code examples for each type
📄 阅读： references/chart-types.md
适用场景：
  • 为你的数据选择合适的图表类型
  • 实现饼图（默认类型）
  • 创建带内半径的环形图
  • 构建用于转化率可视化的漏斗图
  • 设计用于层级数据的金字塔图
  • 了解特定类型的专属属性
涵盖主题：
  • 饼图： 默认圆形可视化、适用场景
  • 环形图： 内半径配置、中心内容区域
  • 漏斗图： 颈部尺寸、宽高比、数据流
  • 金字塔图： 线性模式与曲面模式、底部定位
  • 类型属性配置
  • 视觉差异与适用场景
  • 每种类型的代码示例

Data Labels

数据标签

📄 Read: references/data-label.md
Use this when:
  • Enabling and customizing data labels
  • Positioning labels inside or outside slices
  • Implementing smart labels for collision avoidance
  • Adding connector lines from labels to slices
  • Customizing label text, format, and templates
  • Handling text wrapping and overflow
  • Using custom data fields for label text
Topics covered:
  • Visible property to enable labels
  • Position options (Inside, Outside)
  • Text wrapping with MaxWidth
  • Smart label positioning
  • Connector line customization (type, length, color, width)
  • Text mapping from data source fields
  • Format patterns (N1, P1, C1 for numbers/percentages/currency)
  • Template customization with HTML and context values
  • Font styling, borders, and backgrounds
📄 阅读： references/data-label.md
适用场景：
  • 启用并自定义数据标签
  • 将标签定位在切片内部或外部
  • 实现智能标签避免重叠
  • 为标签添加指向切片的连接线
  • 自定义标签文本、格式与模板
  • 处理文本换行与溢出
  • 为标签文本使用自定义数据字段
涵盖主题：
  • 通过Visible属性启用标签
  • 位置选项（Inside、Outside）
  • 基于MaxWidth的文本换行
  • 智能标签定位
  • 连接线自定义（类型、长度、颜色、宽度）
  • 从数据源字段映射文本
  • 格式模式（数字/百分比/货币对应N1、P1、C1）
  • 基于HTML和上下文值的模板自定义
  • 字体样式、边框与背景

Legends

图例

📄 Read: references/legend.md
Use this when:
  • Adding legends to accumulation charts
  • Positioning legends (top, bottom, left, right)
  • Customizing legend appearance and behavior
  • Implementing legend paging for many data points
  • Creating custom legend templates
  • Handling legend click events
Topics covered:
  • Enabling legends with Visible property
  • Position and alignment options
  • Legend shape customization
  • Text styling and truncation
  • Toggle visibility behavior on legend click
  • Legend paging configuration
  • Custom templates for legend items
  • Click and hover events
📄 阅读： references/legend.md
适用场景：
  • 为累积图表添加图例
  • 定位图例（上、下、左、右）
  • 自定义图例外观与行为
  • 为大量数据点实现图例分页
  • 创建自定义图例模板
  • 处理图例点击事件
涵盖主题：
  • 通过Visible属性启用图例
  • 位置与对齐选项
  • 图例形状自定义
  • 文本样式与截断
  • 图例点击切换可见性行为
  • 图例分页配置
  • 图例项自定义模板
  • 点击与hover事件

Tooltips

工具提示

📄 Read: references/tooltip.md
Use this when:
  • Enabling tooltips on hover
  • Formatting tooltip content
  • Creating custom tooltip templates
  • Styling tooltip appearance
  • Configuring tooltip behavior and animation
Topics covered:
  • Enable property for tooltip activation
  • Format string for value display
  • Header customization
  • Custom templates with HTML
  • Border, fill, and font styling
  • Animation settings
  • Shared tooltips (if applicable)
📄 阅读： references/tooltip.md
适用场景：
  • 启用hover触发的工具提示
  • 格式化工具提示内容
  • 创建自定义工具提示模板
  • 调整工具提示外观样式
  • 配置工具提示行为与动画
涵盖主题：
  • 通过Enable属性激活工具提示
  • 值展示格式字符串
  • 头部自定义
  • 基于HTML的自定义模板
  • 边框、填充与字体样式
  • 动画设置
  • 共享工具提示（如适用）

Center Labels

中心标签

📄 Read: references/center-label.md
Use this when:
  • Adding text in the center of doughnut charts
  • Displaying static or dynamic center content
  • Customizing center label appearance
  • Showing aggregated data in center
  • Implementing hover-based center text updates
Topics covered:
  • Center label Text property
  • TextStyle customization (font, size, color)
  • Dynamic text with templates
  • Hover-based text updates using events
  • Center label visibility control
  • Use cases and best practices
📄 阅读： references/center-label.md
适用场景：
  • 在环形图中心添加文本
  • 展示静态或动态中心内容
  • 自定义中心标签外观
  • 在中心展示聚合数据
  • 实现基于hover的中心文本更新
涵盖主题：
  • 中心标签Text属性
  • TextStyle自定义（字体、大小、颜色）
  • 基于模板的动态文本
  • 基于事件的hover文本更新
  • 中心标签可见性控制
  • 适用场景与最佳实践

Customization and Styling

自定义与样式

📄 Read: references/customization-styling.md
Use this when:
  • Applying gradient fills to slices
  • Grouping small slices into "Others"
  • Adding annotations (text, shapes, images)
  • Handling empty points in data
  • Customizing themes and color palettes
  • Setting border styles and radius
  • Implementing responsive layouts
  • Using adaptive design for mobile
Topics covered:
  • Gradients: Radial and linear fills for slices
  • Grouping: GroupTo and GroupMode for combining small values
  • Annotations: Text, shape, and image annotations with positioning
  • Empty Points: Mode options (Zero, Drop, Average, Gap)
  • Themes: Built-in themes and custom theme application
  • Colors: Custom color palettes and per-point colors
  • Borders: Width, color, and dash array
  • Radius: Inner radius (doughnut) and overall chart radius
  • Responsive: Adaptive layout for different screen sizes
📄 阅读： references/customization-styling.md
适用场景：
  • 为切片应用渐变填充
  • 将小切片分组为「其他」
  • 添加注释（文本、形状、图片）
  • 处理数据中的空值点
  • 自定义主题与调色板
  • 设置边框样式与半径
  • 实现响应式布局
  • 适配移动端的自适应设计
涵盖主题：
  • 渐变： 切片的径向与线性填充
  • 分组： 用于合并小值的GroupTo与GroupMode属性
  • 注释： 可定位的文本、形状、图片注释
  • 空值点： 模式选项（Zero、Drop、Average、Gap）
  • 主题： 内置主题与自定义主题应用
  • 颜色： 自定义调色板与单切片颜色
  • 边框： 宽度、颜色、虚线数组
  • 半径： 内半径（环形图）与全局图表半径
  • 响应式： 适配不同屏幕尺寸的自适应布局

Animation and Events

动画与事件

📄 Read: references/animation-events.md
Use this when:
  • Configuring chart load animations
  • Handling point selection and click events
  • Responding to mouse hover and leave events
  • Implementing custom interactions
  • Accessing chart lifecycle events
  • Working with series and point rendering events
Topics covered:
  • Animation: Enable, duration, delay configuration
  • Chart Events: Load, Loaded, BeforeResize, Resized
  • Point Events: OnPointClick, OnPointMove, PointRender
  • Series Events: SeriesRender, OnLegendClick
  • Data Label Events: OnDataLabelRender, TextRender
  • Selection: OnSelectionComplete, selection mode
  • Tooltip Events: TooltipRender
  • Event data structures and parameters
  • Practical event handling examples
📄 阅读： references/animation-events.md
适用场景：
  • 配置图表加载动画
  • 处理数据点选中与点击事件
  • 响应鼠标hover与离开事件
  • 实现自定义交互
  • 接入图表生命周期事件
  • 使用系列与数据点渲染事件
涵盖主题：
  • 动画： 启用、时长、延迟配置
  • 图表事件： Load、Loaded、BeforeResize、Resized
  • 数据点事件： OnPointClick、OnPointMove、PointRender
  • 系列事件： SeriesRender、OnLegendClick
  • 数据标签事件： OnDataLabelRender、TextRender
  • 选中： OnSelectionComplete、选中模式
  • 工具提示事件： TooltipRender
  • 事件数据结构与参数
  • 实用事件处理示例

Accessibility and Printing

可访问性与打印

📄 Read: references/accessibility-printing.md
Use this when:
  • Implementing WCAG-compliant charts
  • Adding ARIA attributes for screen readers
  • Enabling keyboard navigation
  • Supporting right-to-left (RTL) layouts
  • Implementing print functionality
  • Exporting charts as images
  • Localizing chart text
Topics covered:
  • Accessibility: WCAG 2.1 compliance features
  • ARIA: Role, label, and description attributes
  • Keyboard: Tab navigation and selection
  • Screen Readers: Alternative text and descriptions
  • Printing: Print method and configuration
  • Export: Image export (PNG, JPG, SVG)
  • RTL: Right-to-left language support
  • Localization: Culture-specific formatting
📄 阅读： references/accessibility-printing.md
适用场景：
  • 实现符合WCAG标准的图表
  • 为屏幕阅读器添加ARIA属性
  • 启用键盘导航
  • 支持从右到左（RTL）布局
  • 实现打印功能
  • 导出图表为图片
  • 图表文本本地化
涵盖主题：
  • 可访问性： WCAG 2.1合规特性
  • ARIA： 角色、标签、描述属性
  • 键盘： Tab导航与选中能力
  • 屏幕阅读器： 替代文本与描述
  • 打印： 打印方法与配置
  • 导出： 图片导出（PNG、JPG、SVG）
  • RTL： 从右到左语言支持
  • 本地化： 文化特定格式

API Reference

API参考

📄 Read: references/api-reference.md
Use this when:
  • Looking up enum values and their exact names
  • Understanding public method signatures and parameters
  • Finding correct property types and default values
  • Troubleshooting API usage issues
  • Referencing quick code patterns
  • Checking critical usage notes and gotchas
Topics covered:
  • Common Enums: AccumulationType, AccumulationLabelPosition, GroupMode, LegendPosition, ExportType
  • Key Properties: Type, InnerRadius, Radius, GroupTo, GroupMode, Visible, Enable
  • Public Methods: ExportAsync, PrintAsync, Refresh, SetAnnotationValueAsync
  • Critical Usage Notes: Center label restrictions, GroupTo semantics, enum qualification
  • Common Patterns: Basic pie, doughnut with center label, grouping examples
  • Troubleshooting: Label overlap, center label issues, enum compilation errors
📄 阅读： references/api-reference.md
适用场景：
  • 查找枚举值及其准确名称
  • 了解公共方法签名与参数
  • 查找正确的属性类型与默认值
  • 排查API使用问题
  • 参考快速代码模式
  • 查看关键使用说明与常见坑点
涵盖主题：
  • 常见枚举： AccumulationType、AccumulationLabelPosition、GroupMode、LegendPosition、ExportType
  • 核心属性： Type、InnerRadius、Radius、GroupTo、GroupMode、Visible、Enable
  • 公共方法： ExportAsync、PrintAsync、Refresh、SetAnnotationValueAsync
  • 关键使用说明： 中心标签限制、GroupTo语义、枚举限定
  • 常见模式： 基础饼图、带中心标签的环形图、分组示例
  • 问题排查： 标签重叠、中心标签问题、枚举编译错误

Quick Start Example

快速入门示例

Here's a minimal pie chart implementation:
razor
@page "/pie-chart"
@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Sales Distribution">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@SalesData" 
                                 XName="Product" 
                                 YName="Sales">
            <AccumulationDataLabelSettings Visible="true" 
                                           Name="Product">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    
    <AccumulationChartLegendSettings Visible="true">
    </AccumulationChartLegendSettings>
</SfAccumulationChart>

@code {
    public class SalesInfo
    {
        public string Product { get; set; }
        public double Sales { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Product = "Product A", Sales = 35 },
        new SalesInfo { Product = "Product B", Sales = 28 },
        new SalesInfo { Product = "Product C", Sales = 22 },
        new SalesInfo { Product = "Product D", Sales = 15 }
    };
}
以下是最小化饼图实现代码：
razor
@page "/pie-chart"
@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Sales Distribution">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@SalesData" 
                                 XName="Product" 
                                 YName="Sales">
            <AccumulationDataLabelSettings Visible="true" 
                                           Name="Product">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    
    <AccumulationChartLegendSettings Visible="true">
    </AccumulationChartLegendSettings>
</SfAccumulationChart>

@code {
    public class SalesInfo
    {
        public string Product { get; set; }
        public double Sales { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Product = "Product A", Sales = 35 },
        new SalesInfo { Product = "Product B", Sales = 28 },
        new SalesInfo { Product = "Product C", Sales = 22 },
        new SalesInfo { Product = "Product D", Sales = 15 }
    };
}

Common Patterns

常见模式

Doughnut Chart with Center Label

带中心标签的环形图

razor
<SfAccumulationChart Title="Revenue by Region">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@RevenueData" 
                                 XName="Region" 
                                 YName="Revenue"
                                 InnerRadius="40%">
            <AccumulationDataLabelSettings Visible="true" Position="Syncfusion.Blazor.Charts.AccumulationLabelPosition.Outside">
                <AccumulationChartConnector Length="20px">
                </AccumulationChartConnector>
            </AccumulationDataLabelSettings>
            <AccumulationChartCenterLabel 
                Text="Total<br/>$1.2M">
                <AccumulationChartCenterLabelFont 
                    Size="16px" 
                    FontWeight="600">
                </AccumulationChartCenterLabelFont>
            </AccumulationChartCenterLabel>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>
razor
<SfAccumulationChart Title="Revenue by Region">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@RevenueData" 
                                 XName="Region" 
                                 YName="Revenue"
                                 InnerRadius="40%">
            <AccumulationDataLabelSettings Visible="true" Position="Syncfusion.Blazor.Charts.AccumulationLabelPosition.Outside">
                <AccumulationChartConnector Length="20px">
                </AccumulationChartConnector>
            </AccumulationDataLabelSettings>
            <AccumulationChartCenterLabel 
                Text="Total<br/>$1.2M">
                <AccumulationChartCenterLabelFont 
                    Size="16px" 
                    FontWeight="600">
                </AccumulationChartCenterLabelFont>
            </AccumulationChartCenterLabel>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Funnel Chart for Conversion

转化率漏斗图

razor
<SfAccumulationChart Title="Sales Funnel">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@ConversionData" 
                                 XName="Stage" 
                                 YName="Count"
                                 Type="Syncfusion.Blazor.Charts.AccumulationType.Funnel"
                                 NeckWidth="25%"
                                 NeckHeight="10%">
            <AccumulationDataLabelSettings Visible="true" Name="Stage">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>
razor
<SfAccumulationChart Title="Sales Funnel">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@ConversionData" 
                                 XName="Stage" 
                                 YName="Count"
                                 Type="Syncfusion.Blazor.Charts.AccumulationType.Funnel"
                                 NeckWidth="25%"
                                 NeckHeight="10%">
            <AccumulationDataLabelSettings Visible="true" Name="Stage">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Grouped Pie Chart with Gradients

带渐变的分组饼图

razor
<SfAccumulationChart Title="Market Share Analysis">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@MarketData" 
                                 XName="Company" 
                                 YName="Share"
                                 GroupTo="5"
                                 GroupMode="Syncfusion.Blazor.Charts.GroupMode.Value">
            <AccumulationDataLabelSettings Visible="true" Position="Syncfusion.Blazor.Charts.AccumulationLabelPosition.Outside">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Right">
    </AccumulationChartLegendSettings>
</SfAccumulationChart>

@code {
    // Data source with gradient applied
    public List<MarketInfo> MarketData = new List<MarketInfo>
    {
        new MarketInfo { Company = "Company A", Share = 35 },
        new MarketInfo { Company = "Company B", Share = 20 },
        new MarketInfo { Company = "Company C", Share = 15 },
        new MarketInfo { Company = "Others", Share = 30 }
    };
}
razor
<SfAccumulationChart Title="Market Share Analysis">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@MarketData" 
                                 XName="Company" 
                                 YName="Share"
                                 GroupTo="5"
                                 GroupMode="Syncfusion.Blazor.Charts.GroupMode.Value">
            <AccumulationDataLabelSettings Visible="true" Position="Syncfusion.Blazor.Charts.AccumulationLabelPosition.Outside">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Right">
    </AccumulationChartLegendSettings>
</SfAccumulationChart>

@code {
    // Data source with gradient applied
    public List<MarketInfo> MarketData = new List<MarketInfo>
    {
        new MarketInfo { Company = "Company A", Share = 35 },
        new MarketInfo { Company = "Company B", Share = 20 },
        new MarketInfo { Company = "Company C", Share = 15 },
        new MarketInfo { Company = "Others", Share = 30 }
    };
}

Key Properties and Components

核心属性与组件

SfAccumulationChart

SfAccumulationChart

  • Title: Chart title text
  • Height/Width: Chart dimensions
  • Theme: Visual theme (Bootstrap5, Material, Fluent, etc.)
  • EnableAnimation: Enable/disable load animation
  • SelectionMode: Point or Series selection
  • Background: Chart background color
  • Title： 图表标题文本
  • Height/Width： 图表尺寸
  • Theme： 视觉主题（Bootstrap5、Material、Fluent等）
  • EnableAnimation： 启用/禁用加载动画
  • SelectionMode： 数据点或系列选中模式
  • Background： 图表背景色

AccumulationChartSeries

AccumulationChartSeries

  • DataSource: Data collection to visualize
  • XName: Property name for category/label
  • YName: Property name for values
  • Type: Pie (default), Doughnut, Funnel, Pyramid
  • InnerRadius: Doughnut inner radius percentage
  • Radius: Overall chart radius
  • StartAngle/EndAngle: Arc positioning
  • GroupTo: Value/point count threshold for grouping
  • GroupMode: Value or Point grouping mode
  • Explode/ExplodeIndex: Slice separation on load
  • DataSource： 待可视化的数据集合
  • XName： 分类/标签对应的属性名
  • YName： 数值对应的属性名
  • Type： Pie（默认）、Doughnut、Funnel、Pyramid
  • InnerRadius： 环形图内半径百分比
  • Radius： 全局图表半径
  • StartAngle/EndAngle： 弧度定位
  • GroupTo： 分组阈值（数值或切片数量）
  • GroupMode： 按数值或切片数分组模式
  • Explode/ExplodeIndex： 加载时切片分离效果

AccumulationDataLabelSettings

AccumulationDataLabelSettings

  • Visible: Show/hide data labels
  • Name: Property for label text
  • Position: Inside or Outside placement
  • Format: Value format string
  • MaxWidth: Text wrap width
  • Template: Custom HTML template
  • Visible： 显示/隐藏数据标签
  • Name： 标签文本对应的属性
  • Position： 内部或外部放置
  • Format： 数值格式字符串
  • MaxWidth： 文本换行宽度
  • Template： 自定义HTML模板

AccumulationChartLegendSettings

AccumulationChartLegendSettings

  • Visible: Show/hide legend
  • Position: Top, Bottom, Left, Right
  • Height/Width: Legend dimensions
  • ToggleVisibility: Enable click to hide/show points
  • Visible： 显示/隐藏图例
  • Position： 上、下、左、右
  • Height/Width： 图例尺寸
  • ToggleVisibility： 启用点击隐藏/显示数据点

AccumulationChartTooltipSettings

AccumulationChartTooltipSettings

  • Enable: Show/hide tooltips
  • Format: Tooltip text format
  • Header: Custom header text
  • Template: Custom HTML template
  • Enable： 显示/隐藏工具提示
  • Format： 工具提示文本格式
  • Header： 自定义头部文本
  • Template： 自定义HTML模板

Public Methods

公共方法

The 
SfAccumulationChart
component provides the following public methods. For complete method signatures and additional details, see api-reference.md.
SfAccumulationChart
组件提供以下公共方法。完整方法签名与额外详情请查看api-reference.md。

ExportAsync

ExportAsync

Exports the chart in the specified format.
csharp
await chart.ExportAsync(ExportType.PNG, "chart.png");
Parameters:
  • type
    (ExportType): PNG, JPEG, SVG, or PDF
  • fileName
    (string): Name of the exported file
  • orientation
    (PdfPageOrientation?): PDF orientation (Portrait/Landscape), optional
  • allowDownload
    (bool): Whether to download the file, default is true
将图表导出为指定格式。
csharp
await chart.ExportAsync(ExportType.PNG, "chart.png");
参数：
  • type
    (ExportType)：PNG、JPEG、SVG或PDF
  • fileName
    (string)：导出文件名称
  • orientation
    (PdfPageOrientation?)：PDF方向（纵向/横向），可选
  • allowDownload
    (bool)：是否下载文件，默认true

PrintAsync

PrintAsync

Prints the chart.
csharp
await chart.PrintAsync();
打印图表。
csharp
await chart.PrintAsync();

Refresh

Refresh

Refreshes the chart with optional animation.
csharp
chart.Refresh(shouldAnimate: true);
Parameters:
  • shouldAnimate
    (bool): Whether to animate the refresh, default is true
刷新图表，可选择是否带动画。
csharp
chart.Refresh(shouldAnimate: true);
参数：
  • shouldAnimate
    (bool)：刷新时是否播放动画，默认true

SetAnnotationValueAsync

SetAnnotationValueAsync

Updates annotation content dynamically.
csharp
await chart.SetAnnotationValueAsync(0, "Updated Content");
Parameters:
  • annotationIndex
    (double): Index of the annotation to update
  • content
    (string): New content for the annotation
动态更新注释内容。
csharp
await chart.SetAnnotationValueAsync(0, "Updated Content");
参数：
  • annotationIndex
    (double)：待更新注释的索引
  • content
    (string)：注释的新内容

Common Use Cases

常见使用场景

Market Share Visualization

市场份额可视化

Use pie or doughnut charts to show competitive market distribution with legends identifying each company.
使用饼图或环形图展示竞争市场分布，通过图例识别每个主体。

Sales Pipeline Tracking

销售管道追踪

Use funnel charts to visualize stage-by-stage conversion in sales processes, showing drop-off at each step.
使用漏斗图可视化销售流程各阶段转化率，展示每一步的流失情况。

Organizational Hierarchy

组织层级展示

Use pyramid charts to display hierarchical structures like company organization or food chains.
使用金字塔图展示层级结构，比如公司组织架构或食物链。

Survey Results Display

调研结果展示

Use pie charts with data labels to present survey response distributions with clear percentage values.
使用带数据标签的饼图展示调研回复分布，附带清晰的百分比数值。

Financial Portfolio Composition

金融投资组合构成

Use doughnut charts with center labels to show asset allocation with total value in the center.
使用带中心标签的环形图展示资产配置，中心展示总价值。

Regional Revenue Distribution

区域收入分布

Use pie charts with gradients to highlight revenue contribution by geographic regions.
使用带渐变的饼图突出不同地理区域的收入贡献。

See Also

相关参考