Chart.js+Vue.js+Axiosを使ってグラフを描写しよう

JavaScriptライブラリのChart.jsを利用するとブラウザ上に短時間で美しいグラフを簡単に描写することができます。

日々の業務活動から発生したデータを外部のサーバまたはバックエンドから取得したデータを使ってグラフを描写したいという要望もあるかと思います。そのような時に読んで欲しいのが本文書です。axiosを利用しAPI経由でサーバまたはバックエンドからデータを取得し、vue.jsを使って取得したデータを処理し、Chart.jsでグラフを描く手順を確認します。

Chart.jsでグラフを描くためには、グラフの元になるデータの準備またaxiosやvue.jsといった技術の基礎理解も必要となります。

Chart.js単体よりもVue.js+Axiosとの組み合わせた使用方法の説明に重点を置いているためChart.jsに関するグラフの見栄えの設定の説明は行っておりません。

axiosを利用を使って情報を取得する場合は情報を取得できる環境を事前に準備しておく必要があります。

1 Chart.jsでグラフを描く
2 Chart.js + vue.jsでグラフを描く
3 Chart.js + vue.js + axiosでグラフを描く
- 3.1 axiosによる情報の取得
- 3.2 axiosを利用して取得したデータでグラフ

Chart.jsでグラフを描く

まずはChart.jsを使ってシンプルなグラフを描いてみます。

Chart.js, vue.js, axiosに使用するライブラリはすべてcdnから読み込みます。そのため動作確認のための特別な環境は必要ありません。デスクトップにindex.htmlを作成して実行しています。


<!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行前後で綺麗なグラフを描くことができます。

上記のコードをhtmlファイルを作成し、コピー&ペーストするたけで下記のグラフが描けます。配色についてはChart.jsのマニュアルを見て確認すれば簡単に色付けすることができます。

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の使用方法については下記を参考にしてください。

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>