プログラマーズ雑記帳

「 ライセンス 」 タグ記事

JavaScript  »  Google Chart Tools

Google Chart Tools の使い方

Tag JavaScript 使い方 ライブラリー グラフ ライセンス

いろんなグラフがかける Google Chart Tools の使い方について書いてみました。

  1. Google Chart Tools の使い方 (今回)
  2. 表とデータの扱い
  3. 棒グラフ (積み上げ棒グラフ)
  4. 散布図
  5. 折れ線グラフ、面積グラフ
  6. 円グラフ、計器図
  7. 組織図
  8. グラフの合成
  9. 動的なグラフの変更
  10. グラフと表の連携
  11. フィルタリング(Dashboard と Control)
  12. データロールによる特異点の表示と注釈付きタイムライン
  13. スプレッドシート(表計算)で作成したグラフの公開

今回は Google Chart Tools の紹介と基本的な使い方の説明です。
  1. Google Chart Tools とは
  2. グラフの種類
  3. ライセンス
  4. 使い方
  5. オプション

Google Chart Tools とは

Google Chart Tools は SVG を使ったグラフを表示するツールで、 JavaScript で記述します。
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChartSamplePie);
   function drawChartSamplePie() {
     var data = google.visualization.arrayToDataTable([
       ['タスク', '時間'],
       ['仕事', 11],
       ['食事', 2],
       ['通勤', 2],
       ['TV 鑑賞', 2],
       ['睡眠', 7]
     ]);
 
     var options = {
       title: 'Google Chart Tools サンプル',
       is3D: true
     };
 
     var chart = new google.visualization.PieChart(document.getElementById('gct_sample_pie'));
     chart.draw(data, options);
   }
 </script>
 <div id="gct_sample_pie" style="width: 400px;"></div>
ただし、ブログ上でちょっと表示させたいといった時には、 表計算の Web アプリケーションである Google スプレッドシートを使えば、 JavaScript の知識なしでも簡単にグラフを表示させることができます。
そちらの方法に関しては以下の記事をご覧下さい。

旧機能からの変更

Google Chart は一度変更がありました。
以前のものはパラメーターを GET メソッド(http のアドレス)として渡して画像でグラフを作成するツールでした。 
https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
これは Image Charts という名前になっていて、まだ利用できるのですが、 Deprecated(望ましくないもの) となっています。
Image Charts は 3D など表示に関しては高機能なのですが、次のような欠点があります。
  • http のアドレスで渡すため、256 文字の制限がある
  • 画像なので、マウスオーバーなどに反応しない
これらの欠点が SVG, JavaScript を使うことによって改良されています。
ただし、変わったといっても Image Charts を JavaScript から作成することも可能ですし、 SVG の円グラフ(Pie chart)も 3D 表示が可能です。

また、画像と違い、 SVG の描画はブラウザーが行います。 ブラウザーはまず日本語対応しているでしょうから、グラフ中で問題なく日本語が使用可能です。

JavaScript の関数は Google Visualization(可視化) API として公開されています。
Google Chart Tools の目的も前は単にグラフを作成することでしたが、 今はデータベース等から取得したデータを可視化する というところに移ったようです。

特徴

JavaScript を使ったグラフ作成ライブラリはいろいろありますが、 他と比べた Google Chart Tools の一番の利点はインタラクティブ性の高さでしょう。
マウスに対する反応だけでなく、 表との連動やフィルターなどを簡単に書くことができます。

逆に欠点は JavaScript のソースをダウンロードして使用することができないことです。 このため社内 LAN などのイントラネットの Web サービスでも、 必ず Google のサイトにアクセスしに行かなければなりません。 Google のサイトはアクセスが速いので、 インターネット上で公開する Web サービスでは問題ではありませんが、 イントラネットの場合は速度の低下の要因になる可能性があります。
また、ネットに繋がらないオフラインの環境では表示することもできません。

