반응형
유투브 짱...
구글 차트랑 다른 차트 참고하는 데 너무 헷갈려서
유투브 동영상을 참고하니 아주 뚝딱!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Chart. JS</title>
<link rel="stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class = "container">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type : 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea;
data : {
labels : ['YongIn', 'Suwon', 'Seoul', 'DaeJeon', 'SeongNam'],
datasets:[{
label : 'Population',
data : [
100000, 150000, 300000, 200000, 10000
],
backgroundColor : 'green'
}]
},
options : {}
});
</script>
</body>
</html>
반응형
'자바스크립트' 카테고리의 다른 글
| js 숫자만 입력하고 싶을 때 (0) | 2021.02.16 |
|---|---|
| JS 그래프 삽입 + Ajax (0) | 2021.02.13 |
| [JavaScript] 자바스크립트로 페이지 이동하기 location.href = ""; (0) | 2021.02.05 |
| 취소가 있는 alert창 = confirm창 (0) | 2021.02.04 |
| onkeyup() (0) | 2021.02.02 |