다음은 highcharts는 히트 맵에 대한 데모입니다 :이 highcharts.js 코드의 문제점은 무엇입니까?

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/가 왜 내 값이 노란색이어야하는 범위로 들어가면 파란색 음영으로 렌더링됩니다.

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

자바 스크립트 코드 :

$(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 
       } 
      } 
     }] 

    }); 
});

출처

2014-07-10 conorgriffin

이 때문에 정지에 실제로있다. 최소/최대의 값으로 1.0/1.0입니다. 그래서 아래 코드는 작동 :

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

는 http://jsfiddle.net/conorgriffin/t44mP/2/

를 참조하십시오

출처

2014-07-10 12:29:25 conorgriffin

이 highcharts.js 코드의 문제점은 무엇입니까?

HTML 코드 :

자바 스크립트 코드 :

답변

관련 문제