어리둥절 분석가 그리고 개발자

✔️ 필요성 무료이고 가벼워서 차트 라이브러리로 많이 쓰이는 chart.js! 리액트 계열에서 사용할 때에는 react wrapper인 react-chartjs-2 를 사용하면 된다. chart.js의 custom-tooltip을 만들 때 이미지를 툴팁에 포함하고 싶을 때는 조금 어렵지만 아래와 같이 하면 된다. 공식 문서와 stack-overflow를 이틀간 삽질해서 겨우 성공했다. https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips Tooltip | Chart.js Namespace: options.plugins.tooltip, the global options for the chart toolt..

✔️ 필요성 차트를 그릴 때 데이터 value를 그대로 표시하고 싶은 경우도 있지만 비율을 표시하고 싶을 때도 있다 { valueFontSize: '15', valueAlpha: '80', showValues: '1', } ✔️ 문제 해결 showPercentValues를 활성화해준 뒤, decimals를 통해 소숫점을 조정하고 numberSuffix를 통해 %를 붙여준다 { valueFontSize: '15', valueAlpha: '80', showValues: '1', showPercentValues: '1', decimals: 0, numberSuffix: '%', }

Annotations의 개념 FusionChart 공식 홈페이지에서는 Annotation을 차트 위에 그리는 사용자 정의의 객체나 도형으로 정의하고 있다. 차트 위에서 추가적인 선이나 다양한 모양의 선, 혹은 이미지를 추가해서 더 차트를 효과적으로 표현할 수 있게 하는 것이다. Annotation을 통해서 툴팁을 보조하거나 대체할 수도 있다. FusionChart의 툴팁 또한 HTML을 통해서 상당히 자유롭게 custom 할 수 있지만, 가끔 차트마다 반드시 나타나는 툴팁 형식이 고정되어 있는 경우가 있다. 이럴 때 Annotation을 통하면 더 자유롭게 툴팁을 만들 수 있다. 툴팁이 될 Annotation 만들기 위의 이미지에서 툴팁은 크게 4가지 부분으로 구성된다. lable이 들어갈 네모, 화살표..

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