Amchart5 - 파이차트 그리기

Amchart5 Document 헷갈려서 나만의 언어?로 정리하기

 

<div class="data-block data" draggable="true">
	<div class="header">
        <h2>AmChart5 Sample - Pie chart </h2>
    </div>
    <div class="body">
        <div class="grid-container" >
            <div id="chartdiv3" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
</div>

<script>
//ajax로 DB데이터 가져오는 파라미터
//svcId, returnData, errCd, msgTp, msgCd, msgText
function fn_renderPieChart(data){
	
    var root3 = am5.Root.new("chartdiv3");
    
    //chart 삭제 후 재선언
    root3.dispose(); // 삭제
    root3 = am5.Root.new("chartdiv3"); // 재선언
    
	// Set themes
	root3.setThemes([am5themes_Animated.new(root3)]);

	// Create chart
	var chart = root3.container.children.push( //인스턴스를 생성하는 기본 문법
		am5percent.PieChart.new(root3, { 
			layout: root3.verticalHorizontal,
			radius: am5.p100, //외부반경 공백에 범례, 시리즈표기에 따라 조절(기본 80)
			innerRadius: am5.p50 //내부반경 (외부반경으로부터 상대적)
		})
	);
		
    //시리즈 : 차트에 출력할 데이터값의 집합
	var series = chart.series.push(am5percent.PieSeries.new(root3, {
		name: "Series",
		categoryField: "country", //항목
		valueField: "sales",      //항목에 따른 값
		startAngle: -180, //시작각도 (-90 일때 원)
		endAngle: 0       //끝 각도 (270 일때 원)
		})
	);
    
    //테스트할 데이터 임시로 만들기
	var test_data = [{
		  country: "France",
		  sales: 100000
		}, {
		  country: "Spain",
		  sales: 160000
		}, {
		  country: "United Kingdom",
		  sales: 80000
		}]; 
        
    //데이터는 data속성을 통해 시리즈에 직접 설정
	series.data.setAll(test_data);
	
    // 시리즈 간의 간격, 색상 설정
	series.slices.template.setAll({
  		stroke: am5.color(0xffffff), //시리즈간의 공백을 흰색으로 표현
  		strokeWidth: 20  //공백 두께
	});
    
    //만약 2가지 데이터에 대해 표현을 하게되면
    //series2 생성하여 각각 설정하면된다.
    
    //범례와는 별개로 각 항목에 대한 레이블과 가리키는 막대
    series.labels.template.set("visible", true); //true : 레이블 보임
	series.ticks.template.set("visible", false); //false : 막대 안보임
    
	// Add legend (범례 추가하기)
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    //범례를 추가하려면 Legend클래스의 인스턴스("핵심" 패키지의 일부)를 만들고 
    //차트에 푸시하고 해당 데이터를 설정하기
	var legend = chart.children.push(
			  am5.Legend.new(root3, {
			    centerX: am5.p50, //수평 위치(가운데로부터 상대적위치)
			    centerY: am5.p100, //수직 위치(가운데로부터 상대적위치, 100이면 가장 아래
			    x: am5.p50, //수평위치 (절대적 위치)
			    y: am5.p80, //수직위치 (절대적 위치)
			    layout: root3.horizontalLayout, //각 항목을 수평으로 나열
                nameField : "categoryX" 
                //만약 범례에 사용할 이름이 객체배열에 포함되어있다면 지정
			  })
			);
	
    //범례 데이터를 전달하는 방법 1
    //가장 일반적이고 편리(DataItem 객체 배열 전달)
	legend.data.setAll(series.dataItems);
	
	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	// 시리즈를 초기 애니메이션으로 보여주고 싶다면 appear()
    series.appear();
    // 차트 자체를 appear호출하는 것도 동일
    chart.appear(1000, 100);
}
</script>

 

만약 series2를 설정하면 아래와 같이 중첩 파이차트가 생성된다.