안녕하세요 오늘은 Chart.js 라이브러리를 사용해서 막대 그래프를 그려보겠습니다.
Chart.js 는 자바스크립트 차트 라이브러리 중 하나로, d3.js, highcharts 등과 함께 인기있는 라이브러리 중 하나입니다.
설치 방법:
- CDN 사용
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>- npm
npm i chart.js
먼저 차트에 표시할 데이터를 준비하겠습니다.
공공데이터포털의 '부산광역시_하수처리시설 월별 평균 수질현황 서비스' 오픈API 데이터를 활용하겠습니다.
Fetch API 를 사용해서 http 요청을 보내겠습니다.
const serviceKey = "발급받은_본인의_인증키"
const url = `http://apis.data.go.kr/6260000/BusanTblSwgqtyStusService/getTblSwgqtyStusInfo?ServiceKey=${serviceKey}&pageNo=1&numOfRows=1&resultType=json`;
function getData(){
const response = fetch(url); // 데이터 받아오기
return response.then(res => res.json());
}
async function exec(){
try {
const json = await getData();
console.log(json);
}
catch(error){
console.log(error);
}
}
exec();
응답 결과는 다음과 같습니다.
{
"getTblSwgqtyStusInfo": {
"header": {
"resultCode": "00",
"resultMsg": "NORMAL_CODE"
},
"body": {
"items": {
"item": [
{
"gubun": "위생처리장",
"category": "COD유입",
"swYear": "2020",
"swAverage": "1490.8",
"jan": "1771.6",
"feb": "1606.3",
"mar": "1643.9",
"apr": "1772.8",
"may": "1674.3",
"jun": "1620.9",
"jul": "1113.6",
"aug": "1300",
"sept": "1343.1",
"oct": "1356.9",
"nov": "1388.7",
"decem": "1367.6",
"swSum": ""
}
]
},
"numOfRows": 1,
"pageNo": 1,
"totalCount": 1699
}
}
}
위의 결과에서 필요한 데이터만 뽑아내서 data 라는 변수에 저장합니다. 그 데이터를 사용해서 Chart.js 라이브러리로 차트를 그립니다.
전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chart.js 막대 그래프</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<canvas id="myChart" width="800" height="500"></canvas>
</div>
<script>
const serviceKey = "발급받은_본인의_인증키"
const url = `http://apis.data.go.kr/6260000/BusanTblSwgqtyStusService/getTblSwgqtyStusInfo?ServiceKey=${serviceKey}&pageNo=1&numOfRows=1&resultType=json`;
function getData(){
const response = fetch(url); // 데이터 받아오기
return response.then(res => res.json());
}
async function exec(){
try {
const json = await getData();
const data = json.getTblSwgqtyStusInfo.body.items.item[0];
console.log(data);
const ctx = document.getElementById('myChart').getContext('2d'); // 차트
// 차트 설정 옵션
const config = {
type: 'bar', // 바 그래프
data: {
labels: ['01월', '02월', '03월', '04월', '05월', '06월', '07월', '08월', '09월', '10월', '11월', '12월'],
datasets: [{
label: data.gubun + " " + data.category + " " + data.swYear + "년 데이터", // 차트 상단의 차트제목
data: [data.jan, data.feb, data.mar, data.apr, data.may, data.jun, data.jul, data.aug, data.sept, data.oct, data.nov, data.decem], // 각각의 바 그래프 수치
backgroundColor: 'rgba(54, 162, 235, 0.2)', // 바 배경색
borderColor: 'rgba(54, 162, 235, 1)', // 바 테두리 색
borderWidth: 1, // 바 테두리 두께
}]
},
options: {
scales: {
// x축
x: {
ticks: {
font: {
size: 18,
},
color: "blue"
}
},
// y축
y: {
beginAtZero: false, // y축 시작을 0부터 할 것인지
ticks: {
font: {
size: 18,
},
color: "red"
}
},
},
plugins: {
// 툴팁 (바 그래프에 마우스를 올리면 나타나는 것)
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label = 'COD유입:'; // 이렇게 따로 설정하지 않았을 경우 "위생처리장 COD유입 2020년 데이터" 라고 길게 나와서 커스텀함
}
if (context.parsed.y !== null) {
label += context.parsed.y.toString();
}
return label;
}
}
},
// 범례
legend: {
labels: {
font: {
size: 20
},
color: "green"
}
}
}
}
}
const myChart = new Chart(ctx, config);
}
catch(error){
console.log(error);
}
}
exec();
</script>
</body>
</html>
구현된 차트는 다음과 같습니다.
'JavaScript' 카테고리의 다른 글
| [ JavaScript ] Chart.js 라이브러리 사용해서 복합(막대, 라인) 그래프 그리기 (2) | 2022.12.28 |
|---|---|
| [JavaScript] 별점 드래그 기능 만들기 (0) | 2022.12.21 |
| [ JavaScript ] moment.js 라이브러리 사용해보기 (0) | 2022.12.11 |
| [javascript] collapsible 테이블 만들기. (0) | 2022.12.08 |
| [ JavaScript ] Lodash 라이브러리 사용해보기. (0) | 2022.12.02 |
