Chart.js Pie 데이터 값 출력

어제 통계를 살펴보니, pie 데이터 값 출력이라는 정보를 찾는 키워드를 발견하여 글 작성합니다.

piece label이라는 Chart.js 확장 플러그인을 사용하면 되는데,

https://github.com/emn178/chartjs-plugin-labels/tree/master/src

위 링크를 타고 들어가면 js가 있습니다.

 

사용법은 아래와 같습니다.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="/com/js/Chart.PieceLabel.js"></script> <!-- your piecelabel -->
<script type="text/javascript">
var num = Math.random();
  var data = {
      labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      datasets: [
          {
              data: [
                Math.random(),
                Math.random(), 
                Math.random(), 
                Math.random(), 
                Math.random(), 
                Math.random(), 
                Math.random(),
                Math.random(),
                Math.random(),
                Math.random()
              ],
              backgroundColor: [
      	        "#f79546",
       	        "#9bba57",
                "#4f81bb",
                "#5f497a",
                "#a94069",
                "#ff5f34",
                "#41774e",
                "#003663",
       	        "#49acc5",
       	        "#c0504e"
              ],
	          borderWidth: 0,
	          label: "Dataset 1"
          }]
  };
   
  window.onload = function() {
    var ctx8 = $('#chart8').get(0).getContext("2d");
    window.theChart8 = new Chart(ctx8, {
        type: 'pie',
        data: data,
        options: {
                responsive: true,
                legend: false,
                maintainAspectRatio : false,
                animation: false,
                pieceLabel: {
                  mode:"label",
                  position:"outside",
                  fontSize: 11,
                  fontStyle: 'bold'
               }
        }
    });
</script>
<div style="width:150px">
  <canvas id="chart8"></canvas>
</div>

간단히 설명하자면, options의 pieceLabel이 Pie 차트의 데이터 값을 표시하는 기능입니다.

mode에 따라 label/value/percentage(default)/image를 표시할 수 있고

position에 따라 default(default)/border/outside 값이 표시될 위치를 지정할 수 있습니다.

position : default / outside

또한, Pie 차트뿐만 아니라 Doughnut, polarArea, Bar 차트에서도 사용 가능합니다.

 

출처 : https://stackoverflow.com/questions/42164818/chart-js-show-labels-on-pie-chart