nuxtでvue2-highchartsを使って折れ線グラフを描写してみた

まず、vue2-highcharts公式ドキュメントの「Using with Nuxt.js」にある通り、pluginsディレクトリに「vue-highcharts.js」を作成して、nuxt.config.jsのpluginsで読み込ませます。

グラフの設定についてはhighchartsと同じなので、「highcharts公式ドキュメント」を読むといいです。

また、[vue2-highcharts公式ドキュメント]にもサンプルコードが載っているので目を通した方がいいです。

使い方の説明するまでもなく、公式ドキュメント読みましょうという話になってしまいました。

optionsオブジェクトのseriesプロパティにグラフデータを入れるのですが、seriesプロパティを直接変更してもグラフを再レンダリングしてくれず、途方にくれていました。

「vue2-highcharts公式ドキュメント」のサンプルコードにもある通り、ref属性を指定して、domを読み取り、removeSeriesメソッドで一旦seriesを削除した後、addSeriesメソッドでseriesを追加して描写することで解決しました。

なお、初期状態でグラフの縦軸横軸を表示するために、initloadメソッドをmountedしています。

これが正しい実装方法なのかはわかりませんが、空の配列データをseriesに追加してすぐにremoveすることで表示しています。

チェックボックスでチェックのついた値を配列に入れてpropsで受け取り、それをwatchすることでloadメソッドが発火し、addSeriesでグラフを描写するという流れです。

optionsのlegendプロパティが凡例ですが、描写グラフ数が増えるとグラフ内に収まらなくなります。
その時は、responsiveプロパティを使用します。

tooltipプロパティでマウスオーバー時のポップアップの表示をカスタマイズできます。
useHTMLをtrueにすることでformatter関数でhtmlを使用できるのでおすすめです。