ビジュアリゼーション: GeoChart

  1. Overview
  2. 地域の GeoChart
  3. マーカー GeoChart
  4. テキスト GeoChart
  5. グラフを色分けする
  6. 読み込んでいます
  7. データ形式
  8. 構成オプション
  9. メソッド
  10. イベント
  11. データポリシー

概要

ジオチャートは、国、大陸、地域の地図であり、地域は 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 のうち）となっています。

このコードでは 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>

テキスト GeoChart

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
<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'
  });

Geochart 可視化クラスの名前は google.visualization.GeoChart です。

  var visualization = new google.visualization.GeoChart(container);

データ形式

DataTable の形式は、使用する表示モード（regions、markers、text）によって異なります。

地域モードの形式

場所は 1 列と、省略可能な列を 1 列ずつ入力します（以下を参照）。

  1. リージョンのロケーション [文字列、必須] - ハイライト表示するリージョン。以下のすべての形式を使用できます。行ごとに異なる形式を使用できます。
    • 国名を文字列（「England」など）、大文字の ISO-3166-1 alpha-2 コード、またはそれと同等の英語テキスト（「GB」や「United Kingdom」など）で指定します。
    • 大文字の ISO-3166-2 地域コード名、またはそれと同等の英語テキスト（「US-NJ」や「New Jersey」など）。
    • 大都市圏の市外局番。さまざまなリージョンを指定するために使用される 3 桁の大都市圏コードで、米国のコードのみがサポートされています。電話番号は市外局番とは異なります。
    • region プロパティでサポートされている任意の値。
  2. 地域の色 [数値、省略可] - colorAxis.colors プロパティで指定されたスケールに基づいて、この地域に色を割り当てるために使用される数値列（省略可）。この列が存在しない場合、すべての地域が同じ色になります。列が存在する場合、null 値は許可されません。値は、sizeAxis.minValue/sizeAxis.maxValue 値、または colorAxis.values プロパティで指定された値（指定されている場合）を基準としてスケーリングされます。

マーカーモードの形式

列の数は、使用するマーカーの形式と、他のオプションの列によって異なります。

  • マーカーの位置（必須）
    最初の列は、特定の文字列の住所です（例: 「1600 Pennsylvania Ave」）。

    または

    最初の 2 列は数値で、1 列目は緯度、2 列目は経度です。

    注: 「地域」モードでは ISO 3166 コードを使用することをおすすめしますが、「マーカー」モードは地域の長い名前（ドイツ、パナマなど）で使用することをおすすめします。これは、Geocharts が「マーカー」モードの場合、Google マップを使用して場所をジオコーディングする（文字列による場所を緯度と経度に変換する）ためです。その結果、あいまいな場所が想定どおりにジオコーディングされないことがあります。たとえば、「DE」はドイツやデラウェア州、「PA」はパナマやペンシルベニアを表します。

  • マーカーの色（数値、省略可）: 次の列は、colorAxis.colors プロパティで指定されたスケールに基づいて、このマーカーに色を割り当てるために使用されるオプションの数値列です。この列が存在しない場合、すべてのマーカーは同じ色になります。列が存在する場合、null 値は許可されません。値は、互いに相対的にスケーリングされるか、colorAxis.values プロパティで指定された値に対して絶対的にスケーリングされます。
  • マーカーのサイズ（数値、省略可）: 他のマーカーサイズに対する相対的なマーカーサイズを割り当てるために使用されるオプションの数値列。この列が存在しない場合は、前の列の値が使用されます（色の列が指定されていない場合はデフォルトのサイズが使用されます）。列が存在する場合、null 値は許可されません。

テキストモードの形式

最初の列と、省略可能な 1 列にラベルを入力します。

  • テキストラベル（文字列、必須）: 特定の文字列の住所（例: 「1600 Pennsylvania Ave」）。
  • テキストサイズ（数値、省略可）: 2 番目の列は、ラベルのサイズを割り当てるために使用するオプションの数値列です。この列が存在しない場合、すべてのラベルは同じサイズになります。

構成オプション

名前
backgroundColor

グラフのメイン領域の背景色。単純な HTML カラー文字列（'red'、'#00cc00' など）か、次のプロパティを持つオブジェクトのいずれかです。

タイプ: 文字列またはオブジェクト
デフォルト: 白
backgroundColor.fill

グラフの塗りつぶしの色。HTML の色文字列で指定します。

型: string
デフォルト: 白
backgroundColor.stroke

グラフの枠線の色。HTML のカラー文字列で指定します。

型: string
デフォルト: 「#666」
backgroundColor.strokeWidth

枠線の幅（ピクセル単位）。

タイプ: 数値
デフォルト: 0
colorAxis

カラー列の値と、色またはグラデーション スケールのマッピングを指定するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
タイプ: オブジェクト
デフォルト: null
colorAxis.minValue

存在する場合、グラフの色データの最小値を指定します。この値以下のカラーデータ値は、colorAxis.colors 範囲の最初の色としてレンダリングされます。

