Amcharts - dount Chart 가운데 퍼센트 띄우기

1. amchart - dount chart 그래프 띄우기(퍼센트 띄우기)

   am5.ready(function () {
		
//select option의 선택된 값을 가져와 test 변수에 집어넣음
        var test = $("#selectOption option:selected").val();
        console.log("test : " + test);

//thymeleaf로 값을 전달받아 data1List 변수에 넣음
        data1List = [[${pJsonArr}]];

	
        var root = am5.Root.new("ChartDiv1");


        root.setThemes([
            am5themes_Animated.new(root)
        ]);

        var chart = root.container.children.push(am5percent.PieChart.new(root, {
            layout: root.verticalLayout,
            innerRadius: am5.percent(50)
        }));

	
        series2 = chart.series.push(am5percent.PieSeries.new(root, {
            valueField: "count",
            categoryField: "user",
            alignLabels: false
        }));

        series2.labels.template.setAll({
            textType: "circular",
            centerX: 0,
            centerY: 0
        });

//controller에서 전달받은 값 data1List를 series2의 data에 세팅
        series2.data.setAll(data1List);

	
        legend = chart.children.push(am5.Legend.new(root, {
            centerX: am5.percent(50),
            x: am5.percent(50),
            marginTop: 15,
            marginBottom: 15,
        }));

        legend.data.setAll(series2.dataItems);
        
        
//도넛 그래프의 가운데에 퍼센트를 넣기 위해서는 label이 필요
//label에 띄울 text와 fontSize, label의 위치를 지정
        label = series2.children.push(am5.Label.new(root, {
            text: [[${percentage}]] + "%",
            fontSize: 30,
            centerX: am5.percent(50),
            centerY: am5.percent(50)
        }))
		

        series2.appear(1000, 100);

    });

 

2. amchart - dount chart 그래프 - data값 변경하기(그래프 다시 그리기 X)

				
                // series2의 data값 다시 세팅
                series2.data.setAll(JsonData);
                //legned의 data값도 다시 세팅
                legend.data.setAll(series2.dataItems);
                
                
                var total = null;
                for (var i = 0; i < JsonData.length; i++) {
                    total += JsonData[i]['count']
                }
                
                //percent 값을 계산
                if (JsonData[0]['user'] != 'not Progress') {
                    percentage2 = 100;
                } else {
                    percentage2 = (((total - JsonData[0]['count']) / total) * 100).toFixed(2);
                }
                
                
                // label의 text값을 다시 세팅
                label.set("text", percentage2 + "%");

• series2.data.setAll()을 사용하면 그래프의 값을 변경하고자 할 때, 그래프를 다시 그리지 않고 값만 변경 가능
• 만약 amchart에서 계산한 percent값을 사용하려면, series.dataItems를 콘솔로 찍어 해당하는 값을 사용하면 된다.

console.log(series2.dataItems);

 

series2.dataItems를 콘솔로 찍은 모습

• percent값을 사용하려면 series2.dataItems[index].settings.valuePercentTotal 방식으로 가져다 사용 가능, 하지만 사용 가능한 chart가 존재하는 듯하다. → 본인은 해결하지 못하여 계산하여 사용함