SuperAPI AI 工具集

syncfusion-aspnetcore-circular-chart-3d

前端与建站

查看项目

更新于 10-16 02:14

技能介绍

用途

该技能用于在 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)。

适用场景

  • 市场份额可视化:用饼图/圆环图展示产品或市场细分分布
  • 预算构成:以饼图切片及百分比展示费用类别
  • 调查结果:按比例可视化调查响应分布
  • 状态分布:展示项目状态分布(已完成、进行中、待处理等)
  • 销售业绩:按地区或产品类别比较销售
  • 库存水平:展示各仓库或类别的库存分布
  • 仪表盘分析:在业务分析仪表盘中嵌入饼图/圆环图

限制

资料未提供该组件的授权、收费、价格、平台兼容性、性能上限或浏览器支持等具体限制信息,暂未提供。