====== 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
템플릿 파일
* [[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)
{
// 생성된 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);
}