search

metatron-app / metatron-discovery

Powerful & Easy way for big data discovery
https://metatron.app
Apache License 2.0
440 stars 110 forks source link

Lables on Pie chart overlaps #122

Open alchan-lee opened 6 years ago

alchan-lee commented 6 years ago

Describe the bug labels on pie chart overlapping other chart area.

Expected behavior chart labels fit into box.

Screenshots image

Additional context TDE: METATRON-1084

dave-taeho commented 6 years ago

@alchan-lee 파이차트의 Label은 컨트롤할수있는 영역이 아니라 현재는 개선된 버전이 나오길 기다리고 있습니다.

kyungtaak commented 6 years ago

@dave-taeho 해당라이브러리에 release 계획이 명시되어 있나요? 그리고 왜 컨트롤 할수 없는지 근거를 알려주셨으면합니다. 그리고 해결방안은 있는것인지 다시검토 부탁드립니다.

dave-taeho commented 5 years ago

@kyungtaak 답변이 늦어 죄송합니다. 우선 echart 라이브러리에 해당 문제에대한 release계획이 명시되어 있지는 않습니다. 다만 빠른 속도로 업데이트가 진행되는 프로젝트이기에 그동안 문제가 발생한 사항들에 대해서도 하나둘씩 해결해가는걸 보았고 큰 변경점마다 라이브러리 업데이트를 진행 하였었습니다.

현재 파이차트에서 해당 이슈를 저희쪽에서 해결하지 못하는 근거는 다음과 같습니다. (1) 옵션의 부재 아시다 시피 echart를 저희같은 클라이언트가 컨트롤 하기 위해서는 옵션과 API를 통해 이루어집니다. API는 사실상 차트를 지우고 다시 생성하는 수준이고, 옵션을 통해 차트의 형태 및 동작이 이루어집니다. https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie.label 파이차트의 Label옵션은 위의 링크페이지와 같으며, 파이차트 자체는 영역의 크기를 지정 할 수 있지만 대시보드의 차트영역이 좁을경우 Label의 경우 position을 outside로 지정했을때 범례와의 영역이 겹치는 부분을 처리할 수 있는 옵션이 존재하지 않습니다.

(2) echart 레이어구조 Label이 범례와 영역이 중복되는 이유를 살펴보면 echart의 레이어구조가 원인입니다. 기본적으로 각 레이어는 차트영역을 100% 사용하게 되고 우선순위가 높은 레이어가 앞쪽에 표시되는 구조입니다. 그렇기에 범례 > Label > 파이차트순으로 높은 레이어 인덱스를 가지게 되며, 영역을 100% 차지하여 연산을 하기 때문에 차트 사이즈가 좁을경우 레이블이 범례와 중첩되는 문제가 발생하게 됩니다. 파이차트 자체도 동일한 문제가 있었지만 전체 차트 영역에서 차트의 사이즈(radius)를 변경할 수 있는 옵션이 존재하기에 이 이슈는 오래전에 처리된 상태입니다.