タイプ: 数値
デフォルト: グラフデータの色列の最小値
colorAxis.maxValue

存在する場合、グラフの色データの最大値を指定します。この値以上のカラーデータ値は、colorAxis.colors 範囲の最後の色としてレンダリングされます。

タイプ: 数値
デフォルト: グラフデータの色列の最大値
colorAxis.values

指定する場合は、値を色に関連付ける方法を制御します。各値は、colorAxis.colors 配列内の対応する色に関連付けられています。これらの値は、グラフのカラーデータに適用されます。色付けは、ここで指定した値のグラデーションに従って行われます。このオプションに値を指定しないことは、[minValue, maxValue] を指定するのと同じことです。

型: 数値の配列
デフォルト: null
colorAxis.colors

ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は HTML カラー文字列です（例: colorAxis: {colors:['red','#004411']}）。2 つ以上の値が必要です。グラデーションには、すべての値と計算された中間値が含まれます。最初の色が最小値、最後の色が最大値になります。

型: 色文字列の配列
デフォルト: null
datalessRegionColor

関連データがないリージョンに割り当てる色。

型: string
デフォルト: '#F5F5F5'
defaultColor

地域グラフのデータポイントに使用する色です（例:'US' ）が存在していますが、値が null であるか、指定されていません。これは、データが欠落している場合に使用される色である datalessRegionColor とは異なります。

型: string
デフォルト: 「#267114」
displayMode

ジオチャートのタイプです。DataTable の形式は、指定した値と一致している必要があります。次の値を使用できます。

  • 「auto」 - DataTable の形式に基づいて選択します。
  • [Region] - ジオチャート上の地域に色を付けます。
  • 「markers」 - 領域にマーカーを配置します。
  • 「text」- DataTable のテキストを使用して領域にラベルを付けます。
型: string
デフォルト: 「auto」
ドメイン

このリージョンから提供されているかのようにジオチャートを表示します。たとえば、domain を 'IN' に設定すると、カシミールは係争地ではなくインドに属していると表示されます。

型: string
デフォルト: null
enableRegionInteractivity

true の場合、領域のインタラクティビティ（マウスオーバー時のフォーカスとツールチップの詳細表示、マウスクリック時の regionClick および select イベントの領域の選択と起動など）を有効にします。

デフォルト値は、リージョン モードでは true、マーカー モードでは false です。

型: boolean
デフォルト: 自動
forceIFrame

インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。

型: boolean
デフォルト: false
geochartVersion

GeoChart の境界線データのバージョンです。バージョン 10 と 11 を利用できます。

タイプ: 数値
デフォルト: 10
身長

可視化の高さ（ピクセル単位）。デフォルトの高さは 347 ピクセルです。ただし、width オプションが指定され、keepAspectRatio が true に設定されている場合、高さはその値に基づいて計算されます。

タイプ: 数値
デフォルト: auto
keepAspectRatio

true の場合、ジオチャートは自然なアスペクト比でグラフ領域内に収まる最大のサイズで描画されます。width オプションと height オプションのどちらか一方だけを指定すると、もう一方はアスペクト比に基づいて計算されます。

false の場合、ジオチャートは width オプションと height オプションで指定されたチャートと同じサイズに引き伸ばされます。

型: boolean
デフォルト: true
凡例

