i-Vinci TechBlog
株式会社i-Vinciの技術ブログ

Vue.jsでChart.js触ってみた

こんにちは!元自衛官エンジニアの藤田です!
最近、新しいPCを手に入れて作業が捗っています。PCのスペックに制限を受けずに自分のペースでアウトプットができるって素晴らしいですね!

さて、最近Vue.jsを触り始めました。
今回は、Char.jsをVue.jsで使用するためのラッパーであるvue-chartjsを使って色々と書いてみたので、その成果物を共有します。

成果物

GitHubのリポジトリはこちらです。

  1. 棒グラフ

  1. 積み上げ棒グラフ

  1. クリックした棒をハイライトする棒グラフ

  1. 特定のデータの背景を塗りつぶす棒グラフ

  1. 特定のデータの棒の境界線を破線にする棒グラフ

実装箇所の説明とは

それぞれのグラフの実装箇所を説明します。
今回、グラフの種類ごとにコンポーネントを分けて実装しています。
(見る人が興味がある実装方法に集中して見やすくするため)

棒グラフ

実装箇所はこちらです。
特に説明する必要がないですね。

積み上げ棒グラフ

実装箇所はこちらです。
これも、特に説明は必要ないでしょう。

クリックした棒をハイライトする棒グラフ

実装箇所はこちらです。
ポイントは、クリック時にハイライトする対象の棒について、データの配列上のインデックスを取得する処理を、オプションのonClick要素に渡しているところです。
クリックされた棒の配列上の位置が分かれば、グラフを描画する関数に渡すデータに設定する背景色の設定を、対象の棒だけ変えることができます。

特定のデータの背景を塗りつぶす棒グラフ

実装箇所はこちらです。
データの値が0の時にチャートの背景色を灰色に塗るpluginを作成して、グラフを描画する関数に渡しています。
Chart.jsで少し凝ったことやオプションで実現できないことは、大抵プラグインをいい感じにいじればできるようになります。  
pluginの作成にあたっては、canvasの基本的な知識が必要になることが多いです。

特定のデータの棒の境界線を破線にする棒グラフ

実装箇所はこちらです。
こちらも破線を描く対象のデータの時に破線で棒を囲むpluginを作成しています。
破線を描く対象のデータのインデックスをVueインスタンスのdata.dashedBarIdxs(あ、英語的に変な複数形ですね。こんな時もあります)に格納して、pluginの処理の中で利用しています。
破線を描いているのはこちらです。

まとめ

vue-chartjsを使うコツとしては、pluginなどで処理に利用するデータをいい感じにVueインスタンスのdataに持ってあげる事でしょうか。
あとはvue-chartjsは公式のドキュメントにも記載があったのですが、"リアクティブ"な部分が少し弱いです。そこら辺をケアしてあげれば、すごくいい感じにグラフを画面に作ることができるので、いい感じですね。(いい感じって便利ですね!)
vue-chartjsを使う人の参考になれば嬉しいです。