yoni
라인 chart 기본 내용 본문
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 } }] } }
'JS' 카테고리의 다른 글
iframe 처리된 화면에서 현재 로드된 화면 찾기 (0) | 2019.09.02 |
---|---|
포커스된 브라우저 구분 (0) | 2019.07.23 |
api call 사용시 body와 params (0) | 2019.01.30 |
iframe사용시 프레임 안의 버튼을 컨트롤 하는 방법 (0) | 2018.09.27 |
trigger 걸고 e로 확인해보면 Target (0) | 2018.09.05 |
Comments