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]),
                                });
                            });
                        }
                    }

"Value" 始终介于 0 和 1 之间。我添加了一个工具提示，当悬停在某个点上时显示 "value"。

我指定色标如下（它是

橙色：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
},

Highcharts 热图不会根据指定的色标呈现正确的颜色

Highcharts heatmap does not render correct colours according to specified colour stops

heatmap

highcharts