Vue.jsでChart.js触ってみた
こんにちは！元自衛官エンジニアの藤田です！
最近、新しいPCを手に入れて作業が捗っています。PCのスペックに制限を受けずに自分のペースでアウトプットができるって素晴らしいですね！
さて、最近Vue.jsを触り始めました。
今回は、Char.jsをVue.jsで使用するためのラッパーであるvue-chartjsを使って色々と書いてみたので、その成果物を共有します。
成果物
GitHubのリポジトリはこちらです。
- 棒グラフ
- 積み上げ棒グラフ
- クリックした棒をハイライトする棒グラフ
- 特定のデータの背景を塗りつぶす棒グラフ
- 特定のデータの棒の境界線を破線にする棒グラフ
実装箇所の説明とは
それぞれのグラフの実装箇所を説明します。
今回、グラフの種類ごとにコンポーネントを分けて実装しています。
（見る人が興味がある実装方法に集中して見やすくするため）
棒グラフ
実装箇所はこちらです。
特に説明する必要がないですね。
積み上げ棒グラフ
実装箇所はこちらです。
これも、まぁ大丈夫でしょう。
ここらへんの実装でサンプルコードが必要な人は、もっと別の記事なり書籍なりを見た方がいい気がしなくもないですが、見てくれてありがとう！！
クリックした棒をハイライトする棒グラフ
実装箇所はこちらです。
ポイントは、クリック時にハイライトする対象の棒について、データの配列上のインデックスを取得する処理を、オプションのonClick要素に渡しているところです。
クリックされた棒の配列上の位置が分かれば、グラフを描画する関数に渡すデータに設定する背景色の設定を、対象の棒だけ変えることができます。
特定のデータの背景を塗りつぶす棒グラフ
実装箇所はこちらです。
データの値が0の時にチャートの背景色を灰色に塗るpluginを作成して、グラフを描画する関数に渡しています。
Chart.jsで少し凝ったことやオプションで実現できないことは、大抵プラグインをいい感じにいじればできるようになります。
pluginの作成にあたっては、canvasの基本的な知識が必要になることが多いです。
特定のデータの棒の境界線を破線にする棒グラフ
実装箇所はこちらです。
こちらも破線を描く対象のデータの時に破線で棒を囲むpluginを作成しています。
破線を描く対象のデータのインデックスをVueインスタンスのdata.dashedBarIdxs（あ、英語的に変な複数形ですね。こんな時もあります）に格納して、pluginの処理の中で利用しています。
破線を描いているのはこちらです。
まとめ
vue-chartjsを使うコツとしては、pluginなどで処理に利用するデータをいい感じにVueインスタンスのdataに持ってあげる事でしょうか。
あとはvue-chartjsは公式のドキュメントにも記載があったのですが、"リアクティブ"な部分が少し弱いです。そこら辺をケアしてあげれば、すごくいい感じにグラフを画面に作ることができるので、いい感じですね。（いい感じって便利ですね！）
vue-chartjsを使う人の参考になれば嬉しいです。