Google 원형 차트에 백분율을 표시하고 싶습니다.

Question

내 jquery 3D Google 차트에 백분율을 표시하고 싶습니다 (첨부 된 이미지 참조). 어떻게 달성 할 수 있는지 알려주십시오.

아래 코드를 사용하여 jQuery Google 차트를 구현했습니다. 3D 차트를 받고 있지만 각 직설적 인 Google 차트에 백분율을 표시하고 싶습니다.

https://support.google.com/docs/answer/190726?hl=en

$('#pieChart').gchart({ 
    type : 'p3', 
    series : data, 
    legend : 'top', 
    dataLabels : [ 'HR', 'SRM', 'MM', 'SD' ], 
    pieSliceText: 'value', 
    // dataColors : [ 'red', 'lime', 'blue', 'green' ], 
    extension : { 
     chdl : 'HR|SRM|MM|SD', 
     chco : 'FF0000|00FF00|0000FF|BB0000', 
     chs : '450x100' 
    } 
}); 



/** 
* 
*/ 

$(function() { 

var data = [ $.gchart.series('2012', [ 16.1, 33.9, 25.4, 16.4 ]), 
     $.gchart.series('2013', [ 11.7, 34.1, 25.1, 22.1 ]) ]; 

var data1 = [ $.gchart.series('2012', [ 50.0, 25.4, 16.4 ]), 
     $.gchart.series('2013', [ 45.8, 25.1, 22.1 ]) ]; 

$('#pieChart').gchart({ 
    type : 'p3', 
    series : data, 
    legend : 'top', 
    dataLabels : [ 'HR', 'SRM', 'MM', 'SD' ], 
    pieSliceText: 'value', 
    // dataColors : [ 'red', 'lime', 'blue', 'green' ], 
    extension : { 
     chdl : 'HR|SRM|MM|SD', 
     chco : 'FF0000|00FF00|0000FF|BB0000', 
     chs : '450x100' 
    } 
}); 

$('input[name=pieType],#pieColours,#pieAngle').change(function() { 
    /* 
    * data[0].color = ($('#pieAngle').val() == 1 ? [ 'red', 'lime', 'blue', 
    * 'green' ] : null); 
    * 
    * data[1].color = ($('#pieAngle').val() == 2 ? [ 'ff8888', '88ff88', 
    * '8888ff' ] : null); 
    */ 
    $('#removeChart').toggle(function() { 
     $(this).text('Re-attach'); 
     $('#defaultChart').gchart('destroy'); 
    }, function() { 
     $(this).text('Remove'); 
     $('#defaultChart').gchart(); 
    }); 


    if (($('#pieAngle').val() == 1)) { 
     //alert($('#pieAngle').val()); 
     $('#pieChart').gchart('option', { 
      type : 'p3', 

      series : data1, 

      extension : { 
       chdl : 'HR|SRM|MM', 
       chco : '0000FF', 
       chs : '450x100' 
      } 
     }); 
    } else if (($('#pieAngle').val() == 2)) { 
     //alert($('#pieAngle').val()); 

     $('#pieChart').gchart('option', { 
      type : 'p3', 

      series : data, 

      /* 
      * pieOrientation : $('#pieAngle') .val(), 
      */ 

      extension : { 
       chdl : 'HR|SRM|MM|SD', 
       chco : 'FF0000|00FF00|0000FF|BB0000', 
       chs : '450x100' 
      } 
     }); 
    } else if (($('#pieAngle').val() == 3)) { 
     //alert($('#pieAngle').val()); 

     $('#pieChart').gchart('option', { 

      type : 'p3', 

      series : data1, 

      extension : { 
       chdl : 'HR|SRM|MM', 
       chco : 'ff8888 | 88ff88 | 8888ff| BB0000', 
       chs : '450x100' 
      } 
     }); 
    } else if (($('#pieAngle').val() == 10)) { 
     //alert($('#pieAngle').val()); 

     $('#pieChart').gchart('option', { 
      type : 'p3', 

      series : data, 

      extension : { 
       chdl : 'HR|SRM|MM|SD', 
       chco : 'FF0000|00FF00|0000FF|BB0000', 
       chs : '450x100' 
      } 
     }); 
    } 
}); 

}); Google Charts documentation에 언급 한 바와 같이

Answer 1

는 비율에 pieSliceText을 설정합니다.

Answer 2

gchart 플러그인에 전달하는 옵션이 주어지면 플러그인은 새로운 대화 형 차트 API가 아니라 사용되지 않는 이미지 차트 API를 사용한다고 생각합니다. 이미지 차트 API가 2015 년 4 월 20 일 오프라인으로 변경 될 예정이므로 최신 API 또는 다른 차트 API를 사용하는 것이 좋습니다.

즉, 원형 조각에 퍼센트 라벨을 사용하는 데 필요한 옵션은 다음과 같습니다. chl 옵션 이것은 예를 들어, 위해, 원형 조각에 적용 할 라벨의 파이프로 구분 된 문자열을 취합니다

는

chl: '10%|25%|35%|15%|10%|5%' 

이 이미지 차트 API 만 적용 입니다. 대화 형 차트 API는 Magnus Burton의 대답에서 지적한대로 pieSliceText 옵션을 사용합니다.