SuperAPI AI 工具集

syncfusion-aspnetcore-heatmap-chart

通用与其它

查看项目

更新于 10-16 03:03

技能介绍

用途:在 ASP.NET Core Razor Pages 中集成 Syncfusion HeatMap Chart,通过颜色强度呈现二维数据,每个单元格对应一个值,颜色按配置的调色板计算。适用于销售业绩矩阵、出勤与生产力报告、相关性矩阵、温度或密度可视化、库存状态仪表板、传感器读数网格及活动分析等。

主要能力:支持二维数组、JSON 表格数据、JSON 单元格数据、远程数据及强类型 C# 模型集合绑定;支持分类、数值、日期时间轴;支持渐变与固定调色板;支持单元格标签、图例与工具提示;支持 SVG、Canvas 和 Auto 渲染模式;支持单选与多选单元格;支持 cellRender、tooltipRender、cellSelected 等事件定制;支持气泡热图,可按大小、颜色、扇区或大小加颜色区分单元格。

使用方式:需安装 Syncfusion ASP.NET Core 包并注册 Tag Helper。在 Pages/_ViewImports.cshtml 中加入 @addTagHelper *, Syncfusion.EJ2;在 Pages/Shared/_Layout.cshtml 的 head 标签内引用主题与脚本,如 https://cdn.syncfusion.com/ej2/33.2.3/fluent.css 和 https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js,并在 body 结束标签前加入 <ejs-scripts></ejs-scripts>。推荐将数据、调色板、字体样式与强类型模型放在 Index.cshtml.cs,在 Index.cshtml 中通过 @Model 绑定,用 @Model.PropertyName 引用。快速上手时,可在 Index.cshtml 使用 <ejs-heatmap> 标签并配置 dataSource、showTooltip、renderingMode、allowSelection、enableMultiSelect,配合 e-heatmap-titlesettings、e-heatmap-xaxis、e-heatmap-yaxis、e-heatmap-datasourcesettings、e-heatmap-cellsettings、e-heatmap-palettesettings、e-heatmap-legendsettings、e-heatmap-tooltipsettings 等子标签。

适用场景:分类轴适合月份、产品、团队、地区、部门等命名标签;渐变调色板适合分数、密度、温度、流量强度、利用率或绩效等连续值;固定调色板适合风险等级、可用状态、SLA 状态或阈值分类。

限制与注意:命名空间需在 Index.cshtml.cs、Index.cshtml 与 _ViewImports.cshtml 中保持一致;.cshtml 文件中必须使用真实 Razor/HTML 标签,不要粘贴编码后的标签;固定调色板等 @Model 属性必须先在 PageModel 中定义;大数据集可设 showLabel="false",并用 renderingMode="Auto" 或 Canvas 改善性能;数据复用时建议用强类型类而非匿名对象。资料未提供具体收费、价格与授权信息。