TOP > これまでに書いた記事 > Vue.js > Google Chartsの円グラフに投票できる例

2022.11.27（更新日: 2022.11.27）

Google Chartsの円グラフに投票できる例

はじめに

こちらの参考書のchapter7の内容です。

以下のように、Google Chartsの円グラフが表示されていて、表のボタンを押すと数字が増えて、グラフも連動して変化するようになっています。

動作環境

vue.jsのバージョンは、2.5.17です。

全体の流れ

先ほどのサンプルを作成するときの全体の流れはこちらです。

Google Chartsを用意する
グラフに使うデータを用意する
Vue.jsの記述を行う

Google Chartsを用意する

まずは、google chartsを用意します。

読み込み

headタグ内で、google chartsを読み込みます。

<head>

//省略
<script type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script>
</head>

HTML

グラフを表示させたい箇所に以下のHTMLを記述します（高さは任意で設定します）。

<div id="chart_div" style="height: 500px;"></div>

グラフを設定する

次に、作りたいグラフを設定します。

データの準備

以下のようにデータを準備します。

var orgdata = [
['種類', '個数'],
['スタバ', 10], ['ドトール', 3], [ 'タリーズ', 5],
['プロント', 2]
];

グラフを表示させる設定を行う

以下のようにして、グラフを表示させるためのJSを記述します。

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.jsの記述を行う

最後に、Vue.jsの記述を行います。

new Vue({
 el: '#app',
 data: {
  dataArray:orgdata
 },
 methods: {
  addOne: function(val) {
  var obj = this.dataArray[val];
  obj[1]++;
  this.dataArray.splice(val, 1, obj);
  drawBasic();
 }
 }
});

今後の課題

今回は、ざっくりと「google chartに投票できる機能」を作成する方法について書いていきました。

今後は、グラフを表示させる記述と、vue.jsで投票数のカウントアップを行う記述を理解して、解説を書いていきたいです。

コメントを残すコメントをキャンセル

投稿ID : 6922