Highcharts热图颜色与图例不匹配

Question

我是高级图表的新手，但我似乎对大热图的显示有问题。图例中的颜色似乎与实际图表中的颜色不匹配。

以下是我的图表配置代码。

function load_team_effort_by_day_of_week_heat_map(ele, config)
{
    var self = $(ele);
    var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"]
    load_data(self, function(response)
    {
        var div = $("<pre/>")
            .attr("id","csv")
            .css("display","none");

        div.html(response.data);
        $("body").append(div);

       var chart_container = self.attr("chart-container");
       $("#"+chart_container).css("width","100%");
        var min = new Date(response.min)
        var max = new Date(response.max)
        var max_value = response.max_range
        var mid_range = parseFloat(max_value/4);
        Highcharts.chart(chart_container, {

            data: {
                csv: document.getElementById('csv').innerHTML
            },

            chart: {
                type: 'heatmap',
                margin: [60, 10, 80, 50]
            },

            boost: {
                useGPUTranslations: true
            },

            title: {
                text: '',
                align: 'left',
                x: 40
            },

            subtitle: {
                text: '',
                align: 'left',
                x: 40
            },

            xAxis: {
                title: {
                    text: config.xlabel
                },
                type: 'datetime',
                min: Date.UTC(min.getFullYear(), min.getMonth(), min.getDate()),
                max: Date.UTC(max.getFullYear(), max.getMonth(), max.getDate()),
                labels: {
                    align: 'left',
                    x: 5,
                    y: 14,
                    format: '{value:%b-%d-%Y}' // long month
                },
                showLastLabel: false,
                tickLength: 16
            },

            yAxis: {
                title: {
                    text: config.ylabel
                },
                labels: {
                    format: '{value}'
                },
                minPadding: 0,
                maxPadding: 0,
                startOnTick: false,
                endOnTick: false,
                tickPositions: [0, 1, 2, 3, 4, 5, 6],
                tickWidth: 1,
                min: 0,
                max: 6,
                reversed: true
            },

            colorAxis: {
                stops: [
                   [0, '#EEEEEE'],
                    [mid_range, '#00ee33'],
                    [max_value, '#00ee33']
                ],
                min: 0,
                max: max_value,
                startOnTick: false,
                endOnTick: false,
                labels: {
                    format: '{value}'
                }
            },
            tooltip: {
                formatter: function () {
                    var d = new Date(this.point.x)
                    var todate=d.getDate();
                    var tomonth=d.getMonth()+1;
                    var toyear=d.getFullYear();
                    var original_date=tomonth+'/'+todate+'/'+toyear;
                    return '<b>' + original_date + ', <b>' +
                        this.point.value + '</b> on <br><b>' + days[this.point.y] + '</b>';
                }
            },
            series: [{
                boostThreshold: 100,
                borderWidth: 0,
                nullColor: '#EEEEEE',
                colsize: 7 * 24 * 36e5, // one week
                turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
            }]

        });

        self.parents('.white-background').removeClass("loadingdv");
        self.parents('.white-background').find(".lodimg").remove();
        //Remving extra div for legends on rite side
        self.parents('.white-background').find(".legendcontainer").remove();
    });
}