yoni

라인 chart 기본 내용 본문

JS

라인 chart 기본 내용

yoni-1117 2017. 9. 25. 15:21
var ctx = $("#myChart");//canvas id
/* var ctx = "myChart"; */

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'chart 템플릿',
            data: [12, 19, 3, 5, 2, 3],
            borderColor: [
                'rgb(75, 192, 192)'
            ],
            fill: false,//그래프 아래 영역 채우는거 없애기
            lineTension: 0,//lineTension 이 0이면 직선의 대한 그래프
            borderWidth: 1//선굵기
        }]
    },
});
--------------------------------------------------------------------------------------------
[chart 객체 생성할때 유의 사항]
var ctx = $("#myChart");//canvas id
var myLineChart = new Chart(ctx, {
});

:차트를 생성할때 객체도 생성해주는대 그때 항상 
 new Chart 'Chart'로 써야지 차트 폼이 생성된다. 이런 규격으로 만들지 않으면 
 차트가 그려지지않음
--------------------------------------------------------------------------------------------
[직선 그래프]
1) option으로 주기
options:  {//lineTension: 0과 같은 
	elements: {
		line: {
			tension: 0, // 꺽은선 option
		}
	}
}

2) data에 주기
lineTension: 0,//lineTension 이 0이면 직선의 대한 그래프
--------------------------------------------------------------------------------------------
[label 지우기]
options: {
	legend: {
		display: false
	}	
}

--------------------------------------------------------------------------------------------
[그래프 꼭지점에 마우스 over하면 설명 나오는 tooltip 에도 label 없애기]
options: {
	tooltips: {
		callbacks: {
		   label: function(tooltipItem) {
				  return tooltipItem.yLabel;
		   }
		}
	}
}
--------------------------------------------------------------------------------------------
[바둑판표에서 가로 횡 없애기]
options: {
	scales: {//scales는 척도 이며 x축 y축을 합한 바둑판 모양을 뜻함
		xAxes: [{//xAxes는 가로축, yAxes는 세로축을 뜻함
			gridLines : {//그리드라고 구분을 안해주면 x축의 데이터 표시부분도 날라간다.
				display : false
			}
		}]
	}
}
--------------------------------------------------------------------------------------------
[가로축 font 크기 조절 fontSize]
var options = {
    scales: {
        xAxes: [{
            ticks: {
                fontSize: 40
            }
        }]
    }
}


Comments