====== 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
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/AMCHARTS5/amcharts5_basic.xml|amcharts5_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/AMCHARTS5/amcharts5_basic.js|amcharts5_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/AMCHARTS5/amcharts5_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 차트 라이브러리가 모두 로드 되었을때 호출되는 이벤트
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);
}