반응형
# Chart.JS 레퍼런스
https://www.chartjs.org/docs/latest/samples/information.html
Information | Chart.js
Information Out of the box working samples These samples are made for demonstration purposes only. They won't work out of the box if you copy paste them into your own website. This is because of how the docs are getting built. Some boilerplate code gets hi
www.chartjs.org
# CDN
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
# 예제
https://pannellum.netlify.app/chartjs.html
chart 예제
pannellum.netlify.app
# 예제소스코드
<html>
<head>
<title>chart 예제</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
<h2 style="margin-left:25px">Chart.js</h2>
<hr>
<div style="width:100%;">
<div style="width:30%;float:left;margin-left:25px">
<canvas id="chartArea1" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">line 차트</span>
</div>
</div>
<div style="width:30%;float:left; margin-left:25px">
<canvas id="chartArea2" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">bar 차트</span>
</div>
</div>
<div style="width:30%;float:left; margin-left:25px">
<canvas id="chartArea6" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">mixed 차트</span>
</div>
</div>
</div>
<div style="width:100%;">
<div style="width:20%;float:left; margin-left:25px">
<canvas id="chartArea4" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">pie 차트</span>
</div>
</div>
<div style="width:20%;float:left; margin-left:25px">
<canvas id="chartArea7" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">doughnut 차트</span>
</div>
</div>
<div style="width:20%;float:left; margin-left:25px">
<canvas id="chartArea5" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">polarArea 차트</span>
</div>
</div>
<div style="width:20%;float:left; margin-left:25px">
<canvas id="chartArea3" ></canvas>
<div style="width:100%;text-align:center;">
<span style="font-size:15px;padding:3px 5px;background:#f4f45f;font-weight:bold">radar 차트</span>
</div>
</div>
</div>
</body>
<script>
var ctx1 = document.getElementById('chartArea1').getContext('2d');
new Chart(ctx1, typeChart('line'));
var ctx2 = document.getElementById('chartArea2').getContext('2d');
new Chart(ctx2, typeChart('bar'));
var ctx3 = document.getElementById('chartArea3').getContext('2d');
new Chart(ctx3, typeChart('radar'));
var ctx4 = document.getElementById('chartArea4').getContext('2d');
new Chart(ctx4, typeChart('pie'));
var ctx5 = document.getElementById('chartArea5').getContext('2d');
new Chart(ctx5, typeChart('polarArea'));
var ctx6 = document.getElementById('chartArea6').getContext('2d');
new Chart(ctx6, typeChart('mixed'));
var ctx7 = document.getElementById('chartArea7').getContext('2d');
new Chart(ctx7, typeChart('doughnut'));
function typeChart(chartType){
if(chartType == 'pie' || chartType == 'doughnut'){
var options = {
type: chartType,
data: {
labels: ["1월", "2월", "3월", "4월", "5월", "6월"],
datasets: [{
label: '사원 수',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
} else if(chartType == 'mixed'){
var options = {
type: chartType,
data: {
labels: ["1월", "2월", "3월", "4월", "5월", "6월"],
datasets: [{
type: 'bar',
label: '개발자 수',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)'
]
}, {
type: 'line',
label: '디자이너 수',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'rgb(175, 92, 92)'
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
} else {
var options = {
type: chartType,
data: {
labels: ["1월", "2월", "3월", "4월", "5월", "6월"],
datasets: [
{
label: '개발자 수',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 2,
borderColor: 'rgb(75, 192, 192)',
},
{
label: '디자이너 수',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 2,
borderColor: 'rgb(175, 92, 92)',
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
}
return options;
}
</script>
</html>
Chart.js
line 차트
bar 차트
mixed 차트
pie 차트
doughnut 차트
polarArea 차트
radar 차트
차트를 깔끔하게 사용할 수 있다.
'Web' 카테고리의 다른 글
| eGovFramework React 전자정부 프레임워크 프론트로 채택된 리액트 (0) | 2022.01.17 |
|---|---|
| exif-js 이미지의 메타데이터를 추출하는 스크립트 (0) | 2022.01.13 |
| codemirror 에디터 (2) | 2022.01.07 |
| pannellum js (0) | 2022.01.06 |
| WATCH 2.0 / 웹접근성 진단 도구 (0) | 2022.01.06 |
댓글