본문 바로가기

프로그래밍/Chart JS6

[Chart.js] y축 데이터 범위 설정 0 부터 시작 options: { responsive: false, scales: { yAxes: [{ ticks: { beginAtZero: true, fontSize : 14, } }] } } 범위 지정 options: { responsive: false, scales: { yAxes: [{ ticks: { min: -10; max: 25; fontSize : 14, } }] } } min에서 +n씩 증가하게 보이기(stepSize) 2019. 8. 21.
Chart.js 데이터 항상 보이게 설정 위 이미지처럼 data값을 항상 보고 싶다면, 옵션에 아래의 내용을 추가시켜주면 된다. tooltips: { enabled: false }, hover: { animationDuration: 0 }, animation: { duration: 1, onComplete: function () { var chartInstance = this.chart, ctx = chartInstance.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); ctx.fillStyle = 'pur.. 2019. 8. 21.
Chart.js 배경, 폰트, 라인, 라벨 색상 변경 X축 폰트 색과 라인 색 x축 폰트와 라인의 색과 사이즈는 다음과 같이 변경할 수 있다. 라인을 굵게 하고 싶다면 linewidth를 높게 해 주면 되고, 라인을 보고 싶지 않다면 0으로 설정해 주면 된다. options: { scales: { xAxes: [{ ticks:{ fontColor : 'rgba(12, 13, 13, 1)', fontSize : 14 }, gridLines:{ color: "rgba(87, 152, 23, 1)", lineWidth: 3 } }] } } Y축 폰트 색과 라인 색 굵게 표시된 하늘색 선이 Y축 색상이고, 폰트와 색상도 다음과 같이 바꿀 수 있다. options: { legend: { labels: { fontColor: "red", fontSize: 18 } }.. 2019. 8. 21.
Chart.js 데이터 추가/ 데이터 삭제/ 데이터셋 추가/ 데이터셋 삭제 / 데이터 변경 우선 Chart를 조작 하기 위하여 차트를 그려준다. 데이터 변경 데이터 추가 데이터셋 추가 데이터 삭제 데이터셋 삭제 데이터 변경 //데이터 변경 document.getElementById('reData').onclick = function(){ //데이터셋 수 만큼 반복 var dataset = config.data.datasets; for(var i=0; i 2019. 7. 30.