반응형
도넛 모양 원형 차트를 만들려고 합니다
chart.js를 사용하겠습니다
Chart.js | Open source HTML5 Charts for your website
New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.
www.chartjs.org
사이트로 들어가면 설치부터 사용 방법, 사용 가능한 옵션들까지 상세하게 정의되어 있다
npm, Bower, CDN 등 여러 가지 방법으로 설치하거나 가져와서 사용할 수 있다
나는 CDN으로 가져와서 사용했다
① CDN으로 chart.js 사용
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
② chart 영역 생성
<body>
<canvas id="myChart" width="300" height="186"></canvas>
</body>
③ 가장 기본적인 chart 생성
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [40, 60], // 섭취량, 총급여량 - 섭취량
backgroundColor: [
'#9DCEFF',
'#F2F3F6'
],
borderWidth: 0,
scaleBeginAtZero: true,
}
]
},
});
기본적으로 chart가 그려지는 animation이 적용돼 있다
이후에 원형 차트 중간에 text 넣기, chart 배경색을 그라데이션으로 넣기,
chart 끝부분을 round로 동그랗게 바꾸기, animation 시간 설정하기,
그리고 chart 선 끝부분에 image 혹은 icon 넣기
코드에 대해 작성할 것이다
반응형
'JavaScript' 카테고리의 다른 글
| [#. JavaScript] forEach와 map의 차이점을 알아보자 (0) | 2021.01.15 |
|---|---|
| [#. JavaScript] 정규표현식을 이용해서 input 입력 폼에서 소수점 첫째 자리까지만 입력할 수 있도록 막기 (0) | 2020.11.30 |
| [#. JavaScript] Math.pow(a, b) 제곱 구하기 (0) | 2020.11.19 |
| [#. JavaScript] 소수점 올림, 소수점 내림, 소수점 반올림, 소수점 반올림 후 숫자를 문자열로 변환 (0) | 2020.11.18 |
| [#. JavaScript] 문자를 숫자로 형변환하는 parseInt, Number의 차이 parseInt, parseFloat의 차이 (0) | 2020.11.18 |