메리

1. 차트 생성 및 데이터 바인딩

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

//3D chart로 만들 경우
// am4core.useTheme(am4themes_animated);
//let pieChart = am4core.create("pieChartDiv", am4charts.PieChart3D);

// 데이터를 직접 명시할경우
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czechia",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

//data object를 넣을경우
//pieChart.data = chartData;

2. 차트 범례 설정

//범례 생성
chart.legend = new am4charts.Legend();
//범례 높이사이즈
chart.legend.maxHeight = 50;
//범례 스크롤 여부
chart.legend.scrollable = true;
//범례 이름 설정
chart.legend.labels.template.text="국가 : {country}";

3. 차트 시리즈 설정

//차트 시리즈 생성
var pieSeries = chart.series.push(new am4charts.PieSeries());
//바인딩할 데이터 이름
pieSeries.dataFields.value = "litres";
//데이터 분류(category) 이름
pieSeries.dataFields.category = "country";
//파이 부분별 구분선 색
pieSeries.slices.template.stroke = am4core.color("#fff");
//파이에 마우스오버 시 표시할 툴팁 설정
pieSeries.slices.template.tooltipText="툴팁";
//파이 부분별 라벨 이름
pieSeries.labels.template.text = "{country}국가";

//저 수염처렁 주렁주렁 달린 라벨선을 삭제할 때 
pieSeries.ticks.template.disabled = true;

//라벨 자체를 싹 다 없애고 싶을 때
pieSeries.labels.template.disabled = true;

//가운데를 뚫고 싶다면
chart.innerRadius = am4core.percent(40);

y축 그리드 커스텀 설정, 옵션 (valueAxis)

1. valueAxis 생성

//valueAxis 생성
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

2. 최대/최소 (min, max)

// 최대,최소 설정. 미설정시 주어진 데이터 범위 내에서 알아서 보기좋게 생성함
valueAxis.min = 0;
valueAxis.max = 100;

3. 최대/최소 (strictMinMax)

//min, max를 미설정한경우 데이터의 최소/최대값을 y축 그리드의 최소/최대값으로 지정함
//썩 보기 좋지 않다. 미설정시 기본값은 false인듯.
valueAxis.strictMinMax = true;

4. 뒤집기(inversed)

//오름차순, 내림차순 설정. 미설정시 false.
//true 설정 시 y축 그리드 위아래가 뒤집힘
valueAxis.renderer.inversed = true;

5. inside

//y축 라벨이 표 안으로 들어옴
valueAxis.renderer.inside=true;

6. 라벨 숨김(minLabelPosition)

//최소값 라벨 숨김 설정
//0.01 = y축 전체 길이의 1%에 해당하는 부분
valueAxis.renderer.minLabelPosition = 0.01;

7. 투명도(strokeOpacity)

//y축 획의 투명도
//미설정시 기본 0인듯하며 1 설정시 불투명함
valueAxis.renderer.line.strokeOpacity = 1;

8. 두께 (strokeWidth)

// y축 획의 두께
valueAxis.renderer.line.strokeWidth = 2;

9. 표시 위치(opposite)

//y축 획 표시 위치.
//미설정시 기본 왼쪽, true 설정시 오른쪽
valueAxis.renderer.opposite = true;

10. 글자 색(label fill)

//y축 라벨 글자 색 
valueAxis.renderer.labels.template.fill = "#ffa200";

11. 선 색 (line stroke)

//y축 획의 색
valueAxis.renderer.line.stroke = "#ffa200";

12. y축 그리드 간격 (minGridDistance)

//y축 그리드의 최소간격
valueAxis.renderer.minGridDistance = 30;

13. 범례 표시 (title)

valueAxis.title.text="percentage";

시리즈에 적용하기

 series.yAxis = valueAxis;

여러개의 시리즈를 생성할 때

여러개의 y축을 사용하고 싶은경우 

시리즈 생성할때마다 valueAxis를 생성해주면 된다