문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== chart.JS ======
<WRAP left notice 80%>
  * description :  
  * author      : 주레피
  * email       : dhan@repia.com
  * lastupdate  : 2022-12-07
</WRAP>
 
===== Intro =====
 
===== Case Study =====
  * [[https://www.chartjs.org/docs/latest/charts/bar.html|막대 그래프]] - 공식 홈페이지
  * [[https://yeon22.github.io/Chartjs-kr/docs/latest/charts/bar.html|막대 그래프(한글)]]
===== Term =====
 
===== Tip =====
<code>
  var config = {
	type: 'horizontalBar'               // 그래프 type
	, data: {
		labels: labels
		, datasets: [{
			data: data 
			, backgroundColor: [ 
                               '#4dc9f6',
		               '#f67019',
				'#f53794',
				'#537bc4',  // 색상
				'#acc236',
				'#166a8f',
				'#00a950',
				]
			, fill: false
		}]
	}
	, options: {
		maintainAspectRatio: false   // true로 하면 width와 height 크기 변화됨.
		, responsive: true           // 반응형 설정
		, scales: {
			xAxes: [{            // X 축 관련
				barThickness: 40
				, gridLines: { 
					display: false
				}
				, ticks: {   // X 축 0부터 시작해서 0.5만큼 커지면서 최대 5.0까지 표현
					beginAtZero: true, 
					max:5.0,         
					stepSize:0.5
				}
				, display: true
			}]
			, yAxes: [{          // Y 축 관련
				gridLines: {
					display: false
				}
				, ticks: {
					beginAtZero: true
				}
			}]
		}
		,tooltips: {                 // data 배열을 숫자로 변경 후 소수 2번째 자리까지 표현
			callbacks: {
				label: function (tooltipItem, data) {
					return Number(tooltipItem.xLabel).toFixed(2);
				}
			}
		}
		, legend: {
			display: false
		}
	}
};
  
</code>



      * [[https://m.blog.naver.com/khsmonad/221739938617|horizontalBar 적용 방법]]
      * [[https://codepen.io/chartjs/pen/YVWZbz|chart js 예시]]

===== Troubleshooting =====
  * [[https://this-is-coding.tistory.com/46|[chart.js] canvas에 chart 덧씌울 시 이전 chart가 그대로 있는 문제]]


===== Ref =====
  * [[https://www.youtube.com/watch?v=-U1PYshIyyw|How to Reset the Filter on a Chart in Chart.js]]
  * [[https://byul91oh.tistory.com/492|[Chart.js] options 설정 - bar 두께 조절 및 다양한 옵션]]

 
{{tag>주레피 chart chartjs slaptear}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구