본문 바로가기

Chart.js3

[Vue.js] Chart.js 로 그린 Doughnut Chart 에서 없는 데이터의 label 숨기기 (empty data label hide) Vue-Chart.js 로 도넛차트를 그렸는데, 아니 멜론만 9개인데 위에 label 이 줄줄이 나올 필요가 있나? 싶어서 숨기는 방법에 대해서 찾아보다가 성공했다 ! 핵심은 data 세팅할 때 값이 없으면 (나같은 경우는 0이면) undefined 로 세팅하는 것 !!! (null 세팅은 안된다 😅) axios .post(...) .then(res => { let chartData = res.data; this.renderChart( { labels: [ "바나나", "사과", "포도", "체리", "멜론", "수박", "참외" ], datasets: [ { backgroundColor: [ this.randomColors(), // 따로 정의한 method this.randomColors(), thi.. 2021. 6. 10.
[JavaScript] Chart.js 로 파이차트 만들 때 backgroundColor 핸들링하는 방법 이번에는 Chart.js 로 데이터를 예쁘게 뿌려주는 작업을 진행하고 있다.작업을 진행하면서 차트에 표현 할 색깔을 내 마음대로 입혔는데 ㅋㅋㅋㅋㅋㅋ 팀장님이 색이 별로라고 하셔가지고 ㅠ클릭하면 랜덤으로 색이 바뀌도록 구현해버렸다 ㅎㅎ; (색이 마음에 안들면 클릭해서 변경하시라고 .. 🍒🍒) 하고 싶어서 여기저기 찾아보았지만,마땅한 방안을 찾을 수 없었고 결국 내가 열심히 삽질하다 만들었다.. ^-^ 뿌듯한 마음에 바로 공유하려고 달려옴. 우선, 기본적인 Chart.js 사용법은 https://www.chartjs.org/docs/latest/charts/doughnut.html 공식홈페이지 참고하면 되고 (!)여기서 가장 중요한 핵심 속성은 legend 와 onClick 이벤트이다. 1. 13번 라인과.. 2019. 7. 23.
Uncaught TypeError: Cannot read property 'transition' of null Uncaught TypeError: Cannot read property 'transition' of null Chart.js 로 PieChart 를 만들던 중 이런 에러가 발생하였다. 아래처럼 한 페이지에 파이차트를 여러개 사용하면서, 실제 윈도우 객체 1개에 계속 new Chart 를 해주고 있었던게 문제가 되었다.12345678910111213window.pieChart = new Chart(ctx, { type : 'pie', data : data, options : { title : { display : true, fontSize : '16', fontColor : '#FFFFFF', text : $("#testVal").val() + ' ' + textId + '별 ' + textKind + .. 2019. 7. 23.

티스토리툴바