Looking for google-visualization Answers? Try Ask4KnowledgeBase
Looking for google-visualization Keywords? Try Ask4Keywords

google-visualizationgoogle-visualizationの使い方


備考

Google Visualizationは、ウェブページに埋め込むことのできるさまざまなインタラクティブなチャートを作成するための柔軟なJavaScriptベースのフレームワークを提供します。これらのチャートタイプには、

Google Visualizationで作成したグラフは、JSON、Google Spreadsheets、Javascriptで書かれたハードコードされた配列など、さまざまなソースからのデータを使用できます。

Google Visualization APIでは、複数のチャートを単一のデータソースにリンクするだけでなく、データをフィルタリングして、同じデータの複数のディメンションを示すインタラクティブなダッシュボードを作成することもできます。

バージョン

バージョンこのバージョンを選択する構文発売日
現在 google.charts.load('current', {packages: ['corechart']}); 2016-02-23
44 google.charts.load('44', {packages: ['corechart']}); 2016-02-23
43 google.charts.load('43', {packages: ['corechart']}); 2015-10-02
42 google.charts.load('42', {packages: ['corechart']}); 2015-04-30
41 google.charts.load('41', {packages: ['corechart']}); 2015-02-23

過去のリリースの完全な一覧はこちら

読み込みと実行

Googleでは現在、Google Visualization(Google Chartsともいう)、 gstaticローダーhttps://www.gstatic.com/charts/loader.js )用にJSライブラリを読み込む2つの方法を提供してい https://www.google.com/jsapi )。

Googleがjsapiからgstaticローダーに移行しているので、gstaticローダーをお勧めします。 移行リファレンスを参照

どちらの場合でも、まずscript タグを持つローダーの1つを、通常はドキュメントのhead に含める必要があります。

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

Webページにローダーを含めたら、 load 関数を呼び出すことで、目的のライブラリパッケージをロードすることができます。

Loader.jsの場合

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

JSAPIの場合

google.load('visualization', '1', {'packages':['corechart']});
 

しかし、ライブラリパッケージをロードした後は、ライブラリパッケージの使用を続ける前に、ロードが完了するまで待つ必要があります。待機する方法は、 setOnLoadCallback 関数を呼び出すことによってコールバックを設定することです。

サンプルコード(gstaticローダーの場合):

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

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>
 

HTML:

<div id="gender_chart"></div>
 

JSFIDDLE