[amCharts4] hiddenState
·
amCharts4
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); - Pie..
[amCharts4] pieChart
·
amCharts4
//차트 시리즈 생성 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}국가"; //..
[amCharts4] Legend
·
amCharts4
//범례 생성 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";
[amCharts4]ExportMenu
·
amCharts4
참고 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.vert..
[amCharts4] Axes(Value Axis) y축 정리
·
amCharts4
// 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(M..