Highcharts Heatmap轴值间隔大于1时如何消除区块之间的空隙

问题根源 #

热图默认每个数据块在x轴、y轴上占据的单位长度为1，当你的Y轴数值间隔大于1时，单个数据块仅覆盖1单位长度，剩余空间就会显示为空白。

解决方案 #

提供两种可直接落地的实现方式，按需选择即可：

方式1：配置rowsize适配间隔（推荐，无需修改原始数据） #

直接在series配置项中新增rowsize参数，设置为你的Y轴数值间隔即可，你当前场景间隔为5，修改如下：

series: [{
    name: 'Report Data For Input 1',
    borderWidth: 1,
    rowsize: 5, // 新增该行，适配Y轴5单位的间隔
    data: arraydata,
    dataLabels: {
        enabled: false,
        color: '#000000'
    }
}]

如果后续X轴也出现非连续间隔的情况，同理新增colsize参数配置X轴间隔即可。

方式2：离散类别轴映射索引 #

如果你使用Y轴categories作为离散标签，可将原始数据中Y轴的实际数值替换为对应类别的索引，即可让区块占满全部空间：

// 先建立Y轴数值和类别索引的映射
const yCats = ['5', '10', '15', '20', '25'];
const yMap = {};
yCats.forEach((val, idx) => yMap[val] = idx);
// 处理原始数据，替换Y值为索引
const formattedData = arraydata.map(item => [item[0], yMap[item[1]], item[2]]);

// 图表配置中使用处理后的数据
series: [{
    name: 'Report Data For Input 1',
    borderWidth: 1,
    data: formattedData,
    dataLabels: {
        enabled: false,
        color: '#000000'
    }
}]

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