Anychart：如何为热力图中无数据的单个单元格添加样式？

要给单个无数据的单元格设置样式，你需要先补全数据中缺失的条目，再通过单元格的条件样式配置来实现，具体步骤如下：

1. 补全缺失的数据项 #

首先把热力图中所有存在的x/y组合都补全到数据里，对于无数据的项，将heat设为null或者undefined。比如你示例里的Ils对应的2004、2005年，需要添加到getData函数的返回数组中：

function getData() {
    return [
        // 原有数据保持不变
        {x: 'Cal', y: '2004', heat: 1704211},
        {x: 'Cal', y: '2005', heat: 2782680},
        {x: 'Cal', y: '2006', heat: 2992679},
        {x: 'Il', y: '2004', heat: 727914},
        {x: 'Il', y: '2005', heat: 1150659},
        // 补全Ils的缺失年份
        {x: 'Ils', y: '2004', heat: null},
        {x: 'Ils', y: '2005', heat: null},
        {x: 'Ils', y: '2006', heat: 1134085},
        {x: 'Massachusetts', y: '2004', heat: 238819},
        {x: 'Massachusetts', y: '2005', heat: 157719},
        {x: 'Massachusetts', y: '2006', heat: 887169},
        {x: 'New York', y: '2004', heat: 1667969},
        {x: 'New York', y: '2005', heat: 2763503},
        {x: 'New York', y: '2006', heat: 3151022},
        {x: 'Texas', y: '2004', heat: 219967},
        {x: 'Texas', y: '2005', heat: 3732889},
        {x: 'Texas', y: '2006', heat: 4185098}
    ]
}

2. 为无数据单元格设置样式 #

使用chart.cell().fill()方法，传入一个函数来判断当前单元格的heat值是否为空，为空则设置自定义样式：

anychart.onDocumentReady(function () {
    var data = getData();

    var chart = anychart.heatMap(data);

    // 设置无数据单元格的填充样式
    chart.cell().fill(function() {
        // 判断heat值是否为null/undefined
        if (this.heat == null) {
            return '#e0e0e0'; // 灰色填充
        }
        // 有数据的单元格使用默认颜色
        return this.sourceColor;
    });

    // 可选：设置无数据单元格的边框样式
    chart.cell().stroke(function() {
        if (this.heat == null) {
            return '#999'; // 深灰色边框
        }
        return this.sourceStroke;
    });

    // 原有配置保持不变
    chart.width('50%');
    chart.height('30%');
    chart.title('Set chart width and height');
  
    chart.container('container');
    chart.draw();
});

另一种方式：使用颜色映射表 #

如果你希望通过颜色刻度来统一管理样式，可以给空值单独设置一个颜色区间：

// 创建颜色刻度
var colorScale = anychart.scales.linearColor();
colorScale.colors(['#f0f0f0', '#ffcccc', '#ff6666', '#cc0000']);
// 为null值设置专属颜色
colorScale.nullColor('#e0e0e0');

// 应用到图表
chart.colorScale(colorScale);

这样就能精准控制单个无数据单元格的样式了，不需要依赖全局的noData配置。

内容的提问来源于stack exchange，提问作者Julia