Vue.js で chart.js & vue-chart.js を使ってみる。

# 背景
サーバーレスで自分用の家計簿的なwebサービスを勉強も兼ねて開発中。入力部分はだいぶ出来てきた。次は出力系。まずはグラフ表示したい。


# 調査
調べていくうちに以下ページを発見。vue-chartjs というものを使うのがよさそう。
[vue-chartjsでグラフを描く](https://qiita.com/kiyc/items/a94a202bf06fff644f62)
[Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ](https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/)

# やってみた。
#### ライブラリインストール
vue-chartjs は、Chart.js をVueで便利に使うためのラッパーらしい。なので、最初に両方インストール必要があるらしい。

```shell
npm install vue-chartjs chart.js --save
```

#### サンプルを試す
公式ページは、色々とサンプルを紹介してくれているが、その種類が多いために、自分の目的ではどれを選ぶのがいいのか悩む。
データはAPIから取得予定なので、以下リンクのサンプルがマッチしそう。
[APIから取得したデータを用いたチャート(公式ページ)](
https://vue-chartjs.org/ja/guide/#api%E3%81%8B%E3%82%89%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E7%94%A8%E3%81%84%E3%81%9F%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88)

真似してみるも、なんかブラウザで以下エラーが。templateが定義されてないとは言っているけど、vue-chart.jsの公式ページではvueファイルにtemplate含めるなとか書いてあるし。

```
[Vue warn]: Failed to mount component: template or render function not defined.
```

次はもうちょっとシンプルと思われる以下リンクにあるサンプルを試す。こちらは自分で作成する必要があるクラスがjsファイルだし、うまく行くかも。
[チャートデータの更新(公式ページ)](https://vue-chartjs.org/ja/guide/#%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E6%9B%B4%E6%96%B0)

うまく行った。うーむ、多分vueファイルのサンプルの方法でも基本うまく行くのだろうけど、何か足りないのだろう。何にせよ、同じ事が出来るならシンプルな方がいい。後者のサンプル基本で進める。以下、サンプル成功までの手順。

- **LineChart.js** という新ファイルを**components**フォルダ以下に作成。中身はまんまサンプルのコピー。（コンポーネント側で標準のものが用意できそうなんだけどな・・・）
- サンプルでは**RandomChart.vue**というファイルで行っているが、こちらを自分のvueクラスに適用。中身ほぼコピー。

#### おまけ
棒グラフと折れ線グラフは共存可能っぽい。**chartdata.datasets.type** に**line** とか **bar** とか指定するとそのデータセットは指定されたグラフで表示される模様。
より高度な事がしたくなったら、[Chart.js 公式ドキュメントページ](https://www.chartjs.org/docs/latest/) を見てオプションとか探すのがよさそう。

# 自分用途に修正していく

#### 作りたい形式
- 横軸は日付。１週間程度のスパン。（将来は週集計、月集計も）
- 縦軸は合計金額。ただ、消費種別によって色分けしたい。
- 棒グラフでの積み上げグラフにしたい。

#### 基本部分変更
- 自分は線グラフでなく、棒グラフを使いたかったので、ファイル名やソース内の、**Line** を **Bar** に変え、**line-chart** を **bar-chart** に変更。※[ライブラリソースのここらへん](https://github.com/apertureless/vue-chartjs/blob/develop/dist/vue-chartjs.js#L311-L319) でコンポーネントのタグ名を指定している模様。この情報からタグ名取得。
- **options** には対応したいので、templateの**bar-chart** に **:options="options"** 指定を追加。もちろん **data** 関数の返り値にも **options** を追加。

#### 応用部分
- 積み上げグラフにするには、軸オプションで、**stacked: true** を設定する。[参考公式ページ](https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart)
- 種別により色を変えるには datasetの各凡例のデータに **backgroundColor** を設定する。[参考公式ページ]
(https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)

#### きれいな色使う.
前述テストでは適当に色を作って試したが、本番ではきれいな色を使いたい。自作では限界があるし超面倒。そこで色々調べたら、以下ページを発見。参考にする。
[google-paletteとchart.jsでかっこいいグラフを描く](https://qiita.com/enkatsu/items/6e5d959bc4da80c8af49) 

# 結果
こんな感じ。大分実用に耐えるものになってきました。今回はグラフ作る部分はChart.jsに任せて、自分は表示データ構築部分ロジックを組む事がメインになりました。ブラボー Chart.js です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530376/b84cd158-e38f-9ecf-a3b6-41396a294aac.png)

#### 参考になるかもしれな自分の現時点ソース。
[フロント側メイン部分Vueソース](https://github.com/silverbox/homeaccounting/blob/2-4-front-dev02/frontside/homeaccount/src/components/Graph.vue)
[AWS lambda側グラフデータ構築pythonソース](https://github.com/silverbox/homeaccounting/blob/2-4-front-dev02/aws/lambda/myhome-account-get-chart/myhome-account-get-chart.py)

# 参考にさせてもらったページ
[Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ](https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/)
[vue-chartjsでグラフを描く](https://qiita.com/kiyc/items/a94a202bf06fff644f62)
[google-paletteとchart.jsでかっこいいグラフを描く](https://qiita.com/enkatsu/items/6e5d959bc4da80c8af49)
[Chart.js 公式ドキュメントページ](https://www.chartjs.org/docs/latest/)