[Javascript] amcharts Charts & Maps - Column Chart (컬럼 차트)

https://www.amcharts.com

JavaScript charting library - amCharts 4

 

Demo에 가보면 예제를 볼 수 있다.

그 중에서 나는 column-with-rotated-series를 사용하였다.

 

 

ajax로 데이터를 가져와서 Chart를 뿌려주는 것을 만들려고 한다.

 

data 형식은 아래와 같다.

var data = [
  {category: "USA", value: 2025}, 
  {category: "China", value: 1882}, 
  {category: "Japan", value: 1809}, 
	... 생략 ... 
  {category: "Germany", value: 1322}];

 

column-chart.js

var ColumnChart = function () {
  this.initEvents();
}

ColumnChart.prototype.initEvents = function () {

}

ColumnChart.prototype.getData = function (url, id) {
  var _this = this;

  $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    async: false,
    success: function(data) {
      _this.renderChart(id, data)
    },
    error: function(err) {
      alert("적용 중 에러가 발생하였습니다.");
      console.log(err);
    }
  });
}

ColumnChart.prototype.renderChart = function (chartId, data) {
  var root = am5.Root.new(chartId);

  root.setThemes([
    am5themes_Animated.new(root)
  ]);

  var chart = root.container.children.push(
    am5xy.XYChart.new(root, {
      panX: false,
      panY: false,
      layout: root.verticalLayout
    })
  );

  // y좌표 설정
  var yRenderer = am5xy.AxisRendererY.new(root, {});
  yRenderer.labels.template.setAll({
    fontSize: 13 // y좌표 폰트 크기 조정
  });

  var yAxis = chart.yAxes.push(
    am5xy.ValueAxis.new(root, {
      renderer: yRenderer
    })
  );

  // x좌표 설정
  var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
  xRenderer.labels.template.setAll({
    centerY: am5.p10,
    centerX: am5.percent(50),
    paddingRight: 0,
    fontSize: 13 // x좌표 폰트 크기 조정
  });

  var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    maxDeviation: 0.3,
    categoryField: "category", // 카테고리 명을 적어주면 된다.
    renderer: xRenderer,
  }));

  xAxis.data.setAll(data);

  var tooltip = am5.Tooltip.new(root, {
    labelText: "{valueY}",
    autoTextColor: false // 문자 색상을 설정할 수 있다. autoTextColor: false로 색상 설정을 없앰.
  });

  var series = chart.series.push(
    am5xy.ColumnSeries.new(root, {
      name: "Chart Name",
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: "value",
      categoryXField: "category", // x좌표 categoryField와 일치시킨다.
      tooltip: tooltip
    })
  );

  series.columns.template.setAll({
    cornerRadiusTL: 5,
    cornerRadiusTR: 5,
    width: 32 // 컬럼의 너비 설정
  });

  // 컬럼 색상 설정 -> 기본으로 설정
  series.columns.template.adapters.add("fill", function (fill, target) {
    return chart.get("colors").getIndex(series.columns.indexOf(target));
  });
  series.columns.template.adapters.add("stroke", function (stroke, target) {
    return chart.get("colors").getIndex(series.columns.indexOf(target));
  });

  series.data.setAll(data);
  chart.set("cursor", am5xy.XYCursor.new(root, {}));
}

 

index.html

<div class="category-chart">
 <div class="row">
  <div class="box">
   <div class="category-name">Category</div>
   <div id="category-chart" class="chart"></div>
  </div>
 </div>
</div>

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script>
    var ColumnChart = new ColumnChart();

    $(function () {
      ColumnChart.getData('/category', 'category-chart'); // ajax로 data를 가져와 chart를 그려준다.
    })
</script>

 

chart.css

.category-chart {
  width: 100%;
}

.box {
  /* width: 48%; */
  background-color: rgba(238, 238, 238, 0.4);
  padding-top: 20px;
  padding-bottom: 16px;
  margin-left: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

.category-name {
  font-weight: bold;
  text-align: center;
  margin-bottom: 6px;
}

.chart {
  height: 300px; /* height를 꼭 지정해주어야 한다. */
}