2017-10-24 1 views
0

웹 페이지의 데이터 시각화를 위해 chart.js (버전 2.7.0) 원형 차트를 사용하고 싶습니다. 나는 일반적으로 작동하는 파이 차트를 사용해야합니다. http://www.chartjs.org/samples/latest/charts/pie.html의 샘플 페이지에서 볼 수 있듯이 원형 차트 부분에는 마우스를 올려 놓았을 때만 볼 수있는 데이터가 없습니다. 부품 내에 직접 표시하고 싶습니다. 나는이 문서에서 아무것도 발견하지 못했습니다. 이것은 일반적으로 가능합니까? 그렇다면 어떻게해야합니까?Chart.js의 값 표시 원형 차트 부분

답변

0

예, 가능합니다. - Chart.PieceLabel.js이라는 Chart.js 플러그인을 사용하여이를 달성 할 수 있습니다.

var chart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
     data: [30, 40, 25], 
 
     backgroundColor: 'rgba(0,119, 220, 0.2)' 
 
     }] 
 
    }, 
 
    options: { 
 
     pieceLabel: { 
 
     render: 'value' //show values 
 
     } 
 
    } 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
 

 
<canvas id="ctx"></canvas>

이 플러그인에 대한 자세한하고 사용 사례를 here을 참조 알아 보려면 :

여기에 기본적인 예입니다.

관련 문제