javascript - 反向 highcharts 热图图例

Question

Here's a JSFiddle demo Highcharts 热图。请注意，右侧图例中的数字从下到上增加。默认情况下，它们从上到下增加，但我将其更改为

colorAxis: {
    reversed: false
}

但是，我现在遇到的问题是图例上的颜色与热图本身的颜色不匹配。例如，图例表示红色是最低值，但热图使用红色表示最高值。

演示中最相关的代码是:

colorAxis: {
    reversed: false,
    min: 0,
    stops: [
        [0, '#00FF00'],
        [0.5, '#FF8000'],
        [1, '#FF0040']
    ]
},

legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 320,

    // I tried setting this to true and false but neither fix my problem
    // reversed: true
},

Answer 1

您需要修改所谓的colorAxis。它具有此处列出的 reversed 的默认属性.因此，对于您提供的此示例链接，您需要设置:

colorAxis: {
    reversed: false,
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
},

它与 legend 属性不同，colorAxis 只是处理 colorAxis 项的位置/对齐方式。要修改 colorAxis 你必须编辑 colorAxis属性。