【amCharts 4】簡単な円グラフの作り方

amCharts 4 の使い方がよー分からんかったので、少しずつ使い方を勉強していく過程のメモです。まずはコード量が少なそうな円グラフから🤔

今回作るもの

最低限のコードで作れる円グラフです。

※下のCodePen埋め込みが表示されない場合は、一度CodePenのサイトにアクセスすると表示されるようです🙄

全体的なコード

ライブラリは予め読み込んでおくこと。

HTML

<div id="chartdiv"></div>

CSS

今回は大きさの指定のみ。

#chartdiv {
  width: 100vw;
  height: 100vh;
}

JavaScript

// 1. インスタンスの生成
const chart = am4core.create('chartdiv', am4charts.PieChart)

// 2. データの設定
chart.data = [
  { name: 'カテゴリー１', val: 15 },
  { name: 'カテゴリー２', val: 10 },
  { name: 'カテゴリー３', val: 5 }
]

// 3. データの紐付け
const pieSeries = chart.series.push(new am4charts.PieSeries())
pieSeries.dataFields.category = 'name'
pieSeries.dataFields.value = 'val'

1. インスタンスの生成

createの第一引数に、グラフを表示したい要素のID（またはHTMLElement）を指定する。第二因数には表示したいグラフのクラス（ここではPieChart＝円グラフ）を指定する。

const chart = am4core.create('chartdiv', am4charts.PieChart)

createの第一引数の指定が正しい場合、この一行だけで指定した要素の中にamChartsのロゴマークが表示される。

2. データの設定

データには円グラフの項目名と値を持たせる。連想配列のキーは好きなもので良い。

chart.data = [
  { name: 'カテゴリー１', val: 15 },
  { name: 'カテゴリー２', val: 10 },
  { name: 'カテゴリー３', val: 5 }
]

3. データの紐付

chart.seriesに「データが表示される部分（言い方わからん🤔）」を追加する（今回は円グラフなのでPieSeriesになっている）。

const pieSeries = chart.series.push(new am4charts.PieSeries())
pieSeries.dataFields.category = 'name'
pieSeries.dataFields.value = 'val'

あとがき

これだけのコードで綺麗な円グラフが作れるなんて便利だなーと思った次第🤔　スニペットを用意しておくと便利そう（というわけでこのメモを書いた）。

関連投稿

・【amCharts 4】簡単な棒グラフの作り方
・【amCharts 4】簡単な折れ線グラフの作り方

参考

・Anatomy of a Pie Chart – amCharts 4 Documentation
・Instance – amCharts 4 Documentation