2019/05/20

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();//グラフを再描画
        }
      }
    })