Highcharts热力图无法显示数据问题求助

我尝试构建Highcharts热力图，但数据仅显示标签，热力图区块无法展示，作为前端JavaScript新手，可能遗漏了部分配置。相关代码如下：

<!doctype html>
<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/boost-canvas.js"></script>
    <script src="https://code.highcharts.com/modules/boost.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>

<div id="container"></div>

<script>
    Highcharts.chart('container', {

        chart: {
            type: 'heatmap'
        },

        boost: {
            useGPUTranslations: true
        },

        xAxis: {
            type: 'datetime',
        },

        yAxis: {
            title: {
                text: null
            },
            labels: {
                format: '{value}'
            },
            tickWidth: 1,
            min: 17000,
            max: 25000
        },

        colorAxis: {
            stops: [
                [-10000, '#3060cf'],
                [0, '#ffffff'],
                [10000, '#c4463a']
            ],
            min: -10000,
            max: 10000,
        },

        series: [{
            name: 'Stop losses',
            data: {{ csv }},
            nullColor: '#FFFFFF'
        }]

    });
</script>

</body>
</html>

问题根源及修复步骤： #

• 容器无高度：热力图需要明确的容器高度才能渲染区块，给container添加样式：<div id="container" style="height: 600px; width: 100%;"></div>
• CSV数据未正确解析：直接传入CSV字符串不符合热力图要求的[x轴值, y轴值, 热力值]数组格式，需用Highcharts.data.parseCSV解析CSV，并将日期字符串转为时间戳适配datetime类型x轴。
• Boost模块兼容性：Boost模块用于大数据量加速，但和热力图配合易出现渲染异常，可暂时禁用该模块。

修改后的完整代码： #

<!doctype html>
<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>

<div id="container" style="height: 600px; width: 100%;"></div>

<script>
    // 替换为你的实际CSV数据
    const csvData = `2023-01-01,18000,-5000
2023-01-02,19000,3000
2023-01-03,20000,-2000
2023-01-04,21000,6000
2023-01-05,22000,-1000`;

    // 解析CSV并转换日期为时间戳
    const parsedData = Highcharts.data.parseCSV(csvData).map(row => {
        return [
            Date.parse(row[0]), // 转datetime时间戳
            parseInt(row[1]),   // y轴数值
            parseInt(row[2])    // 热力值
        ];
    });

    Highcharts.chart('container', {
        chart: {
            type: 'heatmap'
        },

        xAxis: {
            type: 'datetime',
            labels: {
                format: '{value:%Y-%m-%d}' // 格式化日期显示
            }
        },

        yAxis: {
            title: {
                text: null
            },
            labels: {
                format: '{value}'
            },
            tickWidth: 1,
            min: 17000,
            max: 25000
        },

        colorAxis: {
            stops: [
                [-10000, '#3060cf'],
                [0, '#ffffff'],
                [10000, '#c4463a']
            ],
            min: -10000,
            max: 10000,
        },

        series: [{
            name: 'Stop losses',
            data: parsedData,
            nullColor: '#FFFFFF'
        }]
    });
</script>

</body>
</html>

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