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を使用できるのでおすすめです。キャメルケースを使用していたため、更新ボタンを押すと正常に画面を表示できなくなっていました。TABでフォーカスできるようにinput要素はdisplay:none;にはしない。間接セレクタ(~)を使用することで、input要素がcheckdになった時のCSSを兄弟セレクタに当てる。アウトラインは表示されず、太さも0になります。1本線で表示されます。2本線で表示されます。立体的に窪んだ線で表示されます。根岸昂平WEBエンジニアです。サーバーサイドエンジニアからフロントエンドエンジニアになりました。備忘録47雑記4スポンサーリンクタイトルとURLをコピーしました。