최고 등급의 스냅 샷 차트를 생성하는 방법은 무엇입니까?

Question

아래와 같이 jquery 라이브러리를 사용하여 최고 등급의 스냅 샷 차트를 생성하고 싶습니다. 그러나 지금까지는 차트의 맨 위 부분 만 생성하는 데 성공했습니다 (예제 이미지에서 "Salary"). Here is my first attempt using Hicharts (코드 아래),

나는 타일 차트 스타일의 다양한 수치 등급 ("보스 평가"의 예에서 등 "이유"를 보여주는 아래 부분을 포함하는 방법을 모른다 영상).

아래 부분은 heatmap을 사용하여 포함 할 수 있지만 위의 플롯과 결합하는 방법을 모르겠습니다.

누적 형 차트 플롯 아래에 레이블이있는 타일을 포함시키는 것이 어떻게 가능합니까? Hicharts를 사용할 수없는 경우 다른 jQuery 라이브러리를 사용할 수도 있습니다. 다음은

내가 지금까지 무엇을의 예제 코드입니다 :

---

HTML :

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

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

자바 스크립트 :

Highcharts.chart('container', { 
    chart: { 
     type: 'area', 
     spacingBottom: 20 
    }, 
    title: { 
     text: 'Fruit consumption *' 
    }, 
    subtitle: { 
     text: '* Jane\'s banana consumption is unknown', 
     floating: true, 
     align: 'right', 
     verticalAlign: 'bottom', 
     y: 15 
    }, 
    legend: { 
     layout: 'horizontal', 
     align: 'bottom', 
     verticalAlign: 'bottom', 
     x: 150, 
     y: 100, 
     floating: false, 
     borderWidth: 1, 
     backgroundColor: (Highcharts.theme &&  
          Highcharts.theme.legendBackgroundColor) || 
         '#FFFFFF' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 
        'Grapes', 'Plums', 'Strawberries', 'Raspberries'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Y-Axis' 
     }, 
     labels: { 
      formatter: function() { 
       return this.value; 
      } 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
      this.x + ': ' + this.y; 
      } 
    }, 
    plotOptions: { 
     area: { 
      fillOpacity: 0.5 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
      name: 'John', 
      data: [4,5] 
     }, { 
      name: 'Jane', 
      data: [2,2], 
     }, { 
      name: 'Jane', 
      data: [1,1],   
     }, { 
      name: 'Jane', 
      data: [null,null,4,6],  
     }, { 
      name: 'Jane', 
      data: [null,null,2,2], 
     }, { 
      name: 'Jane', 
      data: [null,null,1,1],  
    }] 
    }); 

Answer 1

이 라이브 데모를 참조하십시오http://jsfiddle.net/kkulig/us14vpa7/

hetmap 시리즈에 대해 별도의 y 축을 만들고 주 축의 높이를 '70%'으로 설정하여 눈금이 0보다 작은 값의 눈금이 표시되지 않도록했습니다. linkedTo은 보조 축이 기본 축과 동일한 극단을 갖게합니다 (히트 맵 시리즈는 영역 시리즈에 겹쳐지지 않습니다).

모든 영역 시리즈에는 해당 히트 맵 시리즈가 있습니다.

// first block 
{ // area series 
    type: 'area', 
    data: [ 
    [0, 0], 
    [0, 4], 
    [1.5, 7], 
    [1.5, 0] 
    ], 
    marker: { 
    enabled: true 
    } 
}, { // corresponding heatmap series 
    type: 'heatmap', 
    data: [ 
    [0.75, -0.5, 0], 
    [0.75, -1.5, 0] 
    ], 
    colsize: 1.5 
} 

---

API 참조 :

• https://api.highcharts.com/highcharts/series.heatmap.colsize
• https://api.highcharts.com/highcharts/yAxis.linkedTo

히트 맵에서 colsize 속성은 최저 및 해당 영역 시리즈에서 가장 높은 x 값 사이의 거리