【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 = [
  {
    date: new Date(2020, 4),
    count: 10
  },
  {
    date: new Date(2020, 5),
    count: 12
  },
  {
    date: new Date(2020, 6),
    count: 5
  }
]

// 3. X軸の設定（日付）
const dateAxis = chart.xAxes.push(new am4charts.DateAxis())

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

// 5. データの紐付け
const series = chart.series.push(new am4charts.LineSeries())
series.dataFields.valueY = 'count'
series.dataFields.dateX = 'date'

1. インスタンスの生成

棒グラフと同じくXYChartのクラスを指定しています。X軸の種類（カテゴリーから日付へ）とデータの表示方法（バーから線へ）が異なりますが、お仲間さんになります😲

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

2. データの設定

今回はデータに日付を持つようになりました。Dateに年月を渡してオブジェクトを生成します。

※月は「0〜11」で指定します（5月なら「4」になる。「英語の月名を配列で取得するのに便利」とどこかで読んだ気がした）。

chart.data = [
  {
    date: new Date(2020, 4),
    count: 10
  },
  {
    date: new Date(2020, 5),
    count: 12
  },
  {
    date: new Date(2020, 6),
    count: 5
  }
]

3. X軸の設定（日付）

今回は値を日付別に表示したいので、DateAxis（日付軸）を使用します。

const dateAxis = chart.xAxes.push(new am4charts.DateAxis())

4. Y軸の設定（値）

ここは棒グラフの時と変わらず。

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

5. データの紐付け

線を表示するには、chart.seriesにLineSeriesを追加します。

棒グラフの時はcategoryXにカテゴリーのキーを指定してましたが、今回はdateXに日付のキーを指定します。

const series = chart.series.push(new am4charts.LineSeries())
series.dataFields.valueY = 'count'
series.dataFields.dateX = 'date'

おまけ1：線を太くする

初期値の線はだいぶ細いのですが、LineSeriesに対してstrokeWidthで線の太さをピクセルで指定できます。

series.strokeWidth = 2

あとがき

折れ線グラフは棒グラフとXYChart仲間というのもあってほぼコピペのようなコードになりました🤔　が、棒グラフの記事にDateAxisとLineSeriesのことを差し込むのもややこしくなりそうだなあと悩みどころ🙄

関連投稿

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

参考

・Date Axis – amCharts 4 Documentation
・LineSeries – amCharts 4 Documentation