さらに一部の動きのあるグラフはセキュリティ上、 ローカルファイル(file://..)では動作しないようになっています。 これらの欠点はなかなか大きいのですが、 それを差し引いたとしても使用を検討する価値はあると思います。

グラフの種類

Google Chart Tools では様々なタイプのグラフが使用できます。

どのようなグラフが使用出来るかは Charts Gallery を見て下さい。
js_gct_gallery.png

Charts Gallery には出ていませんが、 それ以外にも使えるグラフが少しあります。 こちらは Code Playground や Additional Charts Gallery に載っています。
js_gct_gallery_add.png

ライセンス

Google Chart Tools は商用利用も OK です。 ただ、詳細は Google Visualization API の Terms of Service ページを見てということなので、 実際に商用利用する場合は次のページを見て判断して下さい。 しかし、Map や Geochart といった図は Google Maps API を使用しています。
こちらは有料、無料版があり、無料版には使用制限があリます。 Google Maps API の利用規約に従って使用して下さい。

使い方

グラフの基本的な使用法を折れ線グラフ(Line chart)を例に説明します。

<html>
  <head>

    <!-- AJAX API のロード -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Visualization API と折れ線グラフ用のパッケージのロード
      google.load("visualization", "1", {packages:["corechart"]});

      // Google Visualization API ロード時のコールバック関数の設定
      google.setOnLoadCallback(drawChart);

      // グラフ作成用のコールバック関数
      function drawChart() {

        // データテーブルの作成
        var data = google.visualization.arrayToDataTable([
          ['年度', '売上', '費用'],
          ['2004',  1000,  400],
          ['2005',  1170,  460],
          ['2006',  660,   1120],
          ['2007',  1030,  540]
        ]);

        // グラフのオプションを設定
        var options = {
          title: '会社業績'
        };

        // LineChart のオブジェクトの作成
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        // データテーブルとオプションを渡して、グラフを描画
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- グラフを描く div 要素 -->
    <div id="chart_div" style="width: 80%; height: 400px;"></div>
  </body>
</html>
グラフを表示するためには次の 3 つのものが必要です。
  1. Google Chart の JavaScirpt ファイルのロード指定
    前述したように JavaScirpt のファイルは Google のサイトにあるものを使用します。
    Google では Google Hosted Libraries という JavaScript のライブラリーを公開しているサービスがあります。 これは Google 製のライブラリーだけでなく、 JQuery、 Dojo といったよく使われているライブラリーの利用でき、様々な利点があります。 実際のロードはスクリプト内の google.load() で行うのですが、 まず、 この関数を使えるようにするファイルをロードします。 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  2. グラフ作成のスクリプトの記述
    <header> 部などにどのようなグラフにするかを記述します。
    内容は次節で説明します。 
        <script type="text/javascript">
       google.load("visualization", "1", {packages:["corechart"]});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         // グラフ作成
         //       :
       }
    </script>
  3. グラフを描画する div 要素
    グラフを描画するところには ID 名をつけた div 要素を置きます。
    <div id="chart_div" style="width: 80%; height: 400px;"></div>
    グラフのオプションで幅や高さを指定することもできるのですが、 省略時にはこの div 要素のサイズでグラフを作成します。 div 要素ではサイズ指定に 80% のような指定ができるので、 ページ幅に合わせたグラフの作成が簡単に行えます。
    ただし、そのままではブラウザーのサイズ変更してもサイズは変わりません。

グラフ作成のスクリプト

グラフ作成用のスクリプトの内容について解説します。

まず、グラフを作成するのに必要なパッケージをロードします。 
      // Visualization API と折れ線グラフ用のパッケージのロード
      google.load("visualization", "1", {packages:["corechart"]});
corechart の部分がグラフの種類によって変わってきます。
どのパッケージを指定するかは各グラフの説明で確認して下さい。 Chart Gallery にでている基本的なグラフはだいたい corechart です。

なお、 google.load には同じファイルをロードしない仕組みがあるので、 同一ページに複数のグラフを作成する場合などで、何度呼んでも問題ありません。

次にグラフ作成用の関数定義とその関数の登録を行います。 
      // Google Visualization API ロード時のコールバック関数の設定
      google.setOnLoadCallback(drawChart);

      // グラフ作成用のコールバック関数
      function drawChart() {
        // グラフ作成
      }
drawChart の関数名は任意ですが、 1 ページに複数のグラフを描画する場合には名前が被らないようにして下さい。

無名関数として登録することもできます。 
 google.setOnLoadCallback(
     function() {
         // グラフ作成
     }
 );

グラフ作成の関数

グラフ作成用の関数内ではさらに 3 つのことを行います。
  • データの作成
  • オプションの設定
  • グラフの描画
drawChart 関数内: 
        // データテーブルの作成
        var data = google.visualization.arrayToDataTable([
          ['年度', '売上', '費用'],
          ['2004',  1000,  400],
          ['2005',  1170,  460],
          ['2006',  660,   1120],
          ['2007',  1030,  540]
        ]);

        // グラフのオプションを設定
        var options = {
          title: '会社業績'
        };

        // LineChart のオブジェクトの作成
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        // データテーブルとオプションを渡して、グラフを描画
        chart.draw(data, options);
データは google.visualization.DataTable のオブジェクトとして作成します。
サンプルでは arrayToDataTable 関数を使って二次元の配列から作成しています。 
        var data = google.visualization.arrayToDataTable([
          ['年度', '売上', '費用'],
          ['2004',  1000,  400],
          ['2005',  1170,  460],
          ['2006',  660,   1120],
          ['2007',  1030,  540]
        ]);
グラフのオプションはオブジェクト(連想配列)で指定します。
指定可能な要素は title のようなグラフで共通のものや 円グラフの is3D といった特定のグラフで固有のものがあります。 
        var options = {
          title: '会社業績'
        };
グラフの描画ではまず対象グラフのオブジェクトを作成します。
この際、描画先の div 要素を ID 名から取得して渡します。 
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
最後に作成したデータとオプションを渡して、描画を行います。 
chart.draw(data, options);

グラフ作成の関数(簡易版)

グラフ作成の関数定義は Chart Wrapper を使って、もう少し簡単に書くことができます。
Chart Wrapper では先ほどのグラフ作成で必要だったものをオブジェクト(連想配列)の形で用意します。
要素 キー名 格納値
グラフの種類 chartType グラフのクラス名
データ dataTable データテーブルの元となる二次元配列
オプション options オプション設定のオブジェクト
対象の div 要素 containerId div 要素の ID 名 

function drawChart() {
    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        dataTable: [
            ['年度', '売上', '費用'],
            ['2004',  1000,  400],
            ['2005',  1170,  460],
            ['2006',  660,   1120],
            ['2007',  1030,  540]
        ],
        options: {title: '会社業績'},
        containerId: 'chart_div'
    });
    wrapper.draw();
}

