공부공간

데이터 시각화하는 js 들 

D3.js  /  three.js  /  chart.js 그중 chart.js

사이트 : https://www.chartjs.org/docs/latest/

사이트를 들어가보면 설명이 되어있다. 그래서 나는 간단히 요점만 적어볼려고한다.

※설정 설명이 나와있음

1. 설치방법 : npm, CDN, Github

   =>나는 CDN방식을 선택함()

      => 시작하기-> 설치 -> CDNJS의 링크에들어감 -> 버전을 선택-> 맨위에있는 http...를 복사

           -> src에 복사내용 붙이기

<script src="여기">
//예시
//<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

2. 사용하기(프로젝트 때 사용한 코드를 가져옴)

//차트가 나오는 코드로 넣을 부분에 넣으면됨
<canvas id="myChart" width="300" height="300"></canvas> 

//설정코드// 맨아래에 있어야 작동함
<script>
					
					//chart.js
                    // 컨트롤러에서 받아온 데이터를 변수에 넣어준다.
					var aroma 	= ${boarddata.BEAN_AROMA}
					var sour	=${boarddata.BEAN_SOUR}
					var sweet	=${boarddata.BEAN_SWEET}
					var balance	=${boarddata.BEAN_BALANCE}
					var body	=${boarddata.BEAN_BODY}
					
                    //차트를 그릴 영역을 dom요소로 가져온다.
					var ctx = document.getElementById('myChart').getContext('2d');
                    
                    //차트를 생성함
					var myChart = new Chart(ctx, {
					    
                        //차트종류결정
                        type: 'radar', 
					   
                      //차트에 들어가는데이터 => object형식
                      data: {
                      		//x축에 들어갈이름(실제 차트에 표시될 데이터이름) =>배열
					        labels: ['바디감', '단맛', '밸런스', '향', '신맛'],
                           
                           //실제 차트에 표시할 데이터들
					        datasets: [{
                            	//dataset의 이름 => 문자(String)
					            label: '맛',
                                
                                //dataset값(표시될 값)=>배열
					            data: [body, sweet, balance,aroma, sour 
                                
                                //dataset의 배경색
                                //하나하나 색지정 과 하나의 색지정
					           /*  backgroundColor: [
					                'rgba(255, 99, 132, 0.2)',
					                'rgba(54, 162, 235, 0.2)',
					                'rgba(255, 206, 86, 0.2)',
					                'rgba(75, 192, 192, 0.2)',
					                'rgba(153, 102, 255, 0.2)',
					                'rgba(255, 159, 64, 0.2)'
					            ], */
                                
                                //선색
					          /*   borderColor: [
					                'rgba(255, 99, 132, 1)',
					                'rgba(54, 162, 235, 1)',
					                'rgba(255, 206, 86, 1)',
					                'rgba(75, 192, 192, 1)',
					                'rgba(153, 102, 255, 1)',
					                'rgba(255, 159, 64, 1)'
					            ], */
                                
                                //선두께
					            borderWidth: 0,
					            
                                //선색 하나로 지정
					            borderColor:'rgba(162, 97, 31, 0.7)',
                                
                                //배경색 하나로 지정
					            backgroundColor:'rgba(162, 97, 31, 0.7)'
					        }]
					    },
                        //차트의 설정 => object형식
					    options: {
                        	//애니메이션 true하면 없어짐 false하면 마우스 갖다대면 상세?설명뜸
					    	animation:false,
                            // ??
					    	grid:{
                            //true인 경우 눈금선은 원형입니다(방사형 차트에서만).
					    		circular:false
					    	},
                            //범례 옵션
					    	legend:{
                            	//범례 숨김
					        	display:false
					        },
					    	scale:{
					    			ticks: {
                                    	//칸 최소값과 최대값
					    				min:0,
					    				max:5,
                                        //글자없애기
                                        // ex)칸마다 min~max 0~5가나오는데 이걸지움
					    				display:false,
                                        //표시할 눈금의 최대수 +숫자를올리면 선이 많아짐
						        		maxTicksLimit:10 
						        	},
					    	},
					    	
					        
					        
					       
					        
					    }
					});
</script>