Highcharts热图不会根据指定的色标显示正确的颜色

Question

在Highcharts热图上，我按JSON格式指定数据如下：

                    var dataJson = [];
                    if (model.ActivityData != undefined) {
                        var index = 0;
                        if (model.ActivityData.length > 0) {
                            model.ActivityData.forEach(function(timeLineItem) {
                                dataJson.push({
                                    x: $scope.getChartDate(timeLineItem.Date.split("T")[0]),
                                    y: timeLineItem.IndicatorMeasure,
                                    value: Math.round(timeLineItem.Amount * 100) / 100,
                                    name: $scope.getChartDate(timeLineItem.Date.split("T")[0]),
                                });
                            });
                        }
                    }

“值”始终介于0和1之间。我在鼠标悬停在一个点上时添加了显示“值”的工具提示。

我指定颜色停止如下（它是

橙色：0 白色：0.5 绿色：1

                                    colorAxis: {
                                    stops: [
                                        [0, '#F9A847'],
                                        [0.5, '#ffffff'],
                                        [1, '#b1d4b1']
                                    ]
                                },

我希望低于0.5的任何值都是橙色，任何超过0.5的值都是绿色。但是，当图表被渲染时，某些高于0.5的值是橙色。

Highcharts是否明确使用“value”来设置颜色，如果是这样，为什么它不尊重指定的颜色顶部。或者，highcharts通过平均（或类似的东西）来调整颜色以确定颜色。

Answer 1

jsFiddle的现场演示。

从颜色轴可以看出，它从0.4延伸到0.7，这意味着您的中间色块实际上就轴值而言为0.55。轴极值基于数据值。

因此，为了使轴从0延伸到1，就像您可能期望的那样，您需要设置最小值和最大值。 View jsFiddle

colorAxis: {
    stops: [
        [0, '#F9A847'],
        [0.5, '#ffffff'],
        [1, '#b1d4b1']
    ],
    min: 0,
    max: 1
},