【vue-chartjs】グラフのオプションを一括設定したい【#np2020】

Vue.js と Chart.js を連携させてグラフを描画する場合、ラッパーとして「vue-chartjs」を使うと面倒なことがかなり省略できて楽です。ファイルさえ準備しておけばデータを入れて簡単にグラフが描画できるというイメージでしょうか。導入に関しては公式サイトなどを参照してください。

最初に | vue-chartjs

で、例にならって次の2つのファイルを用意しました。

LineChart.js
Chart.vue

「LineChart.js」の方で基本的な設定を行い、「Chart.vue」でデータやオプションを入れていくという感じです。新しいグラフを作るのに触るのは「Chart.vue」で、「LineChart.js」は基本的に触りません。またデータはAPIを利用してJSON形式で取得し、そのままpropsに入れます。まあこの記事ではvue-chartjsの詳しい使い方には触れませんので、ドキュメント等見てください。

グラフのオプションはデータを一緒にグラフごとに渡す必要がある

「塗りつぶしのない複数の折れ線グラフを作る」場合にチャートに渡すデータはこうなります。

グラフのデザインに関するオプションが各グラフのデータに入ってしまっているのが気になります。上で想定した設計では、APIの方でグラフデザインに関するオプションを設定するか、APIから返ってきたデータ内の各グラフにVue側で値を設定していくことになりますが、前者は「グラフのデータだけを返す」というAPIのシンプルな設計を壊すことになるし、後者は処理が煩雑になります。なんとかならないのか。

Chart.jsのドキュメントにはこういう記述があるんですが、

Line · Chart.js documentation
Default Options

It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in Chart.defaults.line. Changing the global options only affects charts created after the change. Existing charts are not changed.

For example, to configure all line charts with spanGaps = true you would do:
Chart.defaults.line.spanGaps = true;

それに該当する設定方法がvue-chartjsに見当たらないんですよね。

解決方法

optionsをpropsで渡すようにして、そのoptionsを次の通りに設定するとグラフのでフォルト値を設定できます。

Chart.vue全体はこんな感じ。

なんでこう書くと適用されるのかよくわかりませんが（~~少なくともドキュメントには書かれてない~~ → 追記参照）、fill以外にもbackgroundColorやborderColorなんかも指定できます。例えばベジェ曲線を使うかどうかの「lineTension」はこう書くみたいです。

こういうの、どこかにまとまってたりしないのかな……