반응형
차트를 사용할 때 사용하기 좋은 플러그인인 chart.js의 사용법과 옵션을 알려드리겠습니다.
Chart.js는 강력한 오픈소스 라이브러리로 활용성이 높아요 :)
01. 우선 GitHub에서 Chart.js 파일을 다운받아 설치해줍니다.
chartjs/Chart.js
Simple HTML5 Charts using the
github.com
chart.js 사이트안에 많은 예제 파일과 사용법이 있으니까 참고하세요 :)
02. JS 연결을 해줍니다.
npm 연결
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>다운받은 파일로 연결
<head>
<script src="파일경로/chart.js"></script>
</head>03. 페이지에 컨버스를 삽입한다.
<canvas id="myChart"></canvas>
04. 스크립트 작성
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});type:'차트 유형'
data는 말 그대로 차트에 안에 들어가는 데이터 값이고,
label과 background컬러, borderColor를 지정해줄 수 있습니다 :)
막대그래프의 다양한 예제를 확인하시려면 아래의 포스팅을 참고해주세요.
chart.js를 사용해 막대 그래프 그리는 법 (예제 多)
chart.js를 사용해 막대 그래프 그리는 법 (예제 多)
Chart.js로 막대 그래프 그리기 간단하게 표를 그리기 쉬운 플러그인인 chart.js의 막대 그래프(bar chart) 그리는 방법과 옵션에 대해 알려드리겠습니다. chart.js 는 간단한 차트를 그리기에는 용이하지
eunyoe.tistory.com
차트의 종류에는 선형 차트, 막대형 차트, 도넛 차트, 파이 차트등이 있습니다.
사용법과 옵션이 자세하게 정리되어있는 아래의 사이트에서 확인하면서 작업해주면 됩니다.
www.chartjs.org/docs/latest/charts/
반응형
'Web > 플러그인' 카테고리의 다른 글
| chart.js를 사용해 막대 그래프 그리는 법 (예제 多) (0) | 2021.04.13 |
|---|---|
| swiper 슬라이드 IE 작동 안할 때, 해결하는 방법 (0) | 2021.04.13 |
| [parallax.js] 패럴렉스 스크롤링(parallax scroll) 사용법/옵션, 예제 파일 (0) | 2021.04.01 |
| [jQuery Plugin] isotope.js 필터와 이미지정렬 플러그인 사용 방법 (0) | 2019.09.25 |
| bxslider 제이쿼리 이미지 슬라이드 사용법 (0) | 2019.09.20 |