13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

シンプルなGoogle Chart Toolsの使い方

Last updated at Posted at 2016-10-22

はじめに

Google Chart Toolsというライブラリでグラフを描く機会があったので、使い方などをまとめていきたいと思います。

公式
Google Chart Tools

今回の完成形

barchart_sample.png

公式にある Bar Chart のサンプルから必要最低限の設定だけの超シンプルグラフです!
実際の動きは JSFiddle で確認できます。

コードの中身

html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
javascript
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  // DataTableを使用
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'City');
  data.addColumn('number', '2010 Population');
  data.addColumn('number', '2011 Population');
  data.addRows([
    ['New York City, NY', 810, 450]
  ]);

  // arrayToDataTableを使用
  // var data = google.visualization.arrayToDataTable([
  //   ['City', '2010 Population','2011 Population'],
  //   ['New York City, NY', 810, 450]
  // ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    // trueにすると積み上げ棒グラフになる
    isStacked: false,
    animation: {
      duration: 2000,
      easing: 'out',
      startup: true
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

描画までの流れ

  • html上でid(chart_div)を設定します。

<div id="chart_div"></div>

  • Javascriptでgooglechartのpackages(['corechart', 'bar'])を指定します。

google.charts.load('current', {packages: ['corechart', 'bar']});

  • ここではLoadでdrawChart()を呼び出します。

google.charts.setOnLoadCallback(drawChart);

  • dataoptionsを用意します。
  • chartid(chart_div)にBarChartを紐付けます。
  • 最後にchart.drawで描画しています。

Dataについて

データを用意する方法にDataTableとarrayToDataTableを用いる方法があるので両方用意しました。

  • 先頭のカラムはデータのドメインを指定しています。

  • 今回は文字列で*'City'*とラベルをつけています。

  • 文字列の他に数値や日付、時間などを指定できます。

  • 以降のカラムではデータを追加していきます。

  • オプションでデータロールを指定できます。

  • 今回は何も指定していません。

Optionsについて

オプションは設定しなくても動きます。
今回はグラフのタイトルとアニメーションを設定しています。
アニメーションはstartuptrueでないと動かないので注意が必要です。

isStackedtrueにすると積み上げ棒グラフになります。

積み上げ棒グラフ
barchart_stack_sample.png

ちなみに

BarchartとColumnchart

Google Chart ToolsでBarchartとColumnchartは設定を少しいじるだけですぐに描画できます。

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

この部分のBarChartColumnChartに代えます。

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

すると以下のようなグラフになります。

columnchart_sample.png

最後に

今回はグラフの描画をメインに行いました。
また今回は棒グラフでしたが他にもたくさんのグラフがあるので色々試してみたいと思います。
設定も機会があれば色々試したいです。

以下、試した機能などです。

13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?