オプション

グラフで共通なオプションのうち、よく使いそうなものを幾つか紹介します。
ただし、共通といっても 表、 円グラフといった特殊な形状のものは除きます。 詳細は各グラフの説明を見て下さい。

なお、表内で型が Object になっている項目は入れ子でオプションを指定します。 
var options = {
    title: "グラフのタイトル",
    hAxis: {
        title: "横軸のタイトル"
    }
}
名称 型 デフォルト 説明
backgroundColor string or object 'white' 背景色。 色の指定方法は HTML と同じです。
colors strings の配列 デフォルトの配色 線などのグラフの要素を配列で指定します。
height, width number グラフの格納先要素のサイズ グラフの高さ、幅
legend Object null 判例
   .position string 'right' 判例の位置
  • 'right' - 右
  • 'top' - 上
  • 'bottom' - 下
  • 'in' - グラフ内(左上)
  • 'none' - 非表示
title string 非表示 タイトルの文字列
hAxis, vAxis object または object の配列 null 横軸、縦軸(後述)

hAxis, vAxis でグラフの横(メイン)軸、縦軸の設定を行います。 各軸の設定項目はほぼ同じものです。
名称 型 デフォルト 説明
baseline number 自動 グラフの補助線の表示する数を指定します。
補助線の詳細は gridlines で指定し、 gridlines の間隔で丸められます。
ただし、 横軸の場合、データを数値として扱っていないと補助線は表示されません。
  折れ線グラフ、面積グラフ
