今回はVue.jsで「Chart.jsを使ってグラフを書こうぜ」という話です。
Chart.jsとは
多種多様なグラフを描写できるMISライセンスのOSSです。
今回はこのChart.jsをVue用に改良されたvue-chartjsを使用していきます。
vue-chartjsをインストールする
こちらを参考に進めていきます。
vue-chartjsをインストール
npmを使って開発することが多いので今回はnpmでインストールを行います。
npm install vue-chartjs chart.js --save
yarnでもインストールが出来るようなので詳しくは↑のリンクからお願いします。
グラフを作成する
グラフエリアを作成する
まずはグラフを書くための場所、グラフエリアを作成します。
最低限必要なベースはこれでOKです。
bar-chart.jsをVueファイル側でimportした上でcomponentとして読み込ませて表示させます。
何もないグラフエリアが表示されたと思います。
[11月10日追記] Componentの命名のの仕方はケバブケースとパスカルケースで挙動が変わるようです。今回はどちらでも動きますが、厳密に分けたほうが良いです。
次の章ではデータを読み込ませていきます！
グラフエリアにデータを入れる
データを入れる方法には、先程のコードのbar-chart.jsで
this.renderChart(data, options)
のdataに必要なデータを入れるだけです。
データが入れば方法は何でも良いので、bar-chart.jsに書いても、graph-view.vueに書いてもOKですが、今回はgraph-view.vueにデータを書いて、propsを使って渡す方法で行います。
bar-chart.jsは props に chartData と options を設定して外部からデータを受け付けるようにしています。
graph-view.vueでは data で chartData を定義してその中に labels や datasets が作られています。
この datasets がデータのコアになるものです。
datasetsは配列になっており、複数のグラフ情報をまとめることができます。
なおグラフ描写に関するデータはjson形式で書かれています。
シングルファイルコンポーネントの場合
Vueで実装を行う場合、シングルファイルコンポーネントで実装を行うことがあります。
具体的には先程 「bar-chart.js というファイルをVueファイルでインポートして」と言いましたが、.vueファイルで統一する場合もあります。
その場合は<template>タグを付けないようにしてください。
Template タグはマージできません
https://vue-chartjs.org/ja/guide//#vue-シングルファイルコンポーネント.vueファイルに<template>タグを含めないでください。 Vueはテンプレートをマージすることはできません。.vueファイルに空の<template>タグを追加すると、Vueは拡張されたものからではなく.vueのコンポーネントからテンプレートを取得します。その結果、空のテンプレートとエラーが発生します。
分かりにくいですが、Vueのファイルを作る場合、<template>が入っている場合、挙動が変わります。
vue-chartjsでは拡張されたものとして読み込ませたいため<template>タグを作らない.vueファイルを作ってください。
グラフを編集する
グラフは出来ましたが、気になることがあります。
Februaryのグラフが消えています！
よく見ると最小値が20になっているためグラフが表示されていないようです。
またグラフエリアも正方形のままで使い勝手が悪そうです。
ここでは先程作ったグラフを編集を行います。
optionsを設定する
chartDataと同じようにoptionsもvueのdataの中に定義していきます。
すると以下のような表示になります。
Februaryのグラフが表示されました。
また、全体的に横長になり、凡例に”点”が付きました。
点数の区切りも10点ずつになっていますね。
このようにoptionsを設定すると細かな設定を行うことが可能です。
optionsの設定はかなり多くあるので各自調べてほしいです。
まとめ
今回はChart.jsのVue向けパッケージのvue-chartjsを使ったグラフの描写を行いました。
- this.renderChart(data, options) でグラフエリアを作成
- dataにdatasetsが入った形式のjson形式のデータを入れるとグラフが描写される
- optionsでグラフのデザインやアスペクト比を変えることができる
まずはここだけを抑えてもらえればと思います。
まだまだ使いこなせていませんが、これから開発を行いながら少しずつ使い方をマスターしていこうと思います。
ここまで読んで頂きありがとうございました！
コメント