Chart

차트는 데이터를 그래픽으로 표현할 때 사용된다.

기본적으로 사용되는 라이브러리는 Chart.js 이다. ( https://www.chartjs.org/ )

Line

Basic

기본 차트

Secondary text

<!-- 차트 기본 옵션 --> const labels = ["Jan","Feb","Mar","Apr","Mai","Jun"]; const dataList = [80,45,23,48,17,100]; const chartBasic01 = document.querySelector('.chart-basic-01'); window.myChart = new Chart(chartBasic01, { type: 'line', data: { labels: labels, datasets: [ { label: 'Product 1', data: dataList, borderWidth:2, borderColor: '#165BAA', backgroundColor: '#165BAA', pointRadius:3, }, ], }, options: { layout: { padding:{ left:-12, }, }, scales:{ x:{ grid:{ drawTicks:false, //영역 밖으로 넘어간 그리드 선 삭제 color:"#ECECEC" }, ticks:{ font:{ size: 12, }, color:'#4F4F4F', } }, y:{ grid:{ drawTicks:false, color:"#ECECEC" }, beginAtZero: true, // 0부터 시작 suggestedMax: 120, // 권장 최댓값 ticks:{ font:{ size: 12, }, color:'#4F4F4F', stepSize: 20, //고정 단계 padding: 12, }, }, }, plugins: { // 일반 범례 legend: { display: true, position:'bottom', align:'start', labels: { padding: 40, } }, tooltip: { enabled: true, }, }, animation: true, maintainAspectRatio: true, //크기 조정 시차트의 비율 유지 devicePixelRatio: 1.5, //해상도 증가 aspectRatio: 1.2, //차트의 비율 (가로/세로) }, });