Javascript 反向海图热图图例

一张高温图。请注意，右侧图例中的数字从下到上递增。默认情况下，它们从上到下递增，但我用

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
},

---

您需要修改所谓的

colorAxis

。它具有此处列出的默认属性。因此，对于您提供的示例链接，您需要设置：

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

---

它不同于

legend

属性，对于

colorAxis

来说，它只是处理

colorAxis

项的位置/对齐。要修改

colorAxis

的内容，您必须编辑属性。

它在主分支中是固定的

<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/heatmap.js"></script>

---

谢谢您的回复，我尝试了您的解决方案，但现在我遇到了另一个问题。我用一个演示来更新我的问题，演示了我的新问题。如果你能有任何进一步的建议，他们将不胜感激。@dónal这似乎是一个已知的问题。您还需要翻转颜色轴

停止点

以使其与现在相反。翻转停止点并不能解决问题谢谢！这对我很有效，将reversed属性放在coloraxis元素中。