[amCharts4] Axes(Value Axis) y축 정리

 

		// XYChart 생성
		XYChart = am4core.create("XYChart", am4charts.XYChart);

		// 데이터 랜덤값
	    var numA = Math.floor(Math.random() * 30) + 300;
	    var numB = Math.floor(Math.random() * 30) + 200;
	    var numC = Math.floor(Math.random() * 30) + 200;
	    var numD = Math.floor(Math.random() * 30) + 100;
	    var numE = Math.floor(Math.random() * 30) + 250;
	    var numF = Math.floor(Math.random() * 30) + 180;  
	    var numG = Math.floor(Math.random() * 30) + 120;
	    var numH = Math.floor(Math.random() * 30) + 50;
	    
	    
		// 차트 데이터 만들기
		XYChart.data = [{
			id: 1,
		    "type": "A",
		    "test1": numA,
		    "test2": numB,
		    "test3": numA - 30
		}, {
			id: 2,
		    "type": "B",
		    "test1": numC,
		    "test2": numD,
		    "test3": numA - 30
		}, {
			id: 3,
		    "type": "C",
		    "test1": numE,
		    "test2": numF,
		    "test3": numA - 30
		}, {
			id: 4,
		    "type": "D",
		    "test1": numG,
		    "test2": numH,
		    "test3": numA - 30
		}, {
			id: 5,
		    "type": "E",
		    "test1": numA,
		    "test2": numD,
		    "test3": numA - 30
		}];

		// test2 최솟값 최댓값 구하기
		var max = XYChart.data.reduce((prev, cur)=>{
		    return prev.test2 > cur.test2 ? prev : cur;
		});
		
		var min = XYChart.data.reduce((prev, cur)=>{
		    return prev.test2 > cur.test2 ? cur : prev;
		});
	
		// X축 생성 및 설정
		var categoryAxis = XYChart.xAxes.push(new am4charts.CategoryAxis());
		categoryAxis.dataFields.category = "type";
		categoryAxis.fontSize = "18px";
		categoryAxis.fontWeight = "bold";  
		categoryAxis.renderer.minGridDistance = 30;
		

		// 1번째 y축 생성 및 설정
		var valueAxis = XYChart.yAxes.push(new am4charts.ValueAxis());
		valueAxis.title.text = "test1";
		valueAxis.title.fontWeight = 800; 
		valueAxis.fontSize = "18px";
		valueAxis.fontWeight = "bold";    
		
		// 2번째 y축 생성 및 설정	
		var valueAxisRight = XYChart.yAxes.push(new am4charts.ValueAxis());
		// y축 범례 관련
		valueAxisRight.title.text = "test2"; // 범례 제목
		valueAxisRight.title.fontWeight = 800; // 범례 글자 굵기
		
		// y축 라벨 관련
		valueAxisRight.fontSize = "15px"; // 글자 크기
		valueAxisRight.fontWeight = "bold"; // 글자 굵기
		valueAxisRight.min = min.test2; // 라벨 최솟값
		valueAxisRight.max = max.test2; // 라벨 최댓값
		
		// y축 위치 관련
		valueAxisRight.renderer.opposite = true; // y축 오른쪽으로 설정
		valueAxisRight.renderer.inversed = true; // y축 데이터 위아래 뒤집기(false : 아래, true : 위)
		//valueAxisRight.renderer.inside=true; // y축 라벨 값 차트 안으로 넣기
		valueAxisRight.renderer.minLabelPosition = 0.01; // 최솟값 라벨 지우기
		valueAxisRight.renderer.line.strokeOpacity = 1; // y축 획(선) 투명도(0:투명, 1:불투명)
		valueAxisRight.renderer.line.strokeWidth = 2; // y축 획(선) 넓이
		valueAxisRight.renderer.labels.template.fill = "black"; // 축 라벨 색깔 지정하기
		valueAxisRight.renderer.line.stroke = "red"; // 축 획(선) 색깔 지정하기

		// 차트 안에 마이스를 커서했을 경우 tooltipText 및 데이터 값 나오게해줌
		XYChart.cursor = new am4charts.XYCursor();
	
		// Create series
		var series = XYChart.series.push(new am4charts.ColumnSeries());   
		series.dataFields.valueY = "test1";
		series.dataFields.categoryX = "type";
		series.clustered = false;
		series.tooltipText = "{categoryX} -> {valueY}[/]";
	
		var series2 = XYChart.series.push(new am4charts.ColumnSeries());
		series2.dataFields.valueY = "test2"; 
		series2.dataFields.categoryX = "type";  
		series2.clustered = false;
		series2.columns.template.width = am4core.percent(30);
		series2.tooltipText = "{categoryX} -> {valueY}[/]";