chart.js를 적용하며 알게된 것.. 브라우저 호환(IE11, 크롬, 엣지) 플러그인(datalabels, outlabels)

크롬과 엣지만 고려하였으나 ie11까지 더 고려하게 되어 이것저것 찾다가 알게된 내용

• 최신버전 chart.js 3.8.0을 적용하였으나 ie11에서 차트가 동작하지 않음
• chart.js 3.0에서 대격변이 있었다고 하여 2.9.4버전을 적용 ie11 정상동작
• 3.8.0과 2.9.4에는 문법상 차이가 있어서 바로 변경 불가능

option x축 y축설정이 배열로 들어가고 dataset에서 지정한 yAxesID를 배열안에서 id로 지정하였으나 이제 배열 없이 scales의 key로 바로 지정하여사용하도록 변경됨

2.9.4 -> scales : { yAxes: [ {id:'y1'}, {id:'y2'} ] }

3.8.0 -> scales : { y : {} , 'y2' : {}, x : {} }

축에 데이터범위의 설명을 추가할때 

2.9.4 -> scales: {yAxes: [ {scaleLable: {display:true, labelString: '단위(명/일)'}} ] }

3.8.0 -> scales: {y: {title: {display: true, text: '단위(명/일)'}}}

 

chartjs-plugin-piechart-outlabels 플러그인

 

• 플러그인 중 파이, 도넛 차트 바깥부분에 라벨을 표시해주는 chartjs-plugin-piechart-outlabels 플러그인은 chart.js 3.X대에서 동작하지 않음. 2.X로 변경
• 기본적으로 outlabels 적용 시  responsive: true, maintainAspectRatio: false 옵션을 적용했지만 canves 외부에 랜더링되어 짤려보임. chart 옵션 중 layout 옵션에 padding값을 줘서 라벨이 표시되는 최적의 padding 값을 찾아줌

layout: {
   padding: 20
}

https://github.com/Neckster/chartjs-plugin-piechart-outlabels/issues/11

 

• IE11에서 Math.trunc()를 제공하지 않아 오류 발생하므로 폴리필 필요. 플러그인 js에 아래 내용 추가

Math.trunc = Math.trunc || function(x) {
    return x < 0 ? Math.ceil(x) : Math.floor(x);
}

https://stackoverflow.com/questions/60402658/ie-browser-not-supporting-math-trunc