JS Coding
[JavaScript] Chat.js 를 이용한 차트 만들기 본문
구글 검색창에
D3.js / C3.js 등 차트를 이용할 수있는 다양한 컨텐츠가 있지만
사용하기 간편하고 이해하기 쉽게 만들어진 Chat.js 에 대해서 알아보겠다.
크롬 검색창에 chat.js 를 검색하면 사이트가 나오는데
거기서 Getting started 를 눌러 들어가면 있느 소스를 가져온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 차트가 그려지는 div -->
<div style="width:500px">
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.querySelector('#myChart');
const myChart =new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
type: "line",
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// chart.js 가 잘 만들어진 이유, return값으로 제어가 직관적
/*
// line과 bar는 한 차트에서 같이 쓰일 수 있다 (mixed 차트)
const myChart = new Chart(ctx, {
// type: 'bar', // 비교 할때
// type: 'line', // 흐름 볼때
// type: 'pie', // 각 별 크기 볼때
// type: 'doughnut', // 각 별 크기 볼때
type: 'radar',
data: {
// x축으로 차트의 대상들을 표현
// 값 표시 갯수는 라벨 수에 의존 한다.
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
type:"line",
label: '2023년 키 성장',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'yellow'
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
*/
// 함수명을 지어주면 가져다가 쓸 수 있다.
// 옵션 구조를 파악하는 순간 사용법의 대부분을 이해 할수 있다.
// console.log("라벨 : ",myChart.data.datasets[0].label);
// console.log("데이터 : ",myChart.data.datasets[0].data); //읽기 가능
// myChart.data.datasets[0].data = [130,50,40,200,705,100];// 쓰기
// console.log("데이터2 : ",myChart.data.datasets[0].data); //읽기 가능
// let data2023 ={
// type: "bar",
// label : '2023년 재성 키',
// data : [181,182,183,184,185,186],
// borderWidth : 1
// };
// 7개의 랜덤 데이터를 가진 배열 리턴
function fRanData(){
let data = [];
for(let i=1; i<=7; i++){
data.push(Math.round(Math.random()*50)+50); //50~100;
}
return data;
}
// 0.5초마다 차트를 그리는 (rendering) 함수
function fRender(){
let types = ["bar","line"];
let colors = ["blue","red"];
for(let i=0; i<2; i++) {
let ranData ={
type: types[i],
label : '2023년 재성 키',
data : fRanData(),
borderWidth: 1,
backgroundColor: 'blue'
};
myChart.data.datasets[i]= ranData;
}
// myChart.data.datasets.push(data2023);
// 제일 중요한 메소드 update
myChart.update(); // 다시 그리려면, 멋진 말로 rendering
setTimeout(fRender,500);
}
fRender(); // 콜
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [Node.js] Node.js 메일 전송 하는 코드(인증코드 전송) (0) | 2024.04.23 |
|---|---|
| [Node.js] Node.js 입문자 초기 세팅 (0) | 2024.04.05 |
| [JavaScript] 자바스크립트에서 사용되는 "This" 2편 (0) | 2023.11.10 |
| [JavaSciprt] 자바스크립트에서 사용되는 "This" (0) | 2023.11.10 |
| [JavaScript] 모달 직접 만들어 보기 (0) | 2023.11.07 |
'JavaScript' Related Articles
more