凡例のさまざまな要素を構成するメンバーを含むオブジェクト。凡例を表示しない場合は「none」です。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。

 {textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト / 「なし」
デフォルト: null
legend.numberFormat

数値ラベルの形式文字列。これは、 ICU パターンセット のサブセットです。 たとえば、{numberFormat:'.##'} は、10.666、10.6、10 の値に対して「10.66」、「10.6」、「10.0」を表示します。

型: string
デフォルト: auto
legend.textStyle

凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
地域

ジオチャートに表示する領域。（周辺のエリアも表示されます）。次のいずれか 1 つを指定できます。

  • 「world」 - 全世界のジオチャート。
  • 3 桁のコードで指定される大陸または亜大陸（例:西アフリカの場合は「011」。
  • ISO 3166-1 alpha-2 コードで指定される国。例:オーストラリアは「AU」となります。
  • ISO 3166-2:US コードで指定される米国の州。例:アラバマ州の場合は「US-AL」です。なお、resolution オプションは「revil」または「metros」のいずれかに設定する必要があります。
型: string
デフォルト: 「world」
magnifyingGlass

虫メガネのさまざまな側面を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。

{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 は完全な不透明です。

型: 数値（0.0 ～ 1.0）
デフォルト: 1.0
regioncoderVersion

リージョンコーダ データのバージョン。バージョン 0 と 1 を利用できます。

タイプ: 数値
デフォルト: 0
resolution

ジオチャートの境界線の解像度。次のいずれかの値を選択します。

  • 「countries」 - 米国の州地域を除くすべての地域でサポートされています。
  • 「州」 - 国および米国の州地域でのみ使用できます。一部の国ではご利用になれません。国をテストして、このオプションがサポートされているかどうかを確認してください。
  • 「metros」 - 米国の国または地域でのみサポートされています。
型: string
デフォルト: 「countries」
sizeAxis

バブルのサイズに値を関連付ける方法を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。

 {minValue: 0,  maxSize: 20}
タイプ: オブジェクト
デフォルト: null
sizeAxis.maxSize

バブルの最大半径（ピクセル単位）。

タイプ: 数値
デフォルト: 12
sizeAxis.maxValue

sizeAxis.maxSize にマッピングされるサイズ値（グラフデータに表示されます）。これより大きい値はこの値に切り抜かれます。

タイプ: 数値
デフォルト: グラフデータにおける列のサイズの最大値
sizeAxis.minSize

できる限り小さいバブルの最小半径（ピクセル単位）。

タイプ: 数値
デフォルト: 3
sizeAxis.minValue

sizeAxis.minSize にマッピングされるサイズ値（グラフデータに表示されます）。小さい値はこの値に切り抜かれます。

タイプ: 数値
デフォルト: グラフデータの列の最小値
ツールチップ

さまざまなツールチップ要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。

{textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
tooltip.textStyle

ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

ツールチップを表示するユーザー操作:

  • 「フォーカス」 - ユーザーが要素にカーソルを合わせると、ツールチップが表示されます。
  • 「none」: ツールチップは表示されません。
  • 「selection」- ユーザーが要素を選択するとツールチップが表示されます。
型: string
デフォルト: 「focus」
幅

可視化の幅（ピクセル単位）。デフォルトの幅は 556 ピクセルです。ただし、height オプションが指定され、keepAspectRatio が true に設定されている場合、幅は適宜計算されます。

タイプ: 数値
デフォルト: auto

 

大陸の階層とコード

region オプションを以下の 3 桁のコードのいずれかに設定すると、大陸や亜大陸のジオチャートを表示できます。コードと階層は、一部の例外を除き、 国連統計局 によって開発、管理されているコードに基づいています。

大陸 亜大陸 国
002 - アフリカ 015 - アフリカ大陸北部 DZ、EG、EH、LY、MA、SD、SS、TN
011 - 西アフリカ BF、 BJ、 CI、 CV、 GH、 GM、 GN、 GW、 LR、 ML、 MR、 MR、SHSLSN
017 - 中央アフリカ AO、CD、ZR、CF、CG、CM、GA、GQ、ST、TD
014 - 東アフリカ BI、 DJ、 ER、 ET、 KE、 KM、 MG、MU、 MW、 MZ、 RE、RE RE RE RE 、RWSCSOTZUG
018 - 南アフリカ BW、LS、NA、SZ、ZA
150 - ヨーロッパ 154 - 北ヨーロッパ GG、 JE、 AX、 DK、 EE、 FI、 FO、 GB、 IE、 IM、 IS、 IS、 IS、 LV
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、
019 - 南北アメリカ 021 - 北アメリカ BM、CA、GL、PM、US
029 - カリブ諸国 AG、 AI AI、 、 AW、 BB、 BL、 CU、 DM、 DO、 GD、、LCMS
013 - 中央アメリカ BZ、CR、GT、HN、MX、NI、PA、SV
005 - 南アメリカ AR、 BO、 BR、 CL、 CO、 EC、 FK、 GF、 GY、 PE、 PY PY、SRSRVE
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、 TP VN
145 - 西アジア AE、 AM、 AZ、 BH、 CY、 GE、 IL、 IQ、 JO、 KW、 LB LB 、、
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()

チャートを消去し、割り当て済みリソースをすべて解放します。

戻り値の型: none
draw(data, options)

グラフを描画します。グラフは、ready イベントが発生した後にのみ、それ以上のメソッド呼び出しを受け入れます。Extended description。

戻り値の型: none
getImageURI()

画像の URI としてシリアル化されたグラフを返します。

グラフが描画された後に呼び出されます。

PNG チャートの印刷をご覧ください。

戻り値の型: string
getSelection()

選択したグラフ エンティティの配列を返します。 選択可能なエンティティとは、値が割り当てられているリージョンです。 このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。 Extended description 。

戻り値の型: 選択要素の配列
setSelection()

指定したグラフ エンティティを選択します。前の選択をキャンセルします。 選択可能なエンティティとは、値が割り当てられているリージョンです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description 。

戻り値の型: none

イベント

名前
error

グラフのレンダリング中にエラーが発生したときに呼び出されます。

プロパティ: id、message
ready

グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。

Properties（プロパティ）: なし
regionClick

地域がクリックされたときに呼び出されます。これは、「region」オプションに割り当てられた特定の国に対してスローされません（特定の国がリストされている場合）。

プロパティ: region という単一プロパティを持つオブジェクト。このプロパティは、クリックされた領域を記述する ISO-3166 形式の文字列です。
select

ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、getSelection() を呼び出します。

Properties（プロパティ）: なし

データポリシー

店舗は Google マップによってジオコーディングされます。ジオコーディングを必要としないデータは、どのサーバーにも送信されません。データポリシーについて詳しくは、Google マップ利用規約をご覧ください。