Zenn
🗒️

【Nuxt.js v2】Chart.jsでグラフに境界線を引く(chartjs-plugin-annotation)

2021/04/11に公開
Nuxt
Nuxt
Chart.js
tech

前提条件

・バージョン
vue-chartjs@3.5.1
Chart.js@2.9.3 ※1
chartjs-plugin-annotation@0.5.7 ※2

※1 Chart.js@2.9.4だと動かないので注意。
※2 Chart.js v2に対応しているのがv0.5.7のため注意。(2021/4/11現在)
chartjs-plugin-annotationの公式サイトに記載されているのは、v1の使い方のため、v0.5.7を使用する場合はGitHubのドキュメントを参照すること。
https://github.com/chartjs/chartjs-plugin-annotation/blob/1ab782afce943456f958cac33f67edc5d6eab278/README.md

Chart.js@2.9.3で固定する

npm install chart.js@2.9.3でインストールする。
package.jsonには"^2.9.3"と記述されるため、念の為"2.9.3"に書き換えておく。
（package-lock.jsonを削除してnpm installしたときに、2.9.4がインストールされてしまうのを防ぐため。）

package.json

{
  ・・・
  "dependencies": {
    ・・・
    "chart.js": "2.9.3"
  }
}

インストール

npm install chartjs-plugin-annotation@0.5.7

使い方

  1. importして、vue-ChartjsのaddPluginで追加する。
  2. options.annotation.annotations[]に、描画するラインの情報を記述する。
  • ラインを引きたい軸にIDを設定し、scaleIDで紐付ける。(以下のy-axis-1)
  • modeは横向き(y軸に対して垂直)に引くならhorizontal、縦向き(x軸に対して垂直)に引くならverticalを設定する。
<script>
import { Bar } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'

export default {
  extends: Bar,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15]
          }
        ]
      },
      options: null
    }
  },
  mounted () {
    this.addPlugin(chartjsPluginAnnotation)
    this.options = {
      scales: {
        yAxes: [
          {
            id: 'y-axis-1',
            type: 'linear'
          }
        ]
      },
      annotation: {
        annotations: [
          {
            type: 'line',
            scaleID: 'y-axis-1',
            mode: 'horizontal',
            value: 18,
            borderColor: 'black',
            borderWidth: 2,
            label: {
              enabled: true,
              content: '目標'
            }
          }
        ]
      }
    }
    this.renderChart(this.chartData, this.options)
  }
}
</script>

labelの位置調整

position, xAdjust, yAdjustでラベルの位置を調整できる。

  • position: 'left'/'right'で左右の端に配置
  • xAdjust: +値で右方向、-値で左方向へ移動
  • yAdjust: +値で下方向、-値で上方向へ移動
label: {
  enabled: true,
  content: '目標',
  position: 'left',
  xAdjust: 10,
  yAdjust: -10
}

modeがverticalの場合、positionの設定値が異なる。

  • position: 'top'/'bottom'で上下の端に配置

複数の境界線を引く

anotationsの配列に複数の設定を格納し、それぞれに異なるid属性を設定します。

annotation: {
  annotations: [
    {
      type: 'line',
      id: 'line-1',
      scaleID: 'y-axis-1',
      mode: 'horizontal',
      value: 15,
      borderColor: 'black',
      borderWidth: 2,
      label: {
        enabled: true,
        content: '前年平均',
        backgroundColor: 'black'
      }
    },
    {
      type: 'line',
      id: 'line-2',
      scaleID: 'y-axis-1',
      mode: 'horizontal',
      value: 18,
      borderColor: 'red',
      borderWidth: 2,
      label: {
        enabled: true,
        content: '目標',
        backgroundColor: 'red'
      }
    }
  ]
}

補足

上記では境界線type: 'Line'を紹介しましたが、他にも四角や円形で強調範囲を描画することもできます。

Discussion