Highcharts地图如何按归一化值设色同时显示原始值作为标签

核心逻辑是给每个地图数据项同时存储原始数值和归一化数值两个独立字段，分别用于标签展示和颜色匹配，两者互不干扰。 #

步骤1：预处理数据，生成双字段的地图数据集 #

// 原始数据集
const rawData = [
    ['gl', 2584],
    ['sh', 100201],
    ['bu', 2025],
    ['lk', 30336],
    ['as', 41225],
    ['dk', 500],
    ['fo', 655225],
    ['gu', 7555],
    ['mp', 85454],
    ['um', 90147],
    ['us', 10087]
]
// 提取所有数值计算最值，用于归一化
const valueList = rawData.map(item => item[1])
const minValue = Math.min(...valueList)
const maxValue = Math.max(...valueList)
// 构造适配Highcharts的地图数据
const processedData = rawData.map(item => {
    const [areaCode, originalValue] = item
    // 归一化计算得到0-1区间值
    const normalizedValue = (originalValue - minValue) / (maxValue - minValue)
    return {
        'hc-key': areaCode, // Highcharts世界地图的地区编码匹配字段
        value: originalValue, // 存储原始值，用于后续标签展示
        normalizedScore: normalizedValue // 存储归一化值，仅用于颜色匹配
    }
})

步骤2：配置Highcharts地图参数 #

通过colorAxis.valueKey指定颜色计算用归一化字段，标签和提示框直接读取原始值字段即可：

Highcharts.mapChart('mapContainer', {
    chart: {
        map: 'custom/world' // 对应你引入的世界地图资源名
    },
    // 颜色轴配置，按归一化值匹配颜色
    colorAxis: {
        valueKey: 'normalizedScore', // 指定颜色计算的数据源为归一化字段
        dataClasses: [
            { from: 0, to: 0.15, color: 'green' },
            { from: 0.15, to: 0.3, color: 'yellow' },
            { from: 0.3, to: 0.6, color: 'orange' },
            { from: 0.6, to: 1, color: 'red' }
        ]
    },
    plotOptions: {
        map: {
            dataLabels: {
                enabled: true,
                format: '{point.value}' // 地图标签直接展示原始数值
            }
        }
    },
    tooltip: {
        pointFormat: '地区：{point.name} <br> 数值：{point.value}' // 提示框也可自定义展示原始值
    },
    series: [{
        data: processedData
    }]
})

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