視覚化: 汎用画像グラフ

重要: Google グラフツールの画像グラフ部分は、2012 年 4 月 20 日をもって正式に非推奨になりました。サポート終了ポリシーに従って、引き続き機能します。

概要

汎用画像グラフは、Google Chart API によって生成されるすべてのグラフを対象とした汎用のラッパーです。このグラフを使用する前に、Chart API のドキュメントをご覧ください。チャート API への直接呼び出しの 2K の制限とは異なり、このビジュアリゼーションを使用して最大 16, 000 のデータを送信できます。

すべてのデータは、DataTable または DataView を使用してグラフに渡されます。また、一部のラベルはデータテーブルの列として渡されます。

その他の Chart API の URL パラメータ(chd を除く)はすべてオプションとして渡されます。

デベロッパー: Google

さまざまな種類のグラフの例を紹介します。

折れ線グラフ

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

縦棒グラフ

ラップされた棒グラフでは、チャートを手動で呼び出す場合のように chxt='x' を指定する必要はありません。軸を指定しない場合、汎用イメージチャートは、デフォルトでチャートを正しく設定しようとします。

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

円グラフ

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

レーダー チャート

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

マップチャート

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

読み込み中

google.charts.load のパッケージ名は「imagechart」です

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

ビジュアリゼーションのクラス名は google.visualization.ImageChart です。

  var visualization = new google.visualization.ImageChart(container_div);

データ形式

一般化されたデータ形式には、マップグラフ用とそれ以外のグラフ用の 2 種類があります。データでサポートされる数値形式は JavaScript 数値タイプのみです。

: データまたはオプションとして渡される文字列値を URL エンコードしないでください。

マップチャート

マップチャートは、次の 2 つの必須列を持つデータテーブルを取得します。

  • 1 列 - [文字列] 国 / 州コード
  • 2 列目 - [数値] その国または都道府県の値。

詳しくは、マップチャートのドキュメントをご覧ください。

マップ以外のグラフ

マップ以外のグラフは、2 つのオプションの列(最初が 1 つ、末尾が 1 つ)と、その間に 1 つ以上のデータ列があるデータテーブルを受け取ります。

  • 最初の列 - [省略可、文字列] 各エントリは、そのデータに対応するグラフの X 軸で使用されるラベル(chl または chxl パラメータに相当)を表します。
  • 次の列 - それぞれがデータ系列を表す数値列。
  • 最後の列 - (省略可、文字列)データ列の後の任意の文字列の列。各エントリは、それをサポートするグラフのデータポイント ラベルを表します。この列を使用する場合は、annotationColumns オプションを指定する必要があります。

データの表示方法は、グラフの種類によって異なります。グラフのドキュメントをご覧ください。

列インデックスに関する注意: 汎用性の高い画像グラフでは、グラフ API サービスにテーブルを送信する前に、データテーブルから文字列列が削除されます。したがって、このページで定義されているオプション、メソッド、イベントの列インデックスには、インデックス カウントの文字列列が含まれます。ただし、Chart API サービスによって処理されるオプション(chm オプションなど)の列インデックスは、インデックス カウントの文字列列を無視します。

構成オプション

このビジュアリゼーションには次のオプションが定義されています。ビジュアリゼーションの draw() メソッドに渡されるオプション オブジェクトで値を定義します。 グラフの種類によっては、次のオプションがすべてサポートされているわけではありません。静止画像のグラフの種類に関するドキュメントをご覧ください。任意の Chart API の URL パラメータをオプションとして渡すことができます。たとえば、グラフのビジュアリゼーションの URL パラメータ chg=50,50 を指定するには、options['chg'] = '50,50' を指定します。

色に関する注記: colorscolorbackgroundColor などのカラー オプションは、Chart API の色形式で指定します。この形式は #RRGGBB の形式と似ていますが、透明性を示すために 4 桁の 16 進数を任意に含めることができます。「赤」、「緑」、「青」など、人が読める色はサポートされていません。Chart API のカラー形式には、先頭に # 記号を付けませんが、一般的な画像グラフの可視化オプションでは # の有無にかかわらずカラーコードを使用できます。

名前 タイプ Default 説明
アノテーション列 配列<object> none

さまざまなタイプのグラフのデータポイント ラベル。これはオブジェクトの配列で、グラフ上の 1 つのデータポイントに書式付きラベルを割り当てます。このオプションは、データポイントをサポートするグラフでのみ使用できます(詳しくは、リンク先のトピックをご覧ください)。また、データテーブルには少なくとも 1 つの文字列ラベル列が必要です。

配列内の各オブジェクトには次のプロパティがあります。

  • column [数値] - アノテーションで使用されるテキストを保持する列のゼロベースのインデックス。この列のすべての行に値は必要ありません。
  • positionColumn [数値] - ラベルが付けられたデータポイントを保持する列の 0 から始まるインデックス。デフォルトは最初のデータ列です。
  • color文字列)- Chart API の色形式のアノテーション テキストの色。デフォルトは「#000000」(黒)です。
  • size数値) - アノテーションのフォントサイズ(ピクセル単位)。
  • priority文字列)- 「low」、「medium」、「high」のいずれかで、ラベルを描画するレイヤを指定します。デフォルトは「medium」です。これは、ラベルが棒と線の後に、他のラベルの前に描画されることを示します。
  • type [文字列] - 「text」または「flag」のいずれか。「text」は書式なしテキストのアノテーションを作成し、「flag」は音声バルーン アノテーションを作成します。

例 - このスニペットでは、黒色の 12 ピクセルのテキストラベルが定義されています。テキストラベルは列 0 から取得され、同じ行の列 2 のデータポイントに割り当てられています。options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];

backgroundColor 文字列 「#FFFFFF」(白) グラフの背景色。Chart API の色形式で指定します。
文字列 自動 すべての系列で使用する基本色を指定します。各系列は、指定された色のグラデーションになります。色は Chart API のカラー形式で指定します。colors が指定されている場合は無視されます。
配列 <文字列> 自動 これを使用して、各データ系列に特定の色を割り当てます。色は、Chart API のカラー形式で指定します。色 i はデータ列 i に使用され、色よりもデータ列が多い場合は先頭にラップされます。同じ色のバリエーションがすべてのシリーズで許容される場合は、代わりに color オプションを使用します。
enableEvents boolean false グラフにより、クリックやマウスオーバーなど、ユーザーがトリガーしたイベントをスローします。特定のグラフの種類でのみサポートされます。下記のイベントをご覧ください。
fill boolean false true の場合、各行の下にある領域に入力します。折れ線グラフでのみ使用できます。
firstHiddenColumn 数値 none

データ列のインデックス。ここに表示される列と以降のすべての列は、メインのグラフ系列要素(折れ線グラフの線、棒グラフの棒など)の描画に使用されませんが、マーカーやその他のアノテーションのデータとして使用されます。このインデックス数には文字列列が含まれます。

高さ 数値 200 グラフの高さ(ピクセル単位)。欠損しているか、許容範囲内でなければ、含まれる要素の高さが使用されます。その値も許容範囲外である場合は、デフォルトの高さが使用されます。
ラベル 文字列 「none」

[円グラフのみ] スライスごとに表示するラベル(ある場合)。次の値から選択します。

  • 'none' - ラベルなし。
  • 'value' - スライスの値をラベルとして表示します。
  • 'name' - スライス名(列名)をラベルとして表示します。
凡例 文字列 「右」 グラフの凡例を表示する場所です(グラフとの相対位置)。「top」、「bottom」、「left」、「right」、「none」のいずれかを指定します。凡例を含まないグラフ(地図のグラフなど)では無視されます。
最高 数値 データの最大値 段階評価の最大値。円グラフでは無視されます。デフォルトは最大値です。ただし、棒グラフを除き、デフォルトは最大値です。テーブルに複数のデータ列がある場合、これは棒グラフでは無視されます。
数値 最小限のデータ値 スケールに表示される最小値。円グラフでは無視されます。デフォルトは最小値です。ただし、棒グラフは例外で、デフォルトは 0 です。テーブルに複数のデータ列がある場合、これは棒グラフでは無視されます。
表示カテゴリラベル boolean true ラベルをカテゴリ(行)軸に表示するかどうか。折れ線グラフと棒グラフでのみ使用できます。
ShowValueLabels boolean true True の場合は、値軸にラベルが表示されます。折れ線グラフと棒グラフでのみ使用できます。
単一列ディスプレイ 数値 none 指定されたデータ列のみをレンダリングします。この数値は、テーブルへのゼロベースのインデックスです。ここで、0 は最初のデータ列です。単一列に割り当てられた色は、すべての列がレンダリングされたときの色と同じです。円グラフや地図グラフでは使用できません。
title 文字列 空の文字列 グラフのタイトル。指定しない場合、タイトルは表示されません。同等のグラフ パラメータは chtt です。
valueLabelsInterval 数値 自動 値軸のラベルを表示する間隔。たとえば、min が 0、max が 100、valueLabelsInterval が 20 の場合、グラフの軸ラベルは(0、20、40、60、80,100)です。
width 数値 400 グラフの幅(ピクセル単位)です。指定できない場合、または許容範囲内でない場合は、含まれる要素の幅が使用されます。これも許容範囲外である場合は、デフォルトの幅が使用されます。

メソッド

メソッド 戻り値の型 説明
draw(data, options) なし 地図を描画します。
getImageUrl() String チャートのリクエストに使用される Google Chart API の URL を返します。これは 2,000 文字より長い場合もあります。詳しくは、Google Chart API をご覧ください。

イベント

enableEvents プロパティを true に設定すると、以下の表でサポートされているユーザー イベントのイベントがスローされます。これらのイベントはすべて、次のプロパティを持つ event オブジェクトを返します。

  • type - イベントのタイプを表す文字列。
  • region - 影響を受ける地域の ID。未加工のグラフタイプに chof=json パラメータを追加して、使用可能な名前のリストを表示します。詳しくは、chof=json をご覧ください。
名前 説明 タイプ 値
error グラフのレンダリング中にエラーが発生しました。 id、message
onmouseover ユーザーがグラフ要素にカーソルを合わせると呼び出されます。 「mouseover」
onmouseout ユーザーがグラフ要素から離れると呼び出されます。 「mouseout」
onclick ユーザーがグラフ要素をクリックすると呼び出されます。

「click」

イベントに対応しているグラフ

chof=json パラメータをサポートしているグラフでは、イベントのスロー(つまり、QR コードなどの特殊なグラフを除くすべてのグラフ)がサポートされています。

イベント処理の例

マウスのクリックを記録するバーの例を以下に示します。

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

データポリシー

データは Google Chart API サービスに送信されます。

ローカライズ

この可視化は、Google Chart サービスでサポートされているローカライズをサポートしています。