【学習メモ】動かして学ぶ！Vue.js 開発入門 その5

Chapter7 Google Charts と連動させてみよう

02 Google Chartsと連動させる

<div id="chart_div" style="height: 500px;"></div>
<div id="app">
  <ul>
    <li v-for="(item,c) in dataArray" v-if="c>0">{{ item[0] }}：{{ item[1] }}
      <button v-on:click="addOne(c)">1票足す</button>
    </li>
  </ul>
</div>

v-if=“c>0”はデータを2つ目以降からの表示にするため（[‘種類’, ‘個数’]はデータに入れない）

// グラフに使うデータ
var orgdata = [
  ['種類', '個数'],
  ['野球', 3], ['サッカー', 4], ['バドミントン', 5],
  ['陸上', 1], ['ラグビー', 3], ['その他', 1]
];
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawBasic);

// グラフを表示する関数
function drawBasic() {
  var data = google.visualization.arrayToDataTable(orgdata);
  var options = { title: '好きなスポーツ', "is3D": true };
  var chart = new google.visualization.PieChart(
    document.getElementById('chart_div'));
  chart.draw(data, options);
}

new Vue({
  el: "#app",
  data: {
    dataArray: orgdata
  },
  methods: {
    addOne: function (val) {
      // `val` 指定されたランチ番号
      var obj = this.dataArray[val]; // 指定されたスポーツの投票数
      obj[1]++; // +1 する
      this.dataArray.splice(val, 1, obj); // `obj` と `splice` で入れ替える
      drawBasic(); // 図を再描画
      console.log(orgdata);
    }
  }
});

結果