2D 차트를 javascript를 이용하여 그려보자.
HTML , js 파일에 다음 내용을 기재하면 맨 아래 결과물을 얻을수 있다.
<HTML 파일 내용 >
<div id='chart-container'>
<canvas id="myChart"></canvas>
</div>
<javascript 내용>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
//차트설정
type: 'line',
//차트데이터
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: '주간 판매량',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [5, 10, 5, 2, 20, 30, 45]
}]
},
options: {}
});
최종결과물)
'javascript' 카테고리의 다른 글
| monitorEvents 로 특정 태그에 발생하는 이벤트 추적하기 (0) | 2021.12.30 |
|---|---|
| Array.from (0) | 2021.12.17 |
| modal (모달창 만들기) (0) | 2021.01.27 |
| to do list (0) | 2021.01.03 |
| 사용자 이름 입력받기 ( feat. localStorage 사용) (0) | 2020.12.31 |
댓글