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
}
}]
}
}