重要: Google グラフツールのイメージグラフのサポートは、2012 年 4 月 20 日をもって正式に終了しました。この機能は非推奨ポリシーに従って引き続き機能します。
概要
Generic Image Chart は、Google Chart API で生成されるすべてのグラフの汎用ラッパーです。このビジュアリゼーションを使用する前に、Chart API のドキュメントをご覧ください。この可視化を使用すると、最大 16,000 件のデータを送信できます。Chart API の直接呼び出しで送信できるデータの上限は 2,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' を指定する必要はありません。軸を指定しないと、デフォルトで Generic Image Chart によってグラフを適切に設定しようとします。
<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 つあります。1 つはマップグラフ用、もう 1 つは他のすべてのグラフ用です。データでサポートされている数値形式は、JavaScript の Number 型のみです。
注: データまたはオプションとして渡される文字列値は、URL エンコードしないでください。
マップグラフ
マップグラフは、次の 2 つの必須の列を持つデータテーブルを使用します。
詳しくは、マップグラフのドキュメントをご覧ください。
地図以外のグラフ
地図以外のグラフでは、2 つのオプション列（先頭と末尾に 1 つずつ）と、その間に 1 つ以上のデータ列があるデータテーブルを使用します。
- 最初の列 - [省略可、文字列] 各エントリは、対応するグラフの X 軸（
chlまたはchxlパラメータと同等）で使用されるラベルを表します。 - 次の列 - 任意の数の数値列。それぞれがデータ系列を表します。
- 最後の列 - [省略可、文字列] データ列の後の任意の数の文字列列。各エントリは、対応するグラフのデータポイント ラベルを表します。この列を使用する場合は、
annotationColumnsオプションを指定する必要があります。
データは、グラフの種類に応じて異なる方法で表示されます。グラフのドキュメントをご覧ください。
列インデックスに関する注意: Generic Image Chart の可視化では、テーブルを Chart API サービスに送信する前に、データテーブルから文字列の列が削除されます。したがって、このページで定義したオプション、メソッド、イベントの列インデックスには、インデックス カウントの文字列列が含まれます。ただし、Chart API サービスによって処理されるオプション（chm オプションなど）の列インデックスは、インデックス カウントの文字列列を無視します。
構成オプション
この可視化では、以下のオプションが定義されています。ビジュアリゼーションの draw() メソッドに渡されるオプション オブジェクトで定義します。グラフの種類によっては、次のオプションがすべてサポートされているわけではありません。静止画像のグラフの種類についてのドキュメントをご覧ください。任意の Chart API URL パラメータをオプションとして渡すことができます。たとえば、グラフの可視化の URL パラメータ chg=50,50 は、options['chg'] = '50,50' のように指定します。
色に関する注意: colors、color、backgroundColor などの色オプションは、Chart API のカラー形式で指定されます。この形式は #RRGGBB 形式と似ていますが、透明度を示すオプションの 4 番目の 16 進数が含まれる点が異なります。「red」、「green」、「blue」などの人が読める色はサポートされていません。Chart API のカラー形式には先頭の # 記号がありませんが、汎用の画像グラフの可視化オプションでは、# の有無にかかわらずカラーコードを使用できます。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| annotationColumns | Array<object> | none | さまざまな種類のグラフ用のデータポイントのラベル。これはオブジェクトの配列で、それぞれがグラフ上の 1 つのデータポイントにフォーマット済みラベルを割り当てます。このオプションは、データポイントをサポートするグラフでのみ使用できます（詳しくは、リンクされているトピックをご覧ください）。データテーブルには、少なくとも 1 つの文字列ラベル列が必要です。 配列内の各オブジェクトには次のプロパティがあります。
例 - 次のスニペットは、12 ピクセルの黒のテキストラベルを定義しています。テキストは 0 列から取得され、同じ行の 2 列目のデータポイントに割り当てられています。 |
| backgroundColor | string | '#FFFFFF'（白） | グラフの背景色（Chart API カラー形式）。 |
| color | string | 自動車 | すべてのシリーズに使用する基本色を指定します。各シリーズは指定された色のグラデーションになります。色は、Chart API のカラー形式で指定します。colors が指定されている場合は無視されます。 |
| 色 | 配列<文字列> | 自動車 | 各データ系列に固有の色を割り当てるために使用します。色は、Chart API のカラー形式で指定します。色 i はデータ列 i に使用され、データ列が色数より多い場合は先頭に戻ります。すべてのシリーズで単一色のバリエーションが許容される場合は、代わりに color オプションを使用します。 |
| enableEvents | boolean | false | クリックやマウスオーバーなど、ユーザー トリガー イベントがグラフからスローされます。 特定のグラフの種類でのみサポートされています。下記のイベントをご覧ください。 |
| fill | boolean | false | true の場合、各行の下の領域が塗りつぶされます。折れ線グラフでのみ使用できます。 |
| firstHiddenColumn | 数値 | none | データ列のインデックス。リストされている列、およびこれに続くすべての列は、主要なグラフ系列要素（折れ線グラフ上の折れ線、棒グラフ上の棒など）の描画には使用されませんが、マーカーやその他の注釈のデータとして使用されます。このインデックス数には文字列列が含まれることに注意してください。 |
| 身長 | 数値 | 200 | グラフの高さ（ピクセル単位）。指定されていない場合または許容範囲内にない場合は、要素の高さが使用されます。その値も許容範囲外である場合は、デフォルトの高さが使用されます。 |
| labels | string | 「none」 | [円グラフのみ] 各スライスに表示するラベル（存在する場合）。次のいずれかの値を選択します。
|
| 凡例 | string | '右' | グラフの凡例を表示する場所（グラフを基準とする）'top'、'bottom'、'left'、'right'、'none' のいずれかを指定します。凡例が含まれていないグラフ（マップグラフなど）では無視されます。 |
| max | 数値 | データの最大値 | 体重計に表示される最大値。円グラフでは無視されます。デフォルトはデータの最大値です。ただし、棒グラフではデータの最大値がデフォルトになります。テーブルに複数のデータ列がある場合、棒グラフでは無視されます。 |
| 分 | 数値 | 最小データ値 | 体重計に表示される最小値。円グラフでは無視されます。デフォルトはデータの最小値です。ただし、棒グラフではデフォルトは 0 です。テーブルに複数のデータ列がある場合、棒グラフでは無視されます。 |
| showCategoryLabels | boolean | true | カテゴリ（行）の軸にラベルを表示するかどうかを指定します。折れ線グラフと棒グラフでのみ使用できます。 |
| showValueLabels | boolean | true | True の場合、値の軸にラベルが表示されます。折れ線グラフと棒グラフでのみ使用できます。 |
| singleColumnDisplay | 数値 | none | 指定したデータ列のみをレンダリングします。この数値は、テーブルに対するゼロベースのインデックスです。ゼロは最初のデータ列です。単一の列に割り当てられる色は、すべての列のレンダリング時と同じになります。円グラフまたはマップグラフでは使用できません。 |
| title | string | 空の文字列です | グラフのタイトル。指定しない場合、タイトルは表示されません。これに相当するグラフ パラメータは chtt です。 |
| valueLabelsInterval | 数値 | 自動車 | 値の軸ラベルを表示する間隔。たとえば、min が 0、max が 100、valueLabelsInterval が 20 の場合、グラフでは（0、20、40、60、80 100）の軸ラベルが表示されます。 |
| 幅 | 数値 | 400 | グラフの幅（ピクセル単位）。指定されていない場合または許容範囲内にない場合は、要素の幅が使用されます。その値も許容範囲外である場合は、デフォルトの幅が使用されます。 |
メソッド
| メソッド | 戻り値の型 | 説明 |
|---|---|---|
draw(data, options) |
なし | 地図を描画します。 |
getImageUrl() |
文字列 | グラフのリクエストに使用される Google Chart API の URL を返します。これは 2,000 文字を超える長さにすることもできます。詳しくは、Google Chart API をご覧ください。 |
イベント
enableEvents プロパティを true に設定すると、対応するグラフから、以下の表に示すユーザー イベントのイベントがスローされます。これらのイベントはすべて、次のプロパティを持つ event オブジェクトを返します。
type- イベントのタイプを表す文字列。region- 影響を受けるリージョンの ID。使用可能な名前のリストを表示するには、chof=jsonパラメータを未加工のグラフの種類に追加します。詳しくは、chof=jsonをご覧ください。
| 名前 | 説明 | タイプ Value |
|---|---|---|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 | id、message |
onmouseover |
ユーザーがグラフ要素にカーソルを合わせたときに呼び出されます。 | 「mouseover」 |
onmouseout |
ユーザーがグラフ要素からマウス離れたときに呼び出されます。 | 「mouseout」 |
onclick |
ユーザーがグラフ要素をクリックすると呼び出されます。 | 「クリック」 |
イベントに対応しているグラフ
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 サービスでサポートされているすべてのローカライズに対応しています。