syncfusion-aspnetcore-circular-chart-3d

Syncfusion ASP.NET Core 3D Circular Chart

Syncfusion 的 3D Circular Chart 提供了强大的组件，可使用 3D Circular Chart 格式直观呈现比例数据。本技能将指导你在 ASP.NET Core 应用中实现、配置和自定义饼图/圆环图，内容涵盖基础设置到高级交互功能。

何时使用此技能

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

• 创建饼图或圆环图以展示比例数据
• 配置和设置数据标签、图例及工具提示的格式
• 使用标题、颜色和样式自定义图表外观
• 处理空数据点或缺失数据点
• 启用打印和导出等交互功能
• 实现与饼图扇区的用户交互
• 在 ASP.NET Core 应用中配置图表行为

导航指南

入门

📄 阅读： references/getting-started.md

• 安装和设置 NuGet 包
• 添加标记帮助程序和脚本引用
• 创建你的第一个饼图
• ASP.NET Core 基本配置
• 设置项目结构

饼图和圆环图变体

📄 阅读： references/pie-donut-variations.md

• 呈现饼图系列与圆环图系列
• 自定义和配置半径
• 圆环效果的内半径
• 呈现多个系列
• 颜色映射和样式设置

数据标签

📄 阅读： references/data-labels.md

• 启用和定位数据标签
• 标签模板和自定义格式
• 连接线和样式设置
• 将数据源中的文本映射到标签
• 百分比和数值格式设置
• 使用事件自定义标签

图例和工具提示

📄 阅读： references/legend-tooltips.md

• 图例配置和定位
• 图例对齐、尺寸和形状
• 图例分页和导航
• 启用工具提示并设置格式
• 自定义工具提示模板
• 交互式工具提示行为
• 样式和外观

标题、副标题和空数据点

📄 阅读： references/titles-empty-points.md

• 添加标题和副标题
• 自定义标题并设置样式
• 处理空值/Null 数据点
• 空数据点模式（Gap、Average、Drop、Zero）
• 自定义空数据点外观
• 设置副标题样式和位置

打印和导出

📄 阅读： references/print-export.md

• 打印饼图/圆环图
• 使用 enableExport="true" 启用导出
• 导出为图像格式（JPEG、PNG、SVG）
• PDF 导出功能
• 导出配置选项
• 集成用于用户交互的按钮

快速入门

下面是一个最精简的可运行示例，帮助你开始使用饼图：

// CSHTML View
<ejs-circularchart3d id="chartContainer" title="Sales Distribution" tilt="-45">
    <e-circularchart3d-legendsettings visible="true" position="@Syncfusion.EJ2.Charts.LegendPosition.Right">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="@chartData" xName="Category" yName="Value">
            <e-circularchart3d-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
                <e-connectorstyle length="40px"></e-connectorstyle>
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

// Code-behind
public class ChartData
{
    public string Category { get; set; }
    public double Value { get; set; }
}

// Controller
List<ChartData> chartData = new()
{
    new ChartData { Category = "Product A", Value = 35 },
    new ChartData { Category = "Product B", Value = 28 },
    new ChartData { Category = "Product C", Value = 37 }
};

常见模式

模式 1：带格式化数据标签的饼图

<e-circularchart3d-series-datalabel visible="true" format="n1" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
    <e-font size="12px" fontWeight="600"></e-font>
    <e-connectorstyle length="50px" color="gray"></e-connectorstyle>
</e-circularchart3d-series-datalabel>

模式 2：圆环图配置

<e-circularchart3d-series dataSource="@data" xName="X" yName="Y" innerRadius="50%">
</e-circularchart3d-series>

模式 3：自定义外观的图例

<e-circularchart3d-legendsettings visible="true" position="@Syncfusion.EJ2.Charts.LegendPosition.Bottom" 
    alignment="@Syncfusion.EJ2.Charts.Alignment.Center" width="100%">
</e-circularchart3d-legendsettings>

模式 4：自定义格式的工具提示

<e-circularchart3d-tooltipsettings enable="true" format="${point.x}: ${point.y}%"></e-circularchart3d-tooltipsettings>

关键配置属性

属性	用途	默认值
Type	系列类型（饼图使用 Pie，圆环图通过 InnerRadius 设置）	Pie
Radius	饼图半径百分比	80%
InnerRadius	圆环效果的内半径（0-100%）	0%
DataLabel.Visible	显示/隐藏数据标签	false
DataLabel.Position	标签位置（Inside/Outside）	Inside
LegendSettings.Visible	显示/隐藏图例	true
Tooltip.Enable	启用悬停工具提示	false
EmptyPointSettings.Mode	处理 Null 值（Gap/Average/Drop/Zero）	Gap

常见用例

1. 市场份额可视化：使用饼图或环形图展示产品或细分市场的分布
2. 预算明细：将各项支出类别显示为带百分比的饼图切片
3. 调查结果：按比例可视化调查回复的分布
4. 状态分布：展示项目状态分布（已完成、进行中、待处理等）
5. 销售业绩：按地区或产品类别比较销售额
6. 库存水平：展示各仓库或类别的库存分布
7. 仪表板分析：在业务分析仪表板中加入饼图或环形图

后续步骤

• 阅读入门指南，设置你的第一个图表
• 探索饼图和环形图变体，了解不同的视觉样式
• 配置数据标签，更好地呈现数据
• 添加图例和工具提示，以交互方式探索数据
• 设置标题和空数据点，确保内容完整
• 启用打印和导出，生成报告