概要
マップチャートは、国、大陸、または領域のマップであり、次の 3 つの方法のいずれかで特定されたエリアを示します。
- [地域] モードでは、国、州、都道府県など、地域全体の色を確認できます。
- マーカー モードでは、指定した値に従ってスケーリングされる領域が円で示されます。
- テキストモードは、地域に識別子（例:「ロシア」、「アジア」）。
ジオチャートは、SVG または VML を使用してブラウザ内にレンダリングされます。GeoChart はスクロールやドラッグに対応しておらず、地形図ではなく線画です。そのどれかが必要な場合は、地図の可視化機能を検討してください。
地域マップチャート
regions スタイルは、割り当てられた値に対応する色で地域（通常は国）全体を塗りつぶします。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
マーカーの GeoChart
markers スタイルは、指定された色とサイズで、ジオチャート上の指定された場所に円をレンダリングします。
ローマの不要なマーカーにカーソルを合わせると、虫メガネアイコンが表示され、マーカーの詳細が表示されます。（虫メガネは Internet Explorer バージョン 8 以前ではサポートされていません）。
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: Because markers require geocoding, you'll need a mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
比例マーカーの表示
通常、マーカーのジオチャートでは、最小のマーカー値が最小ポイントとして表示されます。（割合などの理由で）比例マーカー値を表示する場合は、sizeAxis オプションを使用して、minValue と maxValue を明示的に設定します。
たとえば、西ヨーロッパの地図には、フランス、ドイツ、ポーランドの 3 か国の人口と地域が表示されています。この母集団はすべて絶対数です（例:フランスは 6, 500 万）ですが、全面積に占める割合は、フランスのマーカーは人口の中間であるため 50 色になりますが、全体の面積は 50% であるため、100 のうち 50 になります。
次のコードでは、sizeAxis を使用してマーカーのサイズを 0 ～ 100 の範囲で指定します。また、colorAxis と RGB 値を使用して、母集団をオレンジ色から青色の範囲で表示します。このスペクトルは、色覚特性がない場合に最適です。最後に、このドキュメントで後述する「コンテンツ階層とコード」セクションに従って、region を 155 として西ヨーロッパを指定します。
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: Because markers require geocoding, you'll need a mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population', 'Area Percentage'],
['France', 65700000, 50],
['Germany', 81890000, 27],
['Poland', 38540000, 23]
]);
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: '155', // Western Europe
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
テキスト チャート
displayMode:
text を使って、テキストラベルをジオチャートにオーバーレイできます。
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
<html>
<head>
<script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['geochart'],
// Note: Because this chart requires geocoding, you'll need a mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
グラフの色を設定する
GeoChart の色をカスタマイズするには、いくつかの方法があります。
colorAxis: データテーブルの領域に使用する色のスペクトル。backgroundColor: グラフの背景色。datalessRegionColor: 関連するデータがないリージョンに割り当てる色。defaultColor: データテーブルで、値がnullであるか、指定されていないリージョンに割り当てる色。
colorAxis オプションは重要です。データ値の色の範囲を指定します。colorAxis 配列では、最初の要素はデータセット内の最小値で指定された色であり、最後の要素はデータセット内の最大値で指定された色です。3 つ以上の色を指定すると、それらの間で補間が行われます。
次のグラフでは、4 つのオプションをすべて使用します。colorAxis は、アフリカの旗をアフリカの旗の色に合わせて表示します。国の幅は、北部の赤色、黒色、南部の緑で表されます。backgroundColor オプションを使用すると、背景を明るい青色にし、datalessRegionColor は、アフリカ以外の国では薄いピンクに、マダガスカルでは defaultColor の色に使用できます。
var options = {
region: '002', // Africa
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: Because this chart requires geocoding, you'll need mapsApiKey.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Latitude'],
['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
['Canary Islands', 28], ['Cape Verde', 15],
['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
['Comoros', -12], ['Cote d\'Ivoire', 6],
['Democratic Republic of the Congo', -3], ['Djibouti', 12],
['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
['São Tomé and Principe', 0], ['Senegal', 15],
['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
['Zimbabwe', -18]
]);
var options = {
region: '002', // Africa
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"></div>
</body>
</html>
読み込み中
google.charts.load パッケージ名は "geochart" です。mapsApiKey はコピーしないでください。チャートでジオコーディングが不要であるか、標準以外のコードを使用して場所を識別できる限り、mapsApiKey は必要ありません。詳細については、読み込み設定をご覧ください。
google.charts.load('current', {
'packages': ['geochart'],
// Note: if your chart requires geocoding or uses nonstandard codes, you'll
// need to get a mapsApiKey for your project. The one below won't work.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
ジオチャート可視化クラス名は google.visualization.GeoChart です。
var visualization = new google.visualization.GeoChart(container);
データ形式
DataTable の形式は、使用する表示モード（regions、markers、text）によって異なります。
リージョン モードの形式
ロケーションは、以下で説明するように、1 つの列とオプションの 1 つの列に入力されます。
-
リージョンのロケーション [文字列、必須] - ハイライトするリージョン。次のすべての形式を使用できます。行ごとに異なる形式を使用できます。
- 国名の文字列（「イングランド」など）、または大文字の ISO-3166-1 alpha-2 コード、あるいはそれに相当する英語のテキスト（「GB」や「英国」など）。
- ISO-3166-2 大文字の地域コードネームまたはそれに相当する英語のテキスト（例: 「US-NJ」、「New Jersey」）。
- 大都市圏の市外局番。これらは、さまざまな地域を指定するために使用される 3 桁の大都市圏コードです。米国のコードのみがサポートされています。電話番号と同じではありません。
regionプロパティでサポートされている任意の値。
-
地域の色 [数値、省略可] -
colorAxis.colorsプロパティで指定されたスケールに基づいて、この地域に色を割り当てるために使用される数値列（省略可）。この列が存在しない場合、すべての領域が同じ色になります。列が存在する場合、null 値は使用できません。値は、sizeAxis.minValue/sizeAxis.maxValue値、またはcolorAxis.valuesプロパティで指定された値（指定する場合）を基準としてスケーリングされます。
マーカーモードの形式
列の数は、使用するマーカーの形式と省略可能な列によって異なります。
-
マーカーの場所（必須）
または
最初の列は特定の文字列アドレスです（例: 「1600 Pennsylvania Ave」）。最初の 2 列は数値です。最初の列は緯度、2 列目は経度です。
注: 「地域」モードには ISO 3166 コードを使用することをおすすめしますが、「マーカー」モードは、地域の長い名前（ドイツ、パナマなど）で最適に動作します。これは、チャートチャートでは「マーカー」モードにより Google マップで場所のジオコーディングを行うため（文字列の場所を緯度と経度に変換するため）、これにより、ドイツやデラウェア州について「DE」、パナマまたはペンシルベニア州を表す「PA」など、あいまいな地域がジオコーディングされないことが発生する可能性があります。
-
マーカーの色 [数値、省略可] 次の列は、
colorAxis.colorsプロパティで指定されたスケールに基づいて、このマーカーに色を割り当てるために使用されるオプションの数値列です。この列が存在しない場合は、すべてのマーカーが同じ色になります。列が存在する場合、null 値は使用できません。値は互いに相対的に、またはcolorAxis.valuesプロパティで指定された値に比例してスケーリングされます。 - マーカーのサイズ（省略可、数字）: 他のマーカーのサイズを基準として、マーカーサイズを割り当てる際に使用する数値列（省略可）。この列が存在しない場合は、前の列の値が使用されます（色の列も設定されていない場合は、デフォルトのサイズが使用されます）。この列が存在する場合、null 値は使用できません。
テキストモードの形式
ラベルは 1 列目とオプションの 1 列目に入力します。
- テキストラベル [文字列、必須] 特定の文字列アドレス（「1600 Pennsylvania Ave」など）。
- テキストサイズ [数値、省略可] 2 番目の列は、ラベルのサイズを割り当てるために使用されるオプションの数値列です。この列が存在しない場合、すべてのラベルは同じサイズになります。
設定オプション
| 名前 | |
|---|---|
| backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列（ タイプ: 文字列またはオブジェクト
デフォルト: 白
|
| backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: 白
|
| backgroundColor.stroke |
グラフの枠線の色（HTML の色文字列）。 型: string
デフォルト: '#666'
|
| backgroundColor.strokeWidth |
枠線の幅（ピクセル単位）。 タイプ: 数値
デフォルト: 0
|
| colorAxis |
色の列の値と色、またはグラデーション スケールのマッピングを指定するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {minValue: 0, colors: ['#FF0000', '#00FF00']}
タイプ: オブジェクト
デフォルト: null
|
| colorAxis.minValue |
存在する場合は、グラフの色データの最小値を指定します。この値以下のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータのカラー列の最小値
|
| colorAxis.maxValue |
存在する場合は、グラフの色データの最大値を指定します。この値以上のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータのカラー列の最大値
|
| colorAxis.values |
存在する場合、値と色の関連付け方法を制御します。各値は、 型: 数値の配列
デフォルト: null
|
| colorAxis.colors（色 Axis.色） |
ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は HTML の色文字列です（例: タイプ: 色文字列の配列。
デフォルト: null
|
| datalessRegionColor |
関連するデータがないリージョンに割り当てる色。 型: string
デフォルト: '#F5F5F5'
|
| デフォルト色 |
位置情報を示す場合に、ジオチャートのデータポイントに使用する色（ 型: string
デフォルト: '#267114'
|
| 表示モード |
これはどのタイプのジオチャートですか。DataTable の形式は、指定された値と一致する必要があります。次の値がサポートされています。
型: string
デフォルト: 「auto」
|
| domain |
マップチャートをこの地域から配信した場合と同様に表示します。たとえば、 型: string
デフォルト: null
|
| enableRegionInteractivity |
true の場合、リージョン間のインタラクティビティが有効になっています。たとえば、マウスのカーソルを合わせたときにフォーカスとツールチップを表示したり、マウスのクリックでリージョンを選択し、 デフォルトは、リージョン モードでは true、マーカー モードでは false です。 型: boolean
デフォルト: 自動
|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます）。 型: boolean
デフォルト: false
|
| geochartVersion |
GeoChart 境界データのバージョン。バージョン タイプ: 数値
デフォルト: 10
|
| 高さ |
ビジュアリゼーションの高さ（ピクセル単位）。デフォルトの高さは 347 ピクセルです。ただし、 タイプ: 数値
デフォルト: 自動
|
| KeepAspectRatio |
true の場合、ジオチャートは自然なアスペクト比でグラフ領域内に収まる最大サイズで描画されます。
false の場合、ジオチャートは、 型: boolean
デフォルト: true
|
| 凡例 |
メンバーが凡例のさまざまな要素を構成するオブジェクト（凡例を表示しない場合は「なし」）を設定するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {textStyle: {color: 'blue', fontSize: 16}}
タイプ: Object / 'none'
デフォルト: null
|
| 凡例番号形式 |
数値ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば、 型: string
デフォルト: 自動
|
| 凡例テキストスタイル |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| region |
マップチャートに表示される領域。（サラウンド領域も表示されます）。値は次のいずれかになります。
型: string
デフォルト: 「world」
|
| 虫メガネ |
虫メガネのさまざまな面を構成するメンバーがいるオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {enable: true, zoomFactor: 7.5}
タイプ: オブジェクト
デフォルト:
{enable: true, zoomFactor: 5.0} |
| magnifyingGlass.enable |
true の場合、ユーザーが雑然としたマーカーの上に留まると、拡大鏡が開きます。 注: この機能は、SVG をサポートしていないブラウザ（例: Internet Explorer バージョン 8 以前）ではサポートされていません。 型: boolean
デフォルト: true
|
| magnifyingGlass.zoomFactor |
虫メガネのズーム倍率。0 より大きい任意の数値を指定できます。 タイプ: 数値
デフォルト: 5.0
|
| markerOpacity |
マーカーの不透明度（0.0 で完全に透明、1.0 で完全に不透明）。 タイプ: number、0.0 ～ 1.0
デフォルト: 1.0
|
| regioncoderVersion |
リージョン コーダーデータのバージョン。バージョン タイプ: 数値
デフォルト: 0
|
| resolution |
マップチャートの枠線の解像度。次のいずれかの値を選択します。
型: string
デフォルト: 「国」
|
| sizeAxis |
値とバブルサイズを関連付ける方法を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {minValue: 0, maxSize: 20}
タイプ: オブジェクト
デフォルト: null
|
| sizeAxis.maxSize |
可能な最大のバブルの最大半径（ピクセル単位）。 タイプ: 数値
デフォルト: 12
|
| sizeAxis.maxValue |
タイプ: 数値
デフォルト: グラフデータの [サイズ] 列の最大値
|
| sizeAxis.minSize |
バブルの中で最小の半径（ピクセル単位）です。 タイプ: 数値
デフォルト: 3
|
| sizeAxis.minValue |
タイプ: 数値
デフォルト: グラフデータの [サイズ] 列の最小値
|
| ツールチップ |
さまざまなツールチップ要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
|
| tooltip.textStyle |
ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
ツールチップが表示されるユーザー操作:
型: string
デフォルト: 「focus」
|
| width |
ビジュアリゼーションの幅（ピクセル単位）。デフォルトの幅は 556 ピクセルです。ただし、 タイプ: 数値
デフォルト: 自動
|
大陸の階層とコード
大陸/亜大陸のジオチャートを表示するには、region オプションを次の 3 桁のコードのいずれかに設定します。コードと階層は、国連統計局が開発、管理するコードを除き、いくつかの例外があります。
| 大陸 | 亜大陸 | 国と地域 |
|---|---|---|
002 - アフリカ |
015 - 北アフリカ |
DZ、EG、EH、LY、MA、SD、SS、TN |
011 - 西アフリカ |
BF、 BJ、 CI、 CV、 GH、 GM、 GN GW LR ML MR | |
017 - 中東 |
AO、 CD、 ZR、 CF、 CG、 CM、 一般提供、 GQ、 ST、 TD | |
014 - 東アフリカ |
BI、DJ、ER、ET、KE、 KM、 MG、 MU、 MW、 MZ、 RE2、 | |
018 - 南アフリカ |
BW、LS、NA、SZ、ZA | |
150 - ヨーロッパ |
154 - 北ヨーロッパ |
GG、JE、 AX、 DK、 EE、 FI、 FO、 GB、 IE、 IM IS |
155 - 西ヨーロッパ |
AT、BE、 CH、 DE、 DD、 FR、 FX、 LI、 LU、 MC、 NL | |
151 - 東ヨーロッパ |
BG、BY、 CZ、 HU、 MD、 PL、 RO、 RU、 SU、 SK、 UA | |
039 - 南ヨーロッパ |
AD、 AL、 BA、 ES、 GI、 GR、 HR、 IT、 ME、 MK、 MT、RS RS | |
019 - 南北アメリカ |
021 - 北アメリカ |
BM、CA、GL、PM、US |
029 - カリブ料理 |
{A} | |
013 - 中央アメリカ |
BZ、CR、GT、HN、MX、NI、PA、SV | |
005 - 南アメリカ |
AR、 BO、 BR、 CL、 CO、 EC、 FK、 GF、 GY、 PE、 PY{/22 | |
142 - アジア |
143 - 中央アジア |
TM、TJ、KG、KZ、UZ |
030 - 東アジア |
CN、HK、JP、KP、KR、MN、MO、TW | |
034 - 南アジア |
AF、BD、BT、IN、IR、LK、MV、NP、PK | |
035 - 東南アジア |
BN、ID、KH、LA、MM、BU、MY、PH、SG、TH、TL、2 | |
145 - 西アジア |
AE、 AM、 AZ、 BH、 CY、 GE、 IL、 IQ、 JO、 KW | |
009 - オセアニア |
053 - オーストラリア、ニュージーランド |
AU、NF、NZ |
054 - メラネシア |
FJ、NC、PG、SB、VU | |
057 - ミクロネシア |
FM、GU、KI、MH、MP、NR、PW | |
061 - ポリネシア |
AS、CK、NU、PF、PN、 TK、 TO、 TV、 WF、 WS |
メソッド
| メソッド | |
|---|---|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
draw(data, options) |
グラフを描画します。グラフでは、 戻り値の型: なし
|
getImageURI() |
画像 URI としてシリアル化されたグラフを返します。 グラフを描画した後に呼び出します。 PNG グラフを印刷するをご覧ください。 戻り値の型: 文字列
|
getSelection() |
選択したグラフ エンティティの配列を返します。選択可能なエンティティとは、値が割り当てられた地域のことです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
setSelection() |
指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。
選択可能なエンティティとは、値が割り当てられた地域のことです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: なし
|
イベント
| 名前 | |
|---|---|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、 プロパティ: なし
|
regionClick |
リージョンがクリックされたときに呼び出されます。「地域」オプションに割り当てられた特定の国について（特定の国がリストされている場合）スローされません。
プロパティ: 単一のプロパティ「
region」を持つオブジェクト。クリックされた地域を示す ISO-3166 形式の文字列です。 |
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、 プロパティ: なし
|
データポリシー
地域は Google マップでジオコーディングされます。ジオコーディングを必要としないデータはサーバーに送信されません。 データポリシーについて詳しくは、Google マップの利用規約をご覧ください。