ブログ

BLOG

amChartsでグラフを描いてみよう

2020年3月24日
amChartsでグラフを描いてみよう

Javascriptでグラフ描画

こんにちは、yuです。

最近仕事で作っているAIのデモアプリで、グラフを描く必要があったため、手頃なものを探しました。
amChartsです。

このソフトの特徴は色々なサイトを調べると

- 導入が簡単
- グラフがきれい&種類が豊富
- 機能が豊富
- コードを殆ど書かなくて良い、jsで完結
- フリー版でも機能制限がない
- TypleScriptとES6に対応
- チュートリアルが丁寧

だそうです。取っ掛かり安いと思い、使うことにしました。

基本的な書き方

それでは実際にamchartsを使ってグラフを描いていきます。そのためにまずインストールしましょう。

NPM

npm install @amcharts/amcharts4-geodata

Yarn

npm install @amcharts/amcharts4-geodata

ただし、今回はcodepenでコードと処理結果をインタラクティブに見せたいので、CDNを使うことにします。

CDN

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>

詳細は下記に書かれています。

それでは実際に描いてみましょう。チュートリアルにあった円グラフをコピペしました。

See the Pen
dyogvdL
by uyuutosa (@qazgry819)
on CodePen.

CODEPENに描くと、webブラウザ上で簡単に結果を確認できます。お手軽ですね。

コードの説明をします。まずはhtmlの部分を見てみます。

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>

こちらはCDNですね、ライブラリを読み込んでいます。

<div id="chartdiv" style="width: 900px; height: 800px;"></div>

こちらはグラフの描画領域を設定しています、幅900ピクセル、高さ800ピクセルで描画するように設定しています。

次にjsを見てみましょう

// Create chart instance
let chart = am4core.create("chartdiv", am4charts.PieChart);

こちらで、chartのオブジェクトを定義しています。今回はPie Chartを描画するのでam4charts.PieChartを呼んでいます。

// Create pie series
let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

ここで、データを定義しています。ここで、am4charts.PieSeriesというクラスが呼ばれています。これはSeriesの派生クラスで、Seriesはamchartsでデータやその設定を管理します。

次に、グラフの横軸、縦軸のラベルをそれぞれ設定します。

series.dataFields.value = "litres";
series.dataFields.category = "country";

次に、データを定義します。


// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "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
}];

最後に、legendを足します。

// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();

いかがでしたでしょうか、割と少ない行数で円グラフを描くことができました。

色々機能が豊富ですが、個人的に良いと思う機能がResponsive対応です。

次回はこちらを使っていみたいと思います。