baselineColor string 'black' 補助線の背景色。色の指定方法は HTML と同じです。
'none' を指定すると補助線は非表示となります。
format string 自動 軸の値のラベルを表示する際のフォーマット。
数値または日時の ICU パターンで指定します。

例えば、 10, 7.5, 0.5 の値で {format:'#,###%'} と指定すると、 "1,000%", "750%", and "50%" と表示されます。

日付の場合、 {format:'y 年 MM 月 dd 日(E)'} と指定すると、 "2013 年 01 月 27 日(日)" といった表示になります。
gridlines Object null 補助線。
   .color string '#CCC' 補助線の色を指定します。
   .count number 5 グラフ内の補助線の数を指定します。(最小は 2)
minorGridlines Object null より細かいサブ補助線。
   .color string gridlines と 背景色の混合 サブ補助線の色
   .count number 0 補助線間に表示するサブ補助線の数を指定します。
logScale boolean false 軸の表示を Log スケールで表示します。 等比級数的に増加するデータの表示などで使用します。
title string null 軸のタイトル。
slantedText boolean 自動 (横軸用) true の場合には値のラベルが入りきらない場合に、角度を付けて表示します。 false では上下に段を分けて表示します。
viewWindow Object null グラフの表示領域を指定します
   .max number 自動 表示領域の最大値
   .min number 自動 表示領域の最小値

スポンサーサイト



このエントリーをはてなブックマークに追加  
 
このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
31位
アクセスランキングを見る＞＞

[サブジャンルランキング]
プログラミング
5位
アクセスランキングを見る＞＞
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

08月 | 2023年09月 | 10月
日 月 火 水 木 金 土
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


最新記事
カテゴリー
┗SNS (7)
はてな新着記事
はてな人気記事
シリーズもの
このブログをリンクに追加する
タグ

使い方 Emacs Redmine インストール ガイド JavaScript 開発記 Ruby C++ Rails 用語集プラグイン プラグイン C# altjs VS Redmineインフォメーション Redmine入門 ライブラリー ツール グラフ FC2ブログ ブログ TestLinkLink クイズ 国際化 コンパイル 言語比較 UML テキスト ブラウザ SNS 書き方 正規表現 Dart 設定 JVM言語 C++11-14 Node.js web制作 バージョン管理システム Qt K2Editor Word 秀丸 英語 Javascript ライブラリ比較 ex-html-mode.el チケット Wiki Excel 関数型 Clojure 表 関数型プログラミング インターフェース gem routes HTML5 eshell TestLink コードハイライト GUI比較 Windows ブログカスタマイズ node.js .NET 置換 TypeScript lisp コンピューター Bookmarklet grep エスケープ 検索 CSS3 日本語 Boost 比較 難読化 lodash 汎化 文字コード コマンドライン ジェネリック Subversion Google 単語境界 Doxygen ガントチャート 歴史 html Graphviz css Notes トラッカー CoffeeScript GUI Markdown python ライセンス PlantUML オブジェクト図 パッケージ図 配置図 

ブロとも一覧

復活電子工作

A級プログラマーへの道
ブロとも申請フォーム

この人とブロともになる

最新コメント
最新トラックバック
FC2投票
無料アクセス解析
FC2投票
無料アクセス解析
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。

Powered by FC2 Blog

Copyright © プログラマーズ雑記帳 All Rights Reserved.

<免責事項> 当サイトの情報やコードの利用により生じた損失や損害などについては、 いかなる場合も一切の責任を負いません。