2020. 1. 3. 09:30
Chart.js Pie 데이터 값 출력 개발/Chart.js2020. 1. 3. 09:30
반응형
어제 통계를 살펴보니, 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 값이 표시될 위치를 지정할 수 있습니다.
또한, Pie 차트뿐만 아니라 Doughnut, polarArea, Bar 차트에서도 사용 가능합니다.
출처 : https://stackoverflow.com/questions/42164818/chart-js-show-labels-on-pie-chart
반응형
'개발 > Chart.js' 카테고리의 다른 글
| Chart.js에서 사용자 범례에 기존 범례기능(누르면 숨김/보이기 토글) 넣기 (0) | 2019.01.09 |
|---|---|
| Chart.js에서 사용자 범례 만드는 법 (0) | 2019.01.09 |
| Chart.js에서 그래프 위에 값 그리는 법 (2) | 2017.12.12 |
| Chart.js에서 도넛/반도넛 차트 가운데에 숫자 적는 법 (0) | 2017.12.12 |
| Chart.js에서 반도넛 그래프 그리는 법 (9) | 2017.12.12 |
