amcharts5 가이드

이 화면은 amcharts5 컴포넌트 샘플화면이다.

amcharts5 컴포넌트에서는 차트 타입에 따라 사용하는 라이브러리 파일을 로드하며, 로드 완료 후 root를 생성한다.

root를 이용하여 차트를 생성하는 샘플 및 자세한 사용법은 https://www.amcharts.com/docs/v5/ 페이지를 참조한다.

amcharts5의 라이브러리 파일의 기본 경로를 xframe5.js의 AMCHARTS5BASEURL에 설정해야 한다(경로 예시: ./xf5/ext/amcharts5).

└ AMCHARTS5BASEURL는 개발툴 설치폴더 > doc폴더 > 98_xFrame5_Parameter_Guide.html 참고

관련 속성으로 chart_type, animate_fps, locale가 있다.

관련 이벤트로 on_libload가 있다.

관련 API로 getcharttype, setcharttype, getroot, animate, animatefinish, animatestop가 있다.

템플릿 위치: /HTML5/COMPONENT/AMCHARTS5/amcharts5_basic

템플릿 파일

// 차트 라이브러리가 모두 로드 되었을때 호출되는 이벤트
function amchart_on_libload(objInst, chart_type)
{
	var chart_type;

	// 차트 타입 구하기
	chart_type = this.amchart.getcharttype();

	// 차트 타입이 xy 차트인 경우, xy차트 생성
	if (chart_type == 1) {
		this.createXYChart();
	}
	// 차트 타입이 pie 차트인 경우, pie차트 생성
	else if (chart_type == 2) {
		this.createPieChart();
	}
}

// xy차트 생성
function createXYChart(objInst)
{
	// 생성된 root 구하기
	var root = this.amchart.getroot();

    var chart = root.container.children.push(
      am5xy.XYChart.new(root, {
        panY: false,
        wheelY: "zoomX",
        layout: root.verticalLayout
      })
    );

    // Define data
    var data = [{
      category: "Research",
      value1: 1000,
      value2: 588
    }, {
      category: "Marketing",
      value1: 1200,
      value2: 1800
    }, {
      category: "Sales",
      value1: 850,
      value2: 1230
    }];

    // Craete Y-axis
    var yAxis = chart.yAxes.push(
      am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {
        })
      })
    );

    // Create X-Axis
    var xAxis = chart.xAxes.push(
      am5xy.CategoryAxis.new(root, {
          maxDeviation: 0.2,
          renderer: am5xy.AxisRendererX.new(root, {
        }),
        categoryField: "category"
      })
    );
    xAxis.data.setAll(data);

    // Create series
    var series1 = chart.series.push(
      am5xy.ColumnSeries.new(root, {
        name: "Series",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value1",
        categoryXField: "category",
        tooltip: am5.Tooltip.new(root, {})
      })
    );
    series1.data.setAll(data);

    var series2 = chart.series.push(
      am5xy.ColumnSeries.new(root, {
        name: "Series",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value2",
        categoryXField: "category"
      })
    );
    series2.data.setAll(data);

    // Add legend
    var legend = chart.children.push(am5.Legend.new(root, {}));
    legend.data.setAll(chart.series.values);
}

// pie차트 생성
function createPieChart()
{
	// 생성된 root 구하기
	var root = this.amchart.getroot();

	var chart = root.container.children.push(
	  am5percent.PieChart.new(root, {
	    layout: root.verticalLayout
	  })
	);

	// Define data
	var data = [{
	  country: "France",
	  sales: 100000
	}, {
	  country: "Spain",
	  sales: 160000
	}, {
	  country: "United Kingdom",
	  sales: 80000
	}];

	// Create series
	var series = chart.series.push(
	  am5percent.PieSeries.new(root, {
	    name: "Series",
	    valueField: "sales",
	    categoryField: "country"
	  })
	);
	series.data.setAll(data);

	// Add legend
	var legend = chart.children.push(am5.Legend.new(root, {
		centerX: am5.percent(50),
	  x: am5.percent(50),
		layout: root.horizontalLayout
	}));

	legend.data.setAll(series.dataItems);
}

function btn_xy_on_mouseup(objInst)
{
	var result = this.amchart.setcharttype(1);
	console.log("result = " + result);
}

function btn_pie_on_mouseup(objInst)
{
	var result = this.amchart.setcharttype(2);
	console.log("result = " + result);
}

amcharts5 기본 가이드

예시

화면 스크립트