Google ChartsとVue.jsで投票できるグラフのサンプル

See the Pen Google ChartsとVue.jsで投票できるグラフのサンプル by takapen (@takapen) on CodePen.

{{ item[0] }}:{{ item[1] }}

//Google Charts

//グラフで使うデータを用意
var orgdata = [
  ['種類', '個数'],
  ['あああ',5], ['いいい',4],['ううう',3],
];
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);
}


//vue
new Vue({
  el:'#app',
  data:{
    dataArray:orgdata
  },
  methods:{
    addOne:function(val){//指定されたランチ番号(val)の投票数を増やしたい
      var obj = this.dataArray[val];
      obj[1]++;//ランチの投票数はこの配列の[1]に入ってるのでobj[1]の値に1をたし
      this.dataArray.splice(val, 1, obj);//その1を追加済みのobjをspliceで削除追加（変更）してる
      drawBasic();//グラフを再描画
    }
  }
})