AMCHART4 모듈

차트 인스턴스 생성

let chart = am4core.create("chartdiv", am4charts.PieChart);
var chart = am4core.create("chartdiv", am4charts.XYChart);

차트에 넣을 데이터 생성

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "The Netherlands",
  "litres": 50
}];

차트 레전드 추가 및 위치 조정

https://www.amcharts.com/docs/v4/concepts/legend/

chart.legend = new am4charts.Legend();
chart.legend.position = "center"; //right, left

각 X/Y 축 차트 선택하고 차트 옵션 넣기

https://www.amcharts.com/docs/v4/chart-types/xy-chart/

// X 축
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
// 옵션 추가
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.tooltip.disabled = true;

// Y 축
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 옵션 추가
valueAxis.renderer.minWidth = 50;
valueAxis.min = 0;
valueAxis.cursorTooltipEnabled = false;

XY 축에 제목 넣기

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.title.text = "X축 제목";

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Y축 제목";

x축 넓이 조정

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "x 축 제목";
categoryAxis.renderer.minGridDistance =0; // 그리도 넓이

그리드 수정

categoryAxis.renderer.grid.template.strokeOpacity = 0; // 그리드 제거 
//valueAxis.renderer.grid.template.stroke = am4core.color("#A0CA92");
//valueAxis.renderer.grid.template.strokeWidth = 2;

데이터 시리즈 삽입

var series = chart.series.push(new am4charts.LineSeries());

데이터 강조 포인트 넣기

var bullet = series1.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
    
var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;

마우스 따라다니는 커서 넣기

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

스크롤바 넣기

// Create vertical scrollbar and place it before the value axis
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;
chart.scrollbarY.toBack();

// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;

Series 추가

var series = chart.series.push(new am4charts.ColumnSeries());

// 디자인
series.columns.template.stroke = am4core.color("#ff0000"); // red outline
series.columns.template.fill = am4core.color("#00ff00"); // green fill
// 데이터 바인딩 (dataField 프로퍼티 세팅)
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
// 각 데이터 시리즈에 데이터 세팅
series1.data = [
  // Data set 1
];
series2.data = [
  // Data set 2
];

용어 정리

Series

• 유사하고 논리적으로 그룹핑된 데이터들의 모음 ( 개별적인 데이터를 묶어줌 )

• 차트에 있는 요소들의 특징과 표현에 영향을 줌.

• collection of similar, logically grouped data points.

• sets appearance and behavior of chart/map items

• binds individual items to source data

출처

https://www.amcharts.com/demos-v4/#line-area
https://www.amcharts.com/docs/v4/