fusionCharts에서 rounded-bar 구현하기

fusionCharts에는 도데체 왜 rounded-bar 옵션이 없나

https://www.fusioncharts.com/dev/chart-attributes/column2d

Chart Attributes | FusionCharts

옵션이 정말 많은 fusionCharts에 정말 놀랍게도 bar그래프의 모서리를 둥글게 만들어주는 rounded-bar 옵션이 없다. 매우 놀랍고, 매우 스트레스 받는다. 하지만 fusionCharts는 chart-js와 달리 그래프 구성 요소 하나하나가 분리되기 때문에 개발자 모드를 활용해서 개별 CSS를 활용할 수 있다. (chart-js는 차트 element가 통으로 들어간다.)

rounded-bar

 

element 찾기

bar를 표현하는 tag를 찾기

개발자도구에서 select element 도구를 활용해서 사각형 부분을 표현하는 태그를 찾는다.  나의 예제에서는 rect 태그를 사용하는 것으로 되어 있다. <rect> 태그는 rx, ry 속성을 통해 corner-round를 찾는다는 것을 절대 외울리가 없기 때문에 구글링으로 찾는다.

 

 

CSS 적용하기

CSS selector를 잘 활용하면, 내가 원하는 태그에만 CSS를 적용할 수 있다. index.css 파일을 만들고, CSS를 강제적용 시킬 script를 작성한다.

// 모든 rect 태그에 적용
rect {
    rx: 15;
    ry: 15;
    fill: red !important;
  }

// class이름에 raphael-group, plot-group이 들어가는 g태그 밑에 있는 rect 태그에 적용
g[class*="raphael-group"], g[class*="plot-group"] rect {
    rx: 10;
    ry: 10;
}

 

해당 index.css를 import 해주면 자동으로 적용된다

import './index.css'