這個highcharts.js代碼有什么問題？

Question

這是熱圖的高圖演示：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/maps/demo/heatmap/

...這是我正在處理自己的數據的示例：

http://jsfiddle.net/conorgriffin/t44mP/1/

1. 當值進入應為黃色的范圍時，為什么我的正方形僅以藍色陰影渲染？

2. 當我編碼以下colorAxis值時，為什么在比例尺上僅渲染兩種顏色？

    colorAxis: { stops: [ [0, '#3060cf'], [10, '#fffbbc'], [20, '#c4463a'] ], min: 0 } 

HTML代碼：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript代碼：

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,
        },

        title: {
            text: '<b>Enterprise Data Services: Errors per service per device today</b>'
        },

        xAxis: {

            categories: ['STAGEESB1', 'STAGEESB2', 'STAGEESB3',
                         'STAGEESB4', 'STAGEESB5', 'STAGEESB6'],
            title: 'Service'
        },

        yAxis: {
            categories: ['EnterpriseDSReferenceV1.0.0', 
                         'EnterpriseDSCustomer_A', 
                         'EnterpriseDSProduct_A', 
                         'EnterpriseDSGeography_A',
                         'EnterpriseDSDMSOrganizationCUD'],
            title: 'Device'
        },

        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [10, '#fffbbc'],
                [20, '#c4463a']
            ],
            min: 0
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

        tooltip: {
            formatter: function () {
                return '<b>' + 
                    this.series.xAxis.categories[this.point.x] +
                    '</b> had <b>' + this.point.value + '</b> errors on <br><b>' +
                    this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            borderWidth: 0,
            data: [[0,0,10],[0,1,19],[0,2,8],[0,3,24],[0,4,67],
                   [1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],
                   [2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],
                   [3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],
                   [4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],
                   [5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120]],
            dataLabels: {
                enabled: true,
                color: 'white',
                style: {
                    textShadow: 'none',
                    HcTextStroke: null
                }
            }
        }]

    });
});

Answer 1

這實際上是由於停車。 從最小到最大，它們的值是1.0。 因此，以下代碼有效：

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a']
        ],
        min: 0
    }

參見http://jsfiddle.net/conorgriffin/t44mP/2/