这个highcharts.js代码有什么问题？

Question

以下是热图的highcharts演示：

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 code：

<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/