Amchart5 - radar chart / gauge chart

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

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

	// Create chart 인스턴스 생성
	// https://www.amcharts.com/docs/v5/charts/radar-chart/
	var chart = root4.container.children.push(
	  am5radar.RadarChart.new(root4, {
	    panX: false,
	    panY: false,
	    startAngle: 0,   //시작각도 (-90 일때 원)
	    endAngle: 180,   //끝각도 (-270 일때 원)
        radius: am5.p95,  //외부반경 (기본 80)
        innerRadius: -20  //내부반경 (외부반경으로부터 거리)
	  })
	);

	chart.getNumberFormatter().set("numberFormat", "#'%'");

	//1차원 차트이브로 하나의 원형 축만 필요
    //게이지와 레이더의 모든 축 유형을 xAxes 목록에 push 하여 사용
    //실제 시리즈가 없어 min/max 설정을 해야함
	var xAxis = chart.xAxes.push(
	  am5xy.ValueAxis.new(root4, {
	    maxDeviation: 0,
	    min: 0,
	    max: 100,
	    strictMinMax: true,
	    renderer: axisRenderer
	  })
	);
    
    // Create axis and its renderer
	// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
    //그리드와 눈금 구성하기
    //그리드 라인은 축렌더러의 grid.template을 사용하여 구성할 수 있다.
	var axisRenderer = am5radar.AxisRendererCircular.new(root4, {
	  innerRadius: -80
	});

	//setAll() : 한번에 여러 키 설정
    //set : 단일 키 설정
	axisRenderer.grid.template.setAll({ 
	  stroke: root4.interfaceColors.get("background"), //축 선
	  visible: true,
	  strokeOpacity: 0.8, //불투명도
      strokeWidth: 2, //두께
      location: 0.5 //셀에서 그리드 시작위치 설정(0이면 그리드 중앙에 시리즈 존재)
	});
    
    //그리드를 시리즈 앞으로 가져올 때 (default: 시리즈 뒤에 있음)
    chart.gridContainer.toFront();
    
    //값을 표헌하는 점 
    //내가 사용할 게이지차트에는 필요없으니 주석
    /*
    axisRenderer.ticks.template.setAll({ 
    });
    */

	
    //축 범위 생성하기
    // makeDataItem() 으로 축 데이터항목 생성
    var axisDataItem = xAxis.makeDataItem({}); //value / endValue 로 범위값 지정

	// Add clock hand
	// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
	var clockHand = am5radar.ClockHand.new(root4, {
	  pinRadius: 50,
	  radius: am5.percent(100),
	  innerRadius: 50,
	  bottomWidth: 0,
	  topWidth: 0
	});

	//게이지의 침(hand) 설정
    //침(hand)의 중간 핀
	clockHand.pin.setAll({
	  fillOpacity: 0,
	  strokeOpacity: 0, //투명도
	  stroke: am5.color(0x000000),
	  strokeWidth: 0,
	  strokeDasharray: [2, 2] //점선 여부
	});
	clockHand.hand.setAll({
	  fillOpacity: 0,
	  strokeOpacity: 0,
	  stroke: am5.color(0x000000),
	  strokeWidth: 0
	});

	//시계바늘 설정
    //위에서 var clockHand = am5radar.ClockHand.new 로 생성하고
    //sprite 로 추가
	var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root4, {
	    sprite: clockHand
	  })
	);

	// createAxisRange() 으로 데이터항목에서 축 범위 생성
	xAxis.createAxisRange(axisDataItem);

	var label = chart.radarContainer.children.push(
	  am5.Label.new(root4, {
	    centerX: am5.percent(50),
	    textAlign: "center",
	    centerY: am5.percent(50),
	    paddingBottom: 100, //가운데 퍼센트 높이
	    fontSize: "3em"
	  })
	);

	//차트 처음 그릴때 초기값
	axisDataItem.set("value", 50);
    //실제 데이터(axisDataItem)의 값을 게이지 중간에 반올림하여 표기
	bullet.get("sprite").on("rotation", function () {
	  var value = axisDataItem.get("value");
	  label.set("text", Math.round(value).toString() + "%");
	});

	//CNT 총합구하고 해당 데이터의 % 계산을 위한 로직
	var total =0;
	data.forEach(function(i){
		total +=i.CNT;
	});
    
	var i = 0;
    setInterval(function () {
		  var options = {
			 	svcId   : "search",
			 	strUrl  : "${contextPath}/template/amchart/list",		// url
			 	reqGrid : "",										    //요청Key=그리드ID
			 	resGrid : "",					    					//그리드ID=응답Key
			 	param   : gfn_getFormParam("#searchForm"),              //전송할 파라미터
			 	pCall   : temp,							    			// 콜백함수 - 함수명이 아닌 참조값을 직접 전달한다. */
			 	pLoad   : false,	      								// 로딩이미지 노출 여부
			 	pSvcFlag: "SELECT",								        //서비스 플래그 SELECT, SAVE, DELETE
			 }; 
		gfn_auiTransaction(options);
	  
	}, 5000);
	
	function temp(svcId, returnData, errCd, msgTp, msgCd, msgText){
		var value = Math.round(returnData.ds_data.data[(i++)%4].CNT / total * 100);

		//침(hand)를 새 값으로 자연스럽게 바뀌도록하는 애니메이션설정
		axisDataItem.animate({
			key: "value",
 		    to: value,
 		    duration: 500,
 		    easing: am5.ease.out(am5.ease.cubic)
		});

		axisRange0.animate({
 		    key: "endValue",
 		    to: value,
 		    duration: 500,
 		    easing: am5.ease.out(am5.ease.cubic)
		});

		axisRange1.animate({
 		    key: "value",
 		    to: value,
 		    duration: 500,
 		    easing: am5.ease.out(am5.ease.cubic)
		});
 	  } 

	chart.bulletsContainer.set("mask", undefined);

	var colorSet = am5.ColorSet.new(root4, {});

	var axisRange0 = xAxis.createAxisRange(
	  xAxis.makeDataItem({
	    above: true,
	    value: 0,
	    endValue: 50
	  })
	);

	//범위 채우기 설정 : axisFill 속성
	axisRange0.get("axisFill").setAll({
	  visible: true,
	  fill: colorSet.getIndex(0)
	});

	axisRange0.get("label").setAll({
	  forceHidden: true
	});

	var axisRange1 = xAxis.createAxisRange(
	  xAxis.makeDataItem({
	    above: true,
	    value: 50,
	    endValue: 100
	  })
	);

	axisRange1.get("axisFill").setAll({
	  visible: true,
	  fill: colorSet.getIndex(4)
	});

	axisRange1.get("label").setAll({
	  forceHidden: true
	});

	// Make stuff animate on load
	chart.appear(1000, 100);
}
</script>

 

공식 사이트에서 데모 차트와 소스코드를 참고하자!

https://www.amcharts.com/demos/#gauges