如何避免Highcharts热力图数据较少时列拉伸至整个图表宽度？

要避免单行数据时热力图单元格被拉伸至满宽度，核心是强制固定每个单元格的尺寸，以下是两种可行方案：

方案一：直接固定单元格宽高 #

通过配置series的pointWidth（单元格宽度）和pointHeight（单元格高度）属性，直接定义每个热力单元格的固定尺寸。无论数据行数多少，单元格都会保持设定的大小，不会随图表容器拉伸。

修改后的代码示例：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },
        title: {
            text: '月度数据热力图'
        },
        xAxis: {
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            tickWidth: 1,
            tickLength: 0,
            categories: ['2024年'],
            title: null
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        series: [{
            name: '月度数据',
            borderWidth: 4,
            // 固定单元格宽高
            pointWidth: 45,
            pointHeight: 35,
            data: [
                [0, 0, 15],
                [1, 0, 22],
                [2, 0, 18],
                [3, 0, 25],
                [4, 0, 19],
                [5, 0, 28],
                [6, 0, 30],
                [7, 0, 27],
                [8, 0, 21],
                [9, 0, 17],
                [10, 0, 23],
                [11, 0, 20]
            ],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]
    });
});

方案二：限制绘图区域宽度并启用滚动（可选） #

如果希望单元格尺寸随数据量自适应，但单行时不拉伸，可通过配置chart.scrollablePlotArea设置绘图区域的最小宽度，超出部分允许横向滚动。这种方式适合数据列数较多的场景，避免单元格被过度压缩或拉伸。

示例配置（添加到chart配置项中）：

scrollablePlotArea: {
    minWidth: 12 * 50 // 12列 × 每列50px基础宽度，可按需调整
}

说明 #

• 方案一适合需要严格固定单元格尺寸的场景，调整pointWidth和pointHeight的数值即可匹配需求。
• 方案二更灵活，当数据列数变化时，绘图区域会自动适配，单行时保持每列的基础宽度，不会拉伸填满容器。

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