2017-11-09 11 views
0

비율은 차트의 부분 대 전체 관계를 나타내는 데 사용됩니다.하이 차트 : 일광욕 차트에서 백분율 점유율을 표시하여 파이 차트와 같은 부분 별 관계를 나타낼 수 있습니까?

전체 차트에 대한 비율 점유율을 보여 파이 차트 계열의 데이터 레이블에 사용되는 point.percentage 속성을 관찰 : http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/

plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     dataLabels: { 
      enabled: true, 
      format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
      style: { 
       color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
      } 
     } 
    } 
} 

나는 다음과 달성하고자하는 : Sunburst chart with percentage share 이 예제의

참조 : https://www.grapecity.com/en/blogs/sunburst-chart-roadmap-what-would-you-like-to-see

내가 일을 알고 학부모 및 전체 차트와 관련하여 상기 백분율 몫에서 각 값을 수동으로 설정하여 얻을 수 있습니다. 그러나 수동 계산이 필요합니다.

Highcharts가 선 버스트 차트의 point.percentage를 지원하는지 알고 싶습니다. API 참조에서 제공되지 않았고 JS Fiddle에서 예제를 디버깅하는데도 사용하지 않았습니다. 다른 방법으로 구현할 수 있습니까? 당신이 dataLabels.formatter를 사용하는 경우 https://api.highcharts.com/class-reference/Highcharts.Point#.percentage

그러나, 각 슬라이스에 대한 백분율을 계산하기 쉽게 :

답변

1

아니, point.percentage는 스택 시리즈 또는 파이입니다.

비율 공유 WRT 부모 슬라이스

dataLabels: { 
    formatter: function() { 
     var point = this.point, 
      group = this.series.data.filter(x => x.parent === point.parent); 

     var groupTotal = group.map(x => x.value).reduce((a, b) => a + b, 0), 
      percentage = 100 * point.value/groupTotal; 

     return point.name + '<br>' + percentage.toFixed(1) + '%'; 
    }, 
}, 

http://jsfiddle.net/cre0psov/1/

+0

감사에 대한 : 포매터 기능, 당신은 현재의 슬라이스 (point)와 차트 데이터의 모든 나머지에 액세스 할 수 있습니다 너의 대답! JS Fiddle 예제가 유용합니다. – Ams

+0

반가워요! 이 방법으로 문제가 해결되면 [답변 수락] (https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)을 클릭하십시오. 당신이 여기서도 물어 보았던 다른 질문들에 대해 그렇게하는 것을 고려하십시오. – Sphinxxx