Chart.js+Vue.js+Axiosを使ってグラフを描写しよう
JavaScriptライブラリのChart.jsを利用するとブラウザ上に美しいグラフを簡単に描写することができます。
日々の業務活動から発生したデータを保存している外部サービスやバックエンドから取得したデータを使ってグラフを描写したいという要望もあるかと思います。そのような時にどうやって情報を取得し、グラフに描写するのか知りたいと思った時に活用できるのが本文書です。
axiosを利用しAPI経由で外部サービスまたはバックエンドからデータを取得し、vue.jsを使って取得したデータを処理し、Chart.jsでグラフを描く手順を確認します。
Chart.jsでグラフを描くためには、グラフの元になるデータの準備またaxiosやvue.jsといった技術の基礎知識も必要となります。
axiosを利用を使って情報を取得する場合は情報を取得できる環境を事前に準備しておく必要があります。
目次
Chart.jsでグラフを描く
まずはChart.jsを使ってシンプルなグラフを描いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chart.js+Vue.js+Axios</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
</head>
<body>
<div style="width:600px">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2019年1月', '2019年2月', '2019年3月', '2019年4月'],
datasets: [{
label: '四半期の売上数の遷移',
data: [120, 190, 34, 58]
}
]
}
});
</script>
</body>
</html>
実行すると下記のような線グラフを作成することができました。線の色や背景の色は何も設定しなければ、10行前後で綺麗なグラフを描くことができます。
Chart.js + vue.jsでグラフを描く
vue.jsライブラリの追加
vue.jsを使ってグラフを描きます。cdnからvue.jsを読み込むためにscriptタグを追加します。
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
divタグにid=”app”を追加します。
<div id="app" style="width:600px">
<canvas id="myChart"></canvas>
</div>
vue.jsのライフサイクルフックのmounted完了後にChart.jsによるグラフの描写を実行します。
<body>
<div id="app" style="width:600px">
<canvas id="myChart"></canvas>
</div>
<script>
var app = new Vue({
el: '#app',
mounted: function(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2019年1月', '2019年2月', '2019年3月', '2019年4月'],
datasets: [{
label: '四半期の売上数の遷移',
data: [120, 190, 34, 58]
}]
}
});
}
});
</script>
</body>
vue.jsを使ってもブラウザには同じグラフが描写されます。
クリックイベントによるグラフ描写
ただグラフを描写するだけならはvue.jsを使う必要がないので、ページに動きを出すためにvue.jsのクリックイベントでグラフが描写できるように変更します。新たにmethodsを追加し、dispalyGraphを追加します。
var app = new Vue({
el: '#app',
methods:{
displayGraph: function(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2019年1月', '2019年2月', '2019年3月', '2019年4月'],
datasets: [{
label: '四半期の売上数の遷移',
data: [120, 190, 34, 58]
}]
}
});
}
}
});
ボタン要素を追加し、クリックイベントを設定します。クリックボタンを押すとdisplayGraphが実行されます。
<div id="app" style="width:600px">
<p><button @click="displayGraph">グラフ表示</button></p>
<canvas id="myChart"></canvas>
</div>
ファイルを開くとグラフ表示ボタンのみ表示されます。
グラフ表示ボタンをクリックするとブラウザでグラフが描写されます。
データプロパティに値を設定
ここまではグラフに使っていた値を直接ファイルに記述していましたが、外部から取得することを考えて、データプロパティを追加します。
var app = new Vue({
el: '#app',
data: {
labels : ['2019年1月', '2019年2月', '2019年3月', '2019年4月'],
data: [120, 190, 34, 58]
},
methods:{
displayGraph: function(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.labels,
datasets: [{
label: '四半期の売上数の遷移',
data: this.data
}]
}
});
}
}
});
データプロパティに変更しても何も影響はなく先ほどと同じグラフが描写できます。
Chart.js + vue.js + axiosでグラフを描く
axiosから取得したデータをどのようにvue.jsのデータプロパティに反映されるかを確認して、グラフを描写します。
axiosによる情報の取得
axiosを使ってサーバから情報を取得します。冒頭でも説明した通り、axiosを利用してデータを取得できるサーバ環境を事前に準備しておく必要があります。
axiosを利用するためscriptタグを追加します。
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axiosの使用方法については下記を参考にしてください。
本文書ではLaravelサーバを準備しており/api/saleにアクセスすると以下の情報が取得できます。
0: {month: "2019年1月", number: 120}
1: {month: "2019年2月", number: 190}
2: {month: "2019年3月", number: 34}
3: {month: "2019年4月", number: 58}
axiosを利用して取得したデータでグラフ
vue.jsのライフサイクルフックのmounted完了後 にサーバからデータを取得しデータプロパティの中にaxiosを利用して取得してきたデータを入れます。mapメソッドを利用することでthis.dataには、[‘2019年1月’, ‘2019年2月’, ‘2019年3月’, ‘2019年4月’]が保存されます。
mounted: function(){
axios.get('/api/sale').then(response =>{
this.data = response.data.map(sale=>sale.number);
this.labels = response.data.map(sale=>sale.month);
this.displayGraph();
})
}
ページを開くと下記のように表示されます。axiosでデータを取得できる環境さえあれば簡単にChart.jsとvue.jsとaxiosを使ってグラフを描写することができます。
動作確認したコードは下記の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chart.js+Vue.js+Axios</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" style="width:600px">
<canvas id="myChart"></canvas>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
labels : [],
data: []
},
methods:{
displayGraph: function(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.labels,
datasets: [{
label: '四半期の売上数の遷移',
data: this.data
}]
}
});
}
},
mounted: function(){
axios.get('/api/design_sum').then(response =>{
this.data = response.data.map(sale=>sale.number);
this.labels = response.data.map(sale=>sale.month);
this.displayGraph();
})
}
});
</script>
</body>
</html>