前回書いたこの記事の続きとなります。
今回は簡単なチャートをChart.jsを使用して表示したいと思います。
前回作成したbook.htmlにリンクを張ってチャートを表示するページへ推移させようと思います。
<body>
<a href="/chart">chart</a>
</body>
私はこんな感じでリンクを張りました。
bodyの中ならどこでもいいです。
ファイルがないとリンクがあっても飛べないので、book.htmlと同じ配下にchart.htmlファイルを作成します。
下記のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>chart</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
</head>
<body>
<div id="app" style="width:600px">
<canvas id="bookMoneyChart"></canvas>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
labels : [],
data: [],
prefectures: [],
ranking: [],
},
methods:{
displayChart() {
var ctx = document.getElementById('bookMoneyChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.prefectures,
datasets: [{
backgroundColor: '#f87979',
label: '書籍購入と都道府県',
data: this.data
}]
},
});
},
},
mounted() {
axios.get('/get/book').then(res =>{
this.ranking = res.data.books.map(sale=>sale.ranking);
this.prefectures = res.data.books.map(sale=>sale.prefectures);
this.data = res.data.books.map(sale=>sale.book_price);
this.labels = res.data.books.map(sale=>sale.money);
this.displayChart();
})
}
});
</script>
</body>
</html>
jsonデータはpython側で生成しています。前回記事と同じデータの内容をVue側で受け取っています。
今回は簡単に表示だけなので、書籍の購入金額と、都道府県ぐらいしか表示されません。
他の情報(ランキングと年収)の表示は次の課題とします。
リンクから飛んで、下記のようなイメージとなればOKです。
超簡単に説明すると、
<canvas id="bookMoneyChart"></canvas>これ↑と
var ctx = document.getElementById('bookMoneyChart').getContext('2d');これ↑が紐付いていて、
mounted() {
this.displayChart();
}これ↑で描写しています。
これこれすみません。。
とりあえず言いたいことは、Chart.jsを極めればかっこいいグラフが描写できるようになるということです。
