728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--바닐라 JS로 맹글어져성, 아래 1줄로 설치 끝!-->
</head>
<body>
<h1>올해 수지 맞은 차트</h1>
작년 값<input type="text" id="lastVal" value=""><br>
올해 값<input type="text" id="thisVal" value=""><br>
<button onclick="freDraw()">차트 다시 그리깅</button>
<div style="width:600px; height:400px; border:2px solid black">
<!--canvas는 webGL이라고 그래픽라이브러리 엔진을 사용!
차트 크기는 부모영역 크기에 따라 자동으로 달라짐,
-->
<canvas id="myChart"></canvas>
</div>
<script>
const myLastVal = document.querySelector('#lastVal');
const mythisVal = document.querySelector('#thisVal');
function fRanData(){
let ranData = []; //빈 배열 생성
for(let i=1; i<=7; i++){ //7개 랜덤 데이터 넣기
ranData.push(Math.round(Math.random()* 40) + 60); //60~100
}
return ranData; //배열 리턴
}
function freDraw() {
//요기 작성
sujiChart.data.labels = ['임민우', '곽우재','김수지', '김승종', '이현학', '박병철', '신진수']
sujiChart.data.datasets[0].data = fRanData();
sujiChart.data.datasets[1].data = fRanData();
sujiChart.update(); //잊지말자 다시그리기
setTimeout(freDraw,1000);
}
const ctx = document.querySelector('#myChart');
//bar와 line은 mix될 수 있음. (딴 건 안됨!, 생각해보면 안되는 이유 추측가능)
//chart.js가 잘 만들어진 이유는 생성자 리턴값에 설정옵션들이 거의다
//포함되어서 리턴되고, 그것으로 모든 걸 제어할 수 있음!(아주 훌륭!)
const sujiChart = new Chart(ctx, {
type: 'bar', //bar, line, doughnut, pie, radar, polarArea
data: {
// labels 갯수가 맞아야만 해당 데이터가 화면에 나옴!
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange','Merong'],
datasets: [
{
type:"line",
label: '작년',
data: [12, 19, 3, 5, 2, 3,20],
borderWidth: 1
},
{
type:"bar",
label: '올행',
data: [22, 29, 13, 15, 12, 13, 16],
borderWidth: 1
},
]
},
// 필요한 옵션은 구글 검색을 통해 해결!
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
//sujiChart 전역변수를 이용하여 차트 내부 정보를 읽어올 수 있음!
console.log("체킁 :", sujiChart.data.labels);
console.log("체킁2 :", sujiChart.data.datasets[1]);
console.log("체킁3 :", sujiChart.data.datasets[1].data);
//값을 바로 줄 수 있음!
//sujiChart.data.datasets[1].data = [1,2,3,4,5,6,7];
//chart.js의 가장 중요하나 메소드 update() => 다시 그려랑(rendering)
//sujiChart.update();
</script>
</body>
</html>
'Spring > Spring 기초' 카테고리의 다른 글
| e7e샘의 노션 블록에디터 (0) | 2023.09.05 |
|---|---|
| 최프 pom.xml 및 설정파일들.. (0) | 2023.09.04 |
| e7e샘의 Tree(트리) (1) | 2023.09.04 |
| e7e샘의 스케줄러 설정 (0) | 2023.09.01 |
| filezila사용해서 file전송 업로드/다운로드 해보깅 (0) | 2023.09.01 |
