チャートの形状を変更する

前回の説明にもあるが改めて解説する。

vueファイルではなくjsファイルのインポート部に記述。

//棒グラフの場合 = "Bar" をインポート
import { Bar, その他 } from 'vue-chartjs'

// 中略

//必ずこちらにも記述
mixins: [Bar, その他 ],

vue-chart.js のマニュアルがあまり充実しておらずチャートの種類に関する記述がない。これはChart.js側を参照すれば良いかとも考えられるが若干仕様が違うようだ。

例えば Chart.jsでは横の棒グラフにする場合はBarのオプションで設定するがvue-chart.js は初めからHorizontalBar を読まなければいけない。

そこでvue-chart.jsのdefinitionを参照し列挙する。

export class Bar extends BaseChart {}
export class HorizontalBar extends BaseChart {}
export class Doughnut extends BaseChart {}
export class Line extends BaseChart {}
export class Pie extends BaseChart {}
export class PolarArea extends BaseChart {}
export class Radar extends BaseChart {}
export class Bubble extends BaseChart {}
export class Scatter extends BaseChart {}

この中から選択すればよいだろう。

公式と比べると特別こちらにだけ記述があるものはHorizontalBarだけのようなのでここまで詳しく見る必要はないかもしれない。

というわけで公式はChartsの項目を見ておけば良さそうだ。

各データセットに対する設定

前回の悪徳商材のデータセットを例に解説する。

      {
        labels: ["A", "B", "C", "D"],
        datasets: [
          {
            label: "悪徳商材",
            data: [20, 30, 40, 50]
          }
        ]
      }

データセット(datasets)の中に入れるオプション

チャート描画の概念が理解できていない可能性も兼ねてもう一度軽く説明すると、まず全体の描画用キャンバスがあり、その中に幾つものチャートを重ねて表示できるのがChart.jsだ。

つまりデータを何種類も放り込んで棒グラフと線グラフを同時に表示ということもできる。

それを例にすれば線グラフには線グラフ用の、棒グラフには棒グラフ用の設定をそれぞれ当てはめてやる事ができる。

ということで、各データセットにそれぞれ設定を記述できるようになっている。

labelやdataと同じ階層に「キー名(設定項目)」と「値」を入れる

      {
        labels: ["A", "B", "C", "D"],
        datasets: [
          {
            label: "悪徳商材",
            data: [20, 30, 40, 50],
            //ここに「キー(プロパティ名)：値」で指定していく
            backgroundColor: 'red',
            borderWidth: '2',
            borderColor: 'green',
            hoverBackgroundColor: 'blue',
            barPercentage: 0.5
          }
        ]
      }

実行結果

公式の何処を参照すればよいか

まずはChartsを開いてチャートの種類を選択する

Dataset Propaties より下の表はほぼ全て設定項目

ただし、先程述べた「横の棒グラフは棒グラフとは独立している」などのvue-chart.js独自の仕様により キー名：Type が使用できないなど制限があるようだ。詳しくは調べきれないので各自試してみてほしい。

日本語訳サイトがある

公式ではないが有志による日本語訳がある

チャート全体の設定を変更するには

これまではチャート内部の各データセットについて設定を行ったが全体的なオプションは別の箇所に記述する。

前準備

テンプレートに:options="options" を追加。

<template>
  <BarChart :chart-data="datacollection" :options="options" />
</template>

グローバル変数にoptionsを宣言しておく。

  data: () => ({
    datacollection: null,
    options: null //これ
  }),

optionsに設定を入れる

データをセットするタイミングでthis.optionsも更新すればチャートの表示が変化する。

データ構造は同様に連想配列（キー名：値）

次はあくまで一例。各自設定は変わる。

      this.options = {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          position: "bottom"
        },
        layout: {
          padding: 20
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true, 
                min: 0,
                max: 50 
              }
            }
          ]
        }
      }

実行結果

左側Aのメモリが見やすくなり、凡例(悪徳商材のラベル)位置が一番下へ変更された。

残念お知らせ

まず公式のドキュメント情報が分散しすぎてオプション一覧へのナビゲーションを簡潔に説明できない。

ここはもうよく使うものを纏めたサイトが必要になりそうな印象だ。

というわけで今回は上の例で出したオプションのみ解説して残りは必要に応じて記事を切っていけばいいかと考える。

options例の解説

responsive

これをtrueにすることによってブラウザの横幅に応じて高さを自動調整する。

基本的にPCの画面は縦幅より横幅のほうが長くなっている場合が多いので横幅に応じて高さが大きすぎて画面外に表示されてしまう。

これをOFFにすると逆にサイズが調整できず不便だろう。どうやら多くのユーザはresponsiveはtrueにしてCSS側でサイズ調整しているようだ。

maintainAspectRatio

responsiveとセットで使われることが多い。

これは先程の縦幅の問題をある程度解決する。これをtrueにすると横幅はレスポンシブになるが縦幅は変更されないというもの。ただし高さの絶対値が指定する方法がないようなので注意。

legend

「凡例」に関する項目。ここでは表示箇所をposition: "bottom"によって下部に変更している。

legendに関しては公式にまとまっているので参照していただきたい(にほんご)

layout

layoutの内側は常にpaddingしか指定できない。CSSのpaddingとほぼ同様で内側に余白が設けられる。次のようにすれば上下左右別々で設定できる。

        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }

scales

特にこれに関しては情報が分散していて理解が困難だった。

いくつかのサイトでは「もうこういうものだ」と思って設定しているようだ。

とりあえず読み取れることは、ここではy軸について設定しており最小値を0、最大値を50としている。

この設定のおかげで今までAの棒グラフが潰れてしまっていた問題が解決されている。

また beginAtZero: true はメモリを０からスタートさせるオプションのようだ。

これさえ設定しておけばminとmaxがなくとも0メモリからスタートする(棒グラフが潰れない)

さいごに

正直公式のドキュメントが英語かそうでないかに関わらず分かりにくすぎると感じる。

これは読む側のリテラシーの問題なのかもしれないのでご了承願いたい。

optionsについて細かく理解でき次第記事にしていく。