Amchart5 - Stacked Column Chart (스택형 막대차트)

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

<script>
//ajax로 DB데이터 가져오는 파라미터
//svcId, returnData, errCd, msgTp, msgCd, msgText
function fn_renderStackChart(data){
	var root6 = am5.Root.new("chartdiv6");
    
    //chart 삭제 후 재선언
    root6.dispose(); // 삭제
    root6 = am5.Root.new("chartdiv6"); // 재선언
    
	// Set themes
	root6.setThemes([am5themes_Animated.new(root6)]);
    
    // Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root6.container.children.push(am5xy.XYChart.new(root6, {
	  panX: false,
	  panY: false,
	  wheelX: "panX",
	  //wheelY: "zoomX", 스크롤 확대 없애기
	  layout: root6.verticalLayout,
	  maxTooltipDistance: 0 //툴팁간의 간격
	}));
	
	/*차트 클릭 > 화면이동*/
	chart.events.on("click", function(ev){
	var params = "STAT_CD=9";
		fn_openNewTabPage("<spring:message code='LABEL.BIZ.ALLOCATED.ASSIGN' />", "/biz/orders/allo/strtg/stckAllo/page", "BIZ_ORDERS_MENU03_01", "BIZ_ORDERS > BIZ_ORDERS_MENU03 > BIZ_ORDERS_MENU03_01", params);
	});

	//스크롤 안쓰니 잠시 주석
	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	/* chart.set("scrollbarX", am5.Scrollbar.new(root6, {
	  orientation: "horizontal"
	})); */
	
    //x축 만들기
	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root6, {
	  categoryField: "REG_DTM",
	  renderer: am5xy.AxisRendererX.new(root6, {})
	}));

	xAxis.data.setAll(data);

	//y축 만들기
	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root6, {
	  min: 0,
	  renderer: am5xy.AxisRendererY.new(root6, {}),
	}));

	//범례
	// Add legend
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	var legend = chart.children.push(am5.Legend.new(root6, {
	  centerX: am5.p50,
	  x: am5.p50
	}));

	//데이터 그리기 (데이터를 순회하면서 필드에 해당하는 항목만 그리기)
    //ex) 나는 MESSAGE, LABEL, CNT 항목이 있고
    // 하단에 makeSeries("MESSAGE", "MESSAGE");를 호출해서 
    // 각 데이터안의 MESSAGE 항목을 먼저 그린다
	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	function makeSeries(name, fieldName) {
	  var series = chart.series.push(am5xy.ColumnSeries.new(root6, {
	    name: name,
	    stacked: true,
	    xAxis: xAxis,
	    yAxis: yAxis,
	    valueYField: fieldName,
	    categoryXField: "REG_DTM", //X축 기준항목
	  }));

	//툴팁용 텍스트 만들기
    //날짜에 해당하는 데이터(MESSAGE, LABEL, CNT)들 전부 보여주기
	  var text ="[bold]{categoryX.formatDate()}[/]\n MESSAGE : {MESSAGE} ({valuePercentTotal.formatNumber('0.00')}%)[/]\n LABEL : {LABEL}\n CNT : {CNT}";
	  
	  series.columns.template.setAll({
	    tooltipText: text,
	    tooltipY: am5.percent(10)
	  });
	  series.data.setAll(data);
	  
	  // Make stuff animate on load
	  // https://www.amcharts.com/docs/v5/concepts/animations/
	  series.appear();

	  series.bullets.push(function () {
	    return am5.Bullet.new(root6, {
	      sprite: am5.Label.new(root6, {
	        text: "{valueY}",
	        fill: root6.interfaceColors.get("alternativeText"),
	        centerY: am5.p50,
	        centerX: am5.p50,
	        populateText: true
	      })
	    });
	  });

	  legend.data.push(series);
	}

	makeSeries("MESSAGE", "MESSAGE");
	makeSeries("LABEL", "LABEL");
	makeSeries("CNT", "CNT");

	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);
}