用途
该技能用于在 ASP.NET Core 应用中创建交互式 3D 圆形图表(3D Circular Chart),以 3D 形式可视化比例数据。它指导开发者完成饼图(Pie)和圆环图(Donut)的实现、配置与自定义,覆盖从基础搭建到高级交互功能的完整流程。
主要能力
- 饼图与圆环图变体:渲染饼图系列与圆环图系列,支持半径自定义、圆环内半径(innerRadius)设置、多系列渲染以及颜色映射与样式。
- 数据标签:启用与定位数据标签,支持标签模板与自定义格式、连接线样式、从数据源映射文本、百分比与数值格式化,以及通过事件自定义标签。
- 图例与工具提示:配置图例的位置、对齐、尺寸与形状,支持图例分页与导航;启用并格式化工具提示,支持自定义工具提示模板与交互行为。
- 标题、副标题与空数据点:添加并自定义标题与副标题;处理空值/缺失数据点,支持 Gap、Average、Drop、Zero 等空点模式,并可自定义空点外观。
- 打印与导出:打印饼图/圆环图,通过 enableExport="true" 启用导出,支持导出为 JPEG、PNG、SVG 图像格式以及 PDF,并提供导出配置选项与按钮集成。
使用方式
在 CSHTML 视图中使用 ejs-circularchart3d 标签助手,配合 e-circularchart3d-legendsettings、e-circularchart3d-series-collection、e-circularchart3d-series、e-circularchart3d-series-datalabel、e-circularchart3d-tooltipsettings 等子标签进行配置。数据源通过 dataSource 绑定,xName 与 yName 指定分类与数值字段。
最小示例:
<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>
常用配置模式包括:带格式化数据标签的饼图、通过 innerRadius="50%" 配置的圆环图、自定义外观的图例,以及自定义格式的工具提示(如 format="${point.x}: ${point.y}%")。
关键配置属性: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(处理空值,Gap/Average/Drop/Zero,默认 Gap)。
适用场景
- 市场份额可视化:用饼图/圆环图展示产品或市场细分分布
- 预算构成:以饼图切片及百分比展示费用类别
- 调查结果:按比例可视化调查响应分布
- 状态分布:展示项目状态分布(已完成、进行中、待处理等)
- 销售业绩:按地区或产品类别比较销售
- 库存水平:展示各仓库或类别的库存分布
- 仪表盘分析:在业务分析仪表盘中嵌入饼图/圆环图
限制
资料未提供该组件的授权、收费、价格、平台兼容性、性能上限或浏览器支持等具体限制信息,暂未提供。