X/Y chart

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

Anatomy of an XY Chart – amCharts 4 Documentation

차트 스크립트

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>

차트 div연결

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

차트 데이터 만들기

chart.data = [{
  "country": "Lithuania",
  "litres": 501
}, {
  "country": "Czechia",
  "litres": 301
}, {
  "country": "Ireland",
  "litres": 201
}, {
  "country": "Germany",
  "litres": 165
}, {
  "country": "Australia",
  "litres": 139
}, {
  "country": "Austria",
  "litres": 128
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

차트데이터 외부연결

chart.dataSource.url = "chart_data.json";

차트 X축 생성(?)

x축의 값이 String 타입일때

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

x축의 값이 date타입일때

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

차트모양

사각형 타입

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

라인 타입

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

혼합형일때

var series = chart.series.push(new am4charts.ColumnSeries());
series.name = "Sales";
series.columns.template.tooltipText = "Series: {name}\nCategory: {categoryX}\nValue: {valueY}";
series.columns.template.fill = am4core.color("#104547"); // fill

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "Units";
series2.stroke = am4core.color("#CDA2AB");
series2.strokeWidth = 3;
series2.dataFields.valueY = "units";
series2.dataFields.categoryX = "country";

아직 잘 모르겠으나 데이터하고 차트를 연결해 주는 부분인듯 하다

series.name = "Sales";
series.columns.template.tooltipText = "Series: {name}\nCategory: {categoryX}\nValue: {valueY}";
series.columns.template.fill = am4core.color("#104547"); // fill
series.dataFields.valueY = "litres";
series.dataFields.categoryX = "country";

차트의 X축 부분이 date 타입일때

series.dataFields.dateX = "date";