Highcharts热力图需求：为单元格添加ID/数据属性以实现点击取值

Hey there! I’ve got you covered on this. The key here is to embed your custom data directly into each heatmap point when defining your series data, then access those properties in the click event. Here's how to do it step by step:

1. Add Custom Properties to Your Heatmap Data #

Highcharts lets you include custom fields in each data point object (instead of using plain arrays). For example, if you want to add a customId and additional cellDetails for each cell, structure your data like this:

series: [{
    name: 'Heatmap Data',
    borderWidth: 1,
    data: [
        { x: 0, y: 0, value: 15, customId: "heat-cell-00", cellDetails: "Q1 - North Region" },
        { x: 1, y: 0, value: 22, customId: "heat-cell-10", cellDetails: "Q2 - North Region" },
        { x: 0, y: 1, value: 30, customId: "heat-cell-01", cellDetails: "Q1 - South Region" },
        { x: 1, y: 1, value: 18, customId: "heat-cell-11", cellDetails: "Q2 - South Region" }
        // Add all your cells with their custom attributes here
    ],
    dataLabels: {
        enabled: true,
        color: '#000000'
    }
}]

2. Modify the Click Event to Retrieve Custom Data #

Update your click event handler to pull the custom properties directly from the clicked point object. You can still keep the existing axis category logic too:

plotOptions: {
    series: {
        events: {
            click: function (event) {
                // Grab custom properties from the clicked point
                const cellId = event.point.customId;
                const cellDetails = event.point.cellDetails;
                
                // Keep your original axis category values
                const axisLabels = `${event.point.series.yAxis.categories[event.point.y]}, ${event.point.series.xAxis.categories[event.point.x]}`;
                
                // Display all the info (or use it however you need)
                alert(`Cell ID: ${cellId}\nAxis Labels: ${axisLabels}\nDetails: ${cellDetails}`);
            }
        }
    }
}

Why This Works #

Highcharts preserves any custom properties you add to data point objects. When a cell is clicked, the event.point object contains all those extra fields, making them easy to access and use for your needs—whether that's sending data to an API, updating a UI panel, or anything else.

If you were originally using plain arrays for your data (like [x, y, value]), you can still convert those to the object format above to include your custom attributes. It’s more readable and gives you full control over each cell’s metadata.

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