[대시보드] amcharts 라이브러리 사용 리액트 Pie 차트

amcharts 로 차트를 생성하는 코드이다.

amcharts  중 버전 5 사용

amcharts 를 install 하고 import 해준다.

import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

 

 

데이터 구조

let data = {
	{category : '기억' , value : 1 } ,
    {category : '니은' , value : 1 } ,
    {category : '디귿' , value : 1 } ,
    ....
    ....
    {category : '히읏' , value : 1 } ,
}

 

Script Code

useEffect(() => {
        if(data){
            // Create root 
            const root = am5.Root.new(chartID);

            // Set themes
            root.setThemes([am5themes_Animated.new(root)]);
        

            // Create chart
            const chart = root.container.children.push(
                am5percent.PieChart.new(root, {
                    endAngle: 270,
                    // layout: root.verticalLayout
                })
            );

            
            // Create series
            const series = chart.series.push(
                am5percent.PieSeries.new(root, {
                    name: "답변" ,
                    categoryField: "category",
                    valueField: "value",
                    endAngle: 270 , 
                    tooltip: am5.Tooltip.new(root, {
                        labelText: '{category} {value}  ({valuePercentTotal.formatNumber("0.00")}%)',
                        // autoTextColor: false,
                    }),
                    legendLabelText: "[{}]{category}[/]",
                    legendValueText: "[bold {fill}]{value}[/][{}]건[/]",
                })
            );

            // 1보다 작은 퍼센트 라벨 숨기기
            series.labels.template.adapters.add("y", function(y, target) {
                let dataItem = target.dataItem;
                if (dataItem) {
                    var tick = dataItem.get("tick");
                    if (tick) {
                        if (dataItem.get("valuePercentTotal") < 1) {
                            target.set("forceHidden", true);
                            tick.set("forceHidden", true);
                        }
                        else {
                            target.set("forceHidden", false);
                            tick.set("forceHidden", false);
                        }
                    }
                    return y;
                }
            });

            series.states.create("hidden", {
                endAngle: -90
            });

            // Set data
            series.data.setAll(data);
            // series.labels.template.set("forceHidden", true);
            // series.ticks.template.set("forceHidden", true);

            // Add legend
            const legend = chart.children.push(
                am5.Legend.new(root, {
                    y: am5.percent(50),
                    centerY: am5.percent(100),
                    layout: root.verticalLayout     //세로
                }
            ));

            legend.markerRectangles.template.setAll({
                cornerRadiusTL: 10,
                cornerRadiusTR: 10,
                cornerRadiusBL: 10,
                cornerRadiusBR: 10
            });

            legend.data.setAll(series.dataItems);

            series.appear(1000, 100);
        }
    }, [data]);

퍼센트로 자동 변환되며

0이하의 데이터들은 pie 차트에서 출력되지않게 옵션 설정해주었다.

 

HTML 코드

<div id={chartID} className='watermark' style={{width : '100%' , height : '300px'}}>
</div>