2019/09/18Chart.js+Vue.js+Axiosを使ってグラフを描写しようJavaScriptライブラリのChart.jsを利用するとブラウザ上に簡単にグラフを描写することができます。Chart.jsでグラフを描くためには、グラフの元になるデータが必要です。axiosを利用しAPI経由でデータを取得し、vue.jsを使って取得したデータを処理して、Chart.jsでグラフを描く手順を確認します。本文書ではChart.js単体よりもVue.js+Axiosとの組み合わせた使用方法の説明に重点を置いているためChart.js単体についてのカラーなどのグラフの見栄えに関する設定の説明は行っておりません。axiosを利用を使って情報を取得する場合は情報を取得できる環境を事前に準備しておく必要があります。axiosを利用して取得したデータでグラフChart.jsでグラフを描くまずはChart.jsを使ってシンプルなグラフを描いてみます。axiosに使用するライブラリはすべてcdnから読み込みます。そのため動作確認のための特別な環境は必要ありません。デスクトップにindex.htmlを作成して実行しています。});</script></body></html>実行すると下記のような線グラフを作成することができました。線の色や背景の色は何も設定しなければ、10行前後で綺麗なグラフを描くことができます。上記のコードをhtmlファイルを作成し、コピー&ペーストするたけで下記のグラフが描けます。配色についてはChart.jsのマニュアルを見て確認すれば簡単に色付けすることができます。vue.jsでグラフを描くvue.jsライブラリの追加vue.jsを使ってグラフを描きます。cdnからvue.jsを読み込むためにscriptタグを追加します。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>divタグにid=”app”を追加します。id="myChart"></canvas></div>vue.jsのライフサイクルフックのmounted完了後にChart.jsによるグラフの描写を実行します。});</script></body>vue.jsを使ってもブラウザには同じグラフが描写されます。simple_graphクリックイベントによるグラフ描写ただグラフを描写するだけならはvue.jsを使う必要がないので、ページに動きを出すためにvue.jsのクリックイベントでグラフが描写できるように変更します。新たにmethodsを追加し、dispalyGraphを追加します。}});ボタン要素を追加し、クリックイベントを設定します。クリックボタンを押すとdisplayGraphが実行されます。id="myChart"></canvas></div>ファイルを開くとグラフ表示ボタンのみ表示されます。クリック用ボタンを追加グラフ表示ボタンをクリックするとブラウザでグラフが描写されます。ボタンをクリックするとグラフが表示データプロパティに値を設定ここまではグラフに使っていた値を直接ファイルに記述していましたが、外部から取得することを考えて、データプロパティを追加します。}});データプロパティに変更しても何も影響はなく先ほどと同じグラフが描写できます。axiosでグラフを描くaxiosから取得したデータをどのようにvue.jsのデータプロパティに反映されるかを確認して、グラフを描写します。axiosによる情報の取得axiosを使ってサーバから情報を取得します。冒頭でも説明した通り、axiosを利用してデータを取得できるサーバ環境を事前に準備しておく必要があります。axiosを利用するためscriptタグを追加します。src="https://unpkg.com/axios/dist/axios.min.js"></script>axiosの使用方法については下記を参考にしてください。あわせて読みたいvue.jsを使ってaxiosを学ぶ本文書ではLaravelサーバを準備しており/api/saleにアクセスすると以下の情報が取得できます。サーバからデータを取得しデータプロパティの中にaxiosを利用して取得してきたデータを入れます。‘2019年4月’]が保存されます。})}ページを開くと下記のように表示されます。axiosでデータを取得できる環境さえあれば簡単にChart.jsとvue.jsとaxiosを使ってグラフを描写することができます。simple_graph動作確認したコードは下記の通りです。axiosを利用して取得したデータでグラフ。