【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.XYChart)

// 2. データの設定
chart.data = [
  {
    name: 'カテゴリー1',
    count: 5
  },
  {
    name: 'カテゴリー2',
    count: 8
  },
  {
    name: 'カテゴリー3',
    count: 7
  }
]

// 3. X軸の設定（カテゴリ）
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis())
categoryAxis.dataFields.category = 'name'

// 4. Y軸の設定（値）
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis())

// 5. データの紐付け
const series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.valueY = 'count'
series.dataFields.categoryX = 'name'

1. インスタンスの生成

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

2. データの設定

例として「（ブログ等の）カテゴリー別の投稿数」を想定。

chart.data = [
  {
    name: 'カテゴリー1',
    count: 5
  },
  {
    name: 'カテゴリー2',
    count: 8
  },
  {
    name: 'カテゴリー3',
    count: 7
  }
]

3. X軸（横方向）の設定

今回は値（投稿件数）をカテゴリー別に表示したいのでCategoryAxis（カテゴリー軸）を使用します。

const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis())
categoryAxis.dataFields.category = 'name'

chart.xAxesにpushしているところがポイント？🤔

ここでは省略しますが、DateAxis（日付軸）を使用することで値を日付別に表示することも可能です（参考にするならこの辺り→XY chart axis types／もしくは折れ線グラフの記事参照）。

4. Y軸（縦方向）の設定

const valueAxis = chart.yAxes.push(new am4charts.ValueAxis())

こちらはchart.yAxesにpushしています。

5. データの紐付け

慣れるまではややこしそうなところ。ここをやらないとグラフが表示されない。

const series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.valueY = 'count'
series.dataFields.categoryX = 'name'

ここにもXやYが登場しています。つまり、同じグラフ（カテゴリーと値）の縦横を入れ替えるだけならXとYを入れ替えるだけで完了します😎　便利。

おまけ：Y軸（ValueAxis）の最小値と最大値を固定したい場合

amCharts 4 はデータの値と表示サイズを参照してY軸の目盛りをよしなにします（今回のグラフも目盛の最小値が0より大きい値になってたりする）。

ValueAxisの最小値や最大値を固定したい場合は、それぞれminとmaxで指定します。

// 最小値の指定
valueAxis.min = 0

// 最大値の指定
valueAxis.max = 15

minとmaxに半端な値（小数点とか？）を与えると丸めてしまう場合があるので、それを避けるにはstrictMinMaxにtrueを設定します（が、上手いこと数値が出なかったことがあるので勉強中…🤔）。

valueAxis.strictMinMax = true

あとがき

この棒グラフはamCharts的には「XY Chart」という種類になるのですが、ぶっちゃけ方眼紙が渡されているような状態で、できることが多すぎてややこしさを増している気がします🤔

関連投稿

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

参考

・Anatomy of an XY Chart – amCharts 4 Documentation