重要: 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'
を指定します。
色に関する注記: colors
、color
、backgroundColor
などのカラー オプションは、Chart API の色形式で指定します。この形式は #RRGGBB の形式と似ていますが、透明性を示すために 4 桁の 16 進数を任意に含めることができます。「赤」、「緑」、「青」など、人が読める色はサポートされていません。Chart API のカラー形式には、先頭に # 記号を付けませんが、一般的な画像グラフの可視化オプションでは # の有無にかかわらずカラーコードを使用できます。
名前 | タイプ | Default | 説明 |
---|---|---|---|
アノテーション列 | 配列<object> | none | さまざまなタイプのグラフのデータポイント ラベル。これはオブジェクトの配列で、グラフ上の 1 つのデータポイントに書式付きラベルを割り当てます。このオプションは、データポイントをサポートするグラフでのみ使用できます(詳しくは、リンク先のトピックをご覧ください)。また、データテーブルには少なくとも 1 つの文字列ラベル列が必要です。 配列内の各オブジェクトには次のプロパティがあります。
例 - このスニペットでは、黒色の 12 ピクセルのテキストラベルが定義されています。テキストラベルは列 0 から取得され、同じ行の列 2 のデータポイントに割り当てられています。 |
backgroundColor | 文字列 | 「#FFFFFF」(白) | グラフの背景色。Chart API の色形式で指定します。 |
色 | 文字列 | 自動 | すべての系列で使用する基本色を指定します。各系列は、指定された色のグラデーションになります。色は Chart API のカラー形式で指定します。colors が指定されている場合は無視されます。 |
色 | 配列 <文字列> | 自動 | これを使用して、各データ系列に特定の色を割り当てます。色は、Chart API のカラー形式で指定します。色 i はデータ列 i に使用され、色よりもデータ列が多い場合は先頭にラップされます。同じ色のバリエーションがすべてのシリーズで許容される場合は、代わりに color オプションを使用します。 |
enableEvents | boolean | false | グラフにより、クリックやマウスオーバーなど、ユーザーがトリガーしたイベントをスローします。特定のグラフの種類でのみサポートされます。下記のイベントをご覧ください。 |
fill | boolean | false | true の場合、各行の下にある領域に入力します。折れ線グラフでのみ使用できます。 |
firstHiddenColumn | 数値 | none | データ列のインデックス。ここに表示される列と以降のすべての列は、メインのグラフ系列要素(折れ線グラフの線、棒グラフの棒など)の描画に使用されませんが、マーカーやその他のアノテーションのデータとして使用されます。このインデックス数には文字列列が含まれます。 |
高さ | 数値 | 200 | グラフの高さ(ピクセル単位)。欠損しているか、許容範囲内でなければ、含まれる要素の高さが使用されます。その値も許容範囲外である場合は、デフォルトの高さが使用されます。 |
ラベル | 文字列 | 「none」 | [円グラフのみ] スライスごとに表示するラベル(ある場合)。次の値から選択します。
|
凡例 | 文字列 | 「右」 | グラフの凡例を表示する場所です(グラフとの相対位置)。「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 サービスでサポートされているローカライズをサポートしています。