꾸준2

amchart 애니메이션 효과

- PieChart 처음 생성될때 공백에서 시계방향으로 만들어지는 효과
pieSeries.hiddenState.properties.endAngle = -90;

- PieChart 처음 생성될때 원이 점점 커지거나 작아지는 효과(percent(0) : 점점 커지는 효과, percent(100) : 점점 작아지는 효과)
chart.hiddenState.properties.radius = am4core.percent(0);

- PieChart 처음 생성될때 차트 안에 공백 원 생성(percent(0) : 공백 X, percent(30) : 적절한 공백, percent(100) : 공백 상당히 큼)
chart.innerRadius = am4core.percent(30);

- PieChart 처음 생성될때 공백 원이 점점 커지거나 작아지는 효과(percent(0) : 점점 커지는 효과, percent(100) : 점점 작아지는 효과)
chart.hiddenState.properties.innerRadius = am4core.percent(0);

//차트 시리즈 생성
var pieSeries = chart.series.push(new am4charts.PieSeries());

//바인딩할 데이터 이름
pieSeries.dataFields.value = "litres";

//데이터 분류(category) 이름
pieSeries.dataFields.category = "country";

//파이 부분별 구분선 색
pieSeries.slices.template.stroke = am4core.color("#fff");

//파이에 마우스오버 시 표시할 툴팁 설정
pieSeries.slices.template.tooltipText="툴팁";

//파이 부분별 라벨 이름
pieSeries.labels.template.text = "{country}국가";

//데이터 꼬랑지 라벨선을 삭제할 때 
pieSeries.ticks.template.disabled = true;

//라벨 자체를 싹 다 없애고 싶을 때
pieSeries.labels.template.disabled = true;

//범례 생성
chart.legend = new am4charts.Legend();

//범례 높이사이즈
chart.legend.maxHeight = 50;

//범례 스크롤 여부
chart.legend.scrollable = true;

//범례 이름 설정
chart.legend.labels.template.text="국가 : {데이터 키}";

//범례 위치 설정(right, botton, left)
chart.legend.position = "right";

참고
https://www.amcharts.com/docs/v4/reference/exportmenu/

ExportMenu 클래스
- 차트를 image : (png, svg) data : (json, xlsx, csv)등으로 파일을 내보내주는 클래스
- items을 설정 하지 않을경우 모든 파일로 내보내기 가능(필요한 기능만 사용하려면 items에 선언)

var chart = am4core.create("chartdiv", am4charts.XYChart); // 차트 선언

chart.exporting.menu = new am4core.ExportMenu(); // 클래스 선언
chart.exporting.menu.align = "left"; // 좌우 정렬
chart.exporting.menu.verticalAlign = "top"; // 상하 정렬

chart.exporting.menu.items = [ // 저장할 파일 설정
  {
    "label": "...",
    "menu": [
      { "type": "png", "label": "PNG" },
      { "type": "json", "label": "JSON" },
      { "label": "Print", "type": "print" }
    ]
  }
];

chart.exporting.adapter.add("data", function(data) { // data 파일 저장할때 반복문 안에 있는 값 수정해서 파일 저장 해줌
  for (var i = 0; i < data.data.length; i++) {
    data.data[i].number = "#" + (i + 1);
  }
  return data;
});

		// 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}[/]";