2019.07.12目次nuxtでvue2-highchartsを使って折れ線グラフを描写してみたvue2-highchartsはhighchartsをvue2.xで使用できるようにしたライブラリです。書いたコード詰まった所nuxtでvue2-highchartsを使って折れ線グラフを描写してみたvue2-highchartsはhighchartsをvue2.xで使用できるようにしたライブラリです。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を使用できるのでおすすめです。APIとは、RESTと呼ばれる設計原則に従って策定されたAPIのこと。すべての情報は汎用的な構文で一意に識別される。REACT_APP_を接頭辞につける。ついて※この記事は2020年2月22日に試したものです。現在はVue3.0リリースされています。mgtrmgtrスポンサーリンクこの記事を書いた人mogataroWEBエンジニアです。サーバーサイドエンジニアからフロントエンドエンジニアになりました。mgtrmgtrスポンサーリンクタイトルとURLをコピーしました。