[ECharts] Bar 차트의 X축 라벨을 최대한 화면에 출력하는 방법

ECharts의 Bar 차트에서 모든 데이터의 X축 라벨이 출력되어야 하는 경우 아래와 같이 라벨이 겹치는 문제가 발생한다. 기본적으로 ECharts의 X축에는 HideOverlap 속성이 true로 되어 있어 라벨이 겹치면 자동으로 라벨이 숨겨지는데, 때로는 모든 라벨이 출력되어야 하는 경우가 있다. 이 경우, 개발자가 X축 라벨의 너비를 자동으로 계산해서 겹치지 않도록 말 줄임표 (ellipsis) 처리를 하거나 라벨을 회전하여 더 많은 글자수가 출력되도록 동적으로 X축 옵션을 조절하는 것이 좋다. 나는 아래와 같은 순서대로 속성을 동적으로 변경하도록 기능을 구현하였다. 1. 기능 설계 X축 라벨의 최대 너비 (axisTick 한 칸의 최대 너비)를 구하기 위해 아래와 같이 계산식을 구상하였다. 1)..

2023.06.06