amcharts5 기본 가이드

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

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

차트 유형별 샘플은 솔루션 설치 디렉토리 하위 xf5/ext/amcharts5/examples 디렉토리에도 있다.

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

AMCHARTS5BASEURL는 실행 파라미터에 대한 설명은 테크넷(https://technet.softbase.co.kr/wiki/manual/param/parameter_guide)을 참고한다.

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

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

관련 이벤트로 on_libload가 있다.

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

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

템플릿 파일

• amcharts5_basic.xml
• amcharts5_basic.js
• 새창으로 실행

// 차트 라이브러리가 모두 로드 되었을때 호출되는 이벤트
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)
{
	var root, chart, data, yAxis, xAxis, series1, series2, legend;

	// 생성된 root 객체 구하기
	root = this.amchart.getroot();

	// XY 차트 생성 및 설정
    chart = root.container.children.push(
		am5xy.XYChart.new(root, {
	        panY: false, // Y축 이동 비활성화
	        wheelY: "zoomX", // 마우스 휠로 X축 확대/축소 가능
	        layout: root.verticalLayout // 수직 레이아웃 설정
		})
	);

    // 차트에 사용될 데이터 정의
    data = [{
		category: "연구",
		value1: 1000,
		value2: 588
	}, {
		category: "마케팅",
		value1: 1200,
		value2: 1800
    }, {
		category: "영업",
		value1: 850,
		value2: 1230
    }];

    // Y축 생성
    yAxis = chart.yAxes.push(
		am5xy.ValueAxis.new(root, {
			renderer: am5xy.AxisRendererY.new(root, {}) // Y축의 렌더러 설정
		})
    );

    // X축 생성
    xAxis = chart.xAxes.push(
		am5xy.CategoryAxis.new(root, {
			maxDeviation: 0.2, // 최대 편차 설정(확대/축소시 사용)
			renderer: am5xy.AxisRendererX.new(root, {}), // X축의 렌더러 설정
			categoryField: "category" // 카테고리로 사용할 필드 지정
		})
    );

	// X축에 데이터 설정
    xAxis.data.setAll(data);

    // 첫 번째 시리즈(막대) 생성
    series1 = chart.series.push(
		am5xy.ColumnSeries.new(root, {
			name: "Series 1",
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value1", // Y축 값 필드
			categoryXField: "category"  // X축 카테고리 필드
		})
    );

	// 첫 번째 시리즈에 툴팁 설정
    series1.columns.template.setAll({
		tooltipText: "{categoryX}: {valueY}",
        tooltipY: 0
    });

    // 첫 번째 시리즈에 데이터 설정
    series1.data.setAll(data);

	// 두 번째 시리즈(막대) 생성
    series2 = chart.series.push(
		am5xy.ColumnSeries.new(root, {
			name: "Series 2",
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value2", // Y축 값 필드
			categoryXField: "category" // X축 카테고리 필드
		})
    );

	// 두 번째 시리즈에 툴팁 설정
    series2.columns.template.setAll({
		tooltipText: "{categoryX}: {valueY}",
        tooltipY: 0
    });

	// 두 번째 시리즈에 데이터 설정
    series2.data.setAll(data);

    // 범례 추가
    legend = chart.children.push(am5.Legend.new(root, {}));

	// 범례에 시리즈 값 설정
    legend.data.setAll(chart.series.values);
}

// Pie 차트 생성
function createPieChart()
{
	var root, chart, data, series, legend;

	// 생성된 root 객체 구하기
	root = this.amchart.getroot();

	// Pie 차트 생성 및 설정
	chart = root.container.children.push(
		am5percent.PieChart.new(root, {
			layout: root.verticalLayout // 수직 레이아웃 설정
		})
	);

	// 차트에 사용될 데이터 정의
	data = [{
		country: "프랑스",
		sales: 100000
	}, {
		country: "스페인",
		sales: 160000
	}, {
		country: "영국",
		sales: 80000
	}];

	// Pie 시리즈 생성
	series = chart.series.push(
		am5percent.PieSeries.new(root, {
			name: "Series",
			valueField: "sales", // 값으로 사용할 필드 설정
			categoryField: "country" // 카테고리로 사용할 필드 설정
		})
	);

	// 시리즈에 데이터 설정
	series.data.setAll(data);

	// 범례 추가 및 설정
	legend = chart.children.push(am5.Legend.new(root, {
		centerX: am5.percent(50), // 가로 중앙 정렬
		x: am5.percent(50),
		layout: root.horizontalLayout // 수평 레이아웃 설정
	}));

	// 범례에 데이터 설정
	legend.data.setAll(series.dataItems);
}

// XY 차트 버튼 클릭 시 호출
function btn_xy_on_mouseup(objInst)
{
	var result;

	// 차트 타입을 XY 차트로 설정
	result = this.amchart.setcharttype(1);
	console.log("result = " + result);
}

// Pie 차트 버튼 클릭 시 호출
function btn_pie_on_mouseup(objInst)
{
	var result;

	// 차트 타입을 Pie 차트로 설정
	result = this.amchart.setcharttype(2);
	console.log("result = " + result);
}