反转 Highcharts 热力图图例

Question

这是一个 Highcharts 热力图的 JSFiddle演示。请注意，右侧图例中的数字从下到上递增。默认情况下，它们从上到下递增，但我通过以下方式进行了更改

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

- Dónal

Answer 1

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

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

这与 图例 属性不同，对于一个 colorAxis 来说，它只处理 colorAxis 项的位置和对齐方式。如果要修改 colorAxis 的功能，则需要编辑 colorAxis 属性。

- wergeld

---

谢谢您的回复，我尝试了您的解决方案，但现在我遇到了不同的问题。我已经更新了我的问题，并提供了一个演示来说明我的新问题。如果您有任何进一步的建议，将不胜感激。 - Dónal

@Dónal 这是一个已知的问题。您还需要翻转您的颜色轴“stops”，使其与现在相反。 - wergeld

翻转停止位并不能解决问题。 - Dónal

谢谢！这对我有用，将反转属性放在coloraxis元素中。 - Graph

Answer 2

已在主分支中修复。

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

http://jsfiddle.net/egk1xq2L/12/

- Sebastian Bochan