如何基于值为Blazor FluentDataGrid单元格设置样式实现热图效果？

算力阿峰

2026-6-16

Blazor FluentDataGrid 无JS热图实现方案

核心思路：通过单元格模板绑定CSS变量

利用CellTemplate获取每行数据的MyValue，动态设置CSS自定义属性，再用CSS的calc()计算热图颜色，全程无需编写JavaScript。

实现代码

1. 网格组件修改

替换原PropertyColumn的默认渲染逻辑，改用自定义单元格模板：

<FluentDataGrid Items="@Items?.AsQueryable()">
    <PropertyColumn Title="Value">
        <CellTemplate>
            <div class="heatmap-cell" style="--intensity: @context.Item.MyValue">
                @context.Item.MyValue.ToString("F2")
            </div>
        </CellTemplate>
    </PropertyColumn>
</FluentDataGrid>

context.Item直接指向当前行的数据对象，可直接获取MyValue并绑定到--intensity变量。

2. CSS热图样式

基于HSL颜色模型实现渐变效果，以下是从蓝色（低数值）到红色（高数值）的示例：

.heatmap-cell {
    padding: 0.5rem;
    /* 色调从240（蓝色）线性过渡到0（红色），饱和度100%，亮度50% */
    background-color: hsl(calc(240 - (var(--intensity) * 240)), 100%, 50%);
    color: white;
    text-align: right;
}