wiki:chart:chartjs

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:chart:chartjs [2022/12/07 18:04]
dhan 만듦
+++ wiki:chart:chartjs [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== 주제 ======
+====== chart.JS ======
 <WRAP left notice 80%>
   * description :
@@ 줄 10: / 줄 10: @@
 ===== 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>주레피}}
+{{tag>주레피 chart chartjs slaptear}}

/volume1/web/dokuwiki/data/attic/wiki/chart/chartjs.1670403884.txt.gz · 마지막으로 수정됨: 2022/12/07 18:04 저자 dhan