Vue.jsでグラフ表示
この記事ではvue.jsを使用したグラフの表示方法を紹介します。char.jsを使用することで簡単にグラフを表示することができます。char.jsは多種多様なグラフを描写できるMISライセンスのOSSです。
vue.jsを使用する場合vue-chartjsを使用してグラフ表示する方法を紹介している記事が多いですが、今回はvue-chartjsを使用せずにchart.jsのみでグラフ表示させます。
使用方法
CDNでchart.jsを使用する場合はHTMLに以下の記述をしてください。
|
1 2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"> </script> |
ローカルに保存して使用する場合は、npmで以下のコマンドを実行してインストールしてください。
|
1 |
npm install chart.js --save |
グラフを表示する
HTMLはcanvas要素にidを設定するだけです。今回、vue.jsとchart.jsはどちらもCDNを使用しています。ローカルに保存して使用する場合はscript要素のsrcに保存先のパスを定義して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> </head> <body> <div id="app"> <div> <canvas id="chart"></canvas> </div> <script type="text/javascript" src="./main.js"></script> </body> </html> |
JavaScriptで表示内容を定義します。以下のサンプルではdataを配列に固定でデータを設定していますが、配列にデータを追加、削除、変更することでグラフ表示を変更可能です。折れ線グラフを使用する場合はtypeを’line’で定義します。
複数の折れ線グラフを表示する場合はdatasetsをグラフ数分定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
var add = new Vue({ // element to mount to el: '#app', // initial data data: { chartListsOk: [1,3,6,9,0], chartListsNg: [5,3,2,1,1], chartListsAll: [7,5,6,0,3], labelList: [0,1,2,3,4], }, mounted: function() { this.creatChart() }, methods: { creatChart: function () { //グラフ描画 config = { type: 'line', data: { labels: this.labelList, datasets: [{ label: '折れ線A', borderColor: 'rgb(154, 162, 235)', fill: false, data: this.chartListsOk }, { label: '折れ線B', borderColor: 'rgb(54, 162, 235)', fill: false, data: this.chartListsNg }, { label: '折れ線C', borderColor: 'rgb(54, 162, 235)', fill: false, data: this.chartListsAll }, ] } } chart = new Chart(document.getElementById('chart').getContext('2d'), config); }, } }) |
Vue.jsを使用しているので、chartListsOkなどの配列にデータを追加したり、変更すれば動的にグラフ表示を変更することが可能です。
また、labelListに表示するデータ数分データがないとグラフが表示されないので注意です。
まとめ
chart.jsを使用して簡単に綺麗なグラフを表示することができました。グラフの種類や表示のオプションがたくさんあるので、使いこなすのは大変ですが、この記事のサンプルで最低限折れ線グラフを表示することができます。
