Visualisierung: Geo-Diagramm

  1. Overview
  2. GeoDiagramme für Regionen
  3. GeoDiagramme für Markierungen
  4. Text-Geodiagramme
  5. Diagramme mit Farbe versehen
  6. Loading
  7. Datenformat
  8. Konfigurationsoptionen
  9. Methoden
  10. Ereignisse
  11. Datenrichtlinie

Übersicht

Ein Geodiagramm ist eine Karte eines Landes, eines Kontinents oder einer Region, wobei die Bereiche auf eine von drei Arten identifiziert werden können:

  • Im Modus Region werden ganze Regionen dargestellt, z. B. Länder, Provinzen oder Bundesländer.
  • Im Modus Markierungen werden mithilfe von Kreisen Regionen festgelegt, die entsprechend einem von Ihnen festgelegten Wert skaliert werden.
  • Im Modus Text werden die Regionen mit Kennungen gekennzeichnet (z.B. „Russland“ oder „Asien“).

Ein Geodiagramm wird im Browser mit SVG oder VML gerendert. Beachten Sie, dass das Geodiagramm nicht scrollbar ist und nicht ziehbar ist. Es ist eine Linienzeichnung und keine Geländekarte. Wenn Sie etwas davon benötigen, sollten Sie stattdessen eine Kartenvisualisierung in Betracht ziehen.

Regions-GeoDiagramme

Der Stil regions füllt ganze Regionen (in der Regel Länder) mit Farben, die den von Ihnen zugewiesenen Werten entsprechen.

 
<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>

Markierungs-GeoDiagramme

Mit dem Stil markers werden Kreise an bestimmten Positionen im Geodiagramm in der von Ihnen angegebenen Farbe und Größe gerendert.
Wenn Sie den Mauszeiger auf die unübersichtlichen Markierungen in Rom bewegen, öffnet sich eine Lupe, in der die Markierungen genauer dargestellt werden. (Die Lupe wird in Internet Explorer Version 8 oder älter nicht unterstützt.)

<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>

Proportionale Markierungen anzeigen

Normalerweise wird in Geodiagrammen für Markierungen der kleinste Markierungswert als Minimalpunkt angezeigt. Wenn Sie stattdessen proportionale Markierungswerte anzeigen möchten (z. B. weil es sich um Prozentsätze handelt), verwenden Sie die Option sizeAxis, um minValue und maxValue explizit festzulegen.

Hier ist zum Beispiel eine Karte von Westeuropa mit Bevölkerungszahlen und Gebieten für drei Länder: Deutschland, Frankreich und Polen. Die Populationen sind alle absolute Zahlen (z.B. 65 Millionen für Frankreich). Die Gebiete sind jedoch alle Prozentsätze des Ganzen: Die Markierung für Frankreich ist violett gefärbt, weil die Bevölkerung mittelmäßig ist, aber nur 50 (von 100 möglichen) Größe hat, da sie 50% der Gesamtfläche umfasst.

In diesem Code wird sizeAxis verwendet, um Markierungsgrößen im Bereich von 0 bis 100 anzugeben. Außerdem verwenden wir colorAxis mit RGB-Werten, um die Populationen in einem Farbbereich von Orange bis Blau darzustellen. Dieses Spektrum eignet sich gut für Nutzer mit Farbblindheit. Schließlich geben wir Westeuropa mit einem region von 155 an, wie im Abschnitt "Inhaltshierarchie und -Codes" weiter unten in diesem Dokument angegeben.

<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>

Text-Geodiagramme

Mit displayMode: text können Sie Textlabels in ein Geodiagramm einblenden.

Daten und Optionen
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };
Vollständiges 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>

Diagramm mit Farbe versehen

Es gibt mehrere Möglichkeiten zum Anpassen der Farben von GeoCharts:

  • colorAxis: das Farbspektrum, das für die Regionen in der Datentabelle verwendet werden soll.
  • backgroundColor: die Hintergrundfarbe des Diagramms.
  • datalessRegionColor: die Farbe, die Regionen ohne zugehörige Daten zugewiesen werden soll.
  • defaultColor: die Farbe, die Regionen in der Datentabelle zugewiesen werden soll, für die der Wert entweder null oder nicht angegeben ist.

Die Option colorAxis ist die wichtige Option: Sie legt den Farbbereich für Ihre Datenwerte fest. Im Array colorAxis ist das erste Element die Farbe, die dem kleinsten Wert im Dataset zugewiesen wird, und das letzte Element die Farbe, die dem größten Wert im Dataset zugewiesen wird. Wenn Sie mehr als zwei Farben angeben, erfolgt eine Interpolation zwischen ihnen.

Im folgenden Diagramm verwenden wir alle vier Optionen. Mit colorAxis wird Afrika mit den Farben der panafrikanischen Flagge unter Verwendung der Breitengrade der Länder dargestellt: von Rot im Norden über Schwarz bis Grün im Süden. Mit der Option backgroundColor wird der Hintergrund hellblau, mit datalessRegionColor die nichtafrikanischen Länder hellrosa eingefärbt und mit defaultColor für Madagaskar.
Optionen
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Ganze Webseite
<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>

Wird geladen

Der Paketname „google.charts.load“ lautet "geochart". Sie sollten unseren mapsApiKey nicht kopieren, da das nicht funktioniert. Sie benötigen keinen mapsApiKey, solange für Ihr Diagramm keine Geocodierung oder nicht standardmäßige Codes zum Identifizieren von Standorten erforderlich sind. Weitere Informationen finden Sie unter Einstellungen laden. 

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

Der Name der Geochart-Visualisierungsklasse lautet google.visualization.GeoChart. 

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

Datenformat

Das Format der DataTable variiert je nach verwendetem Anzeigemodus: regions, markers oder text.

Format des Regionsmodus

Der Standort wird in eine Spalte eingegeben, plus eine optionale Spalte, wie hier beschrieben:

  1. Region location [String, required]: Eine Region, die hervorgehoben werden soll. Die folgenden Formate werden akzeptiert. Sie können in verschiedenen Zeilen unterschiedliche Formate verwenden:
    • Ein Ländername als String (z. B. "England") oder ein ISO-3166-1 alpha-2-Code in Großbuchstaben oder sein Äquivalent in englischer Sprache (z. B. "GB" oder "Vereinigtes Königreich").
    • Ein großgeschriebener Regionscode gemäß ISO-3166-2 oder ein Äquivalent in englischer Sprache, z. B. "US-NJ" oder "New Jersey".
    • Eine Metropolvorwahl. Dies sind dreistellige Großraumcodes, mit denen verschiedene Regionen gekennzeichnet werden. Es werden nur US-Codes unterstützt. Beachten Sie, dass dies nicht mit den Vorwahlen identisch ist.
    • Jeder Wert, der vom Attribut region unterstützt wird.
  2. Farbe der Region [Zahl, optional] – Eine optionale numerische Spalte, mit der dieser Region basierend auf der in der Eigenschaft colorAxis.colors angegebenen Skala eine Farbe zugewiesen wird. Wenn diese Spalte nicht vorhanden ist, haben alle Regionen die gleiche Farbe. Wenn die Spalte vorhanden ist, sind Nullwerte nicht zulässig. Werte werden relativ zu den sizeAxis.minValue/sizeAxis.maxValue-Werten oder zu den Werten skaliert, die in der Eigenschaft colorAxis.values angegeben sind, sofern angegeben.

Format des Markierungsmodus

Die Anzahl der Spalten variiert je nach verwendetem Markierungsformat und anderen optionalen Spalten.

  • Position der Markierung [erforderlich]
    Die erste Spalte enthält die Adresse in einem bestimmten String, z. B. „Hauptstraße 16“.

    ODER

    Die ersten beiden Spalten sind numerisch, wobei die erste Spalte den Breitengrad und die zweite Spalte der Längengrad enthält.

    Hinweis:Für den Modus „Regionen“ empfehlen wir zwar ISO 3166-Codes, aber der Modus „Markierungen“ funktioniert am besten bei längeren Namen für Regionen wie Deutschland oder Panama. Das liegt daran, dass Geodiagramme im Markierungsmodus Google Maps zur Geocodierung der Standorte verwenden. Dabei wird ein Standort als String in einen Breiten- und Längengrad umgewandelt. Dies kann dazu führen, dass mehrdeutige Standorte nicht wie erwartet geocodiert werden, z. B. „DE“ für Deutschland oder Delaware oder „PA“ für Panama oder Pennsylvania.

  • Markierungsfarbe [Zahl, optional] Die nächste Spalte ist eine optionale numerische Spalte, mit der dieser Markierung eine Farbe zugewiesen wird, basierend auf dem in der Eigenschaft colorAxis.colors angegebenen Maßstab. Ist diese Spalte nicht vorhanden, haben alle Markierungen die gleiche Farbe. Wenn die Spalte vorhanden ist, sind Nullwerte nicht zulässig. Werte werden relativ zueinander oder absolut zu den Werten skaliert, die im Attribut colorAxis.values angegeben sind.
  • Markierungsgröße [Zahl, optional] Eine optionale numerische Spalte, mit der die Größe der Markierung relativ zu den anderen Markierungsgrößen zugewiesen wird. Ist diese Spalte nicht vorhanden, wird der Wert aus der vorherigen Spalte verwendet (oder die Standardgröße, wenn auch keine Farbspalte angegeben wird). Wenn die Spalte vorhanden ist, sind Nullwerte nicht zulässig.

Format im Textmodus

Das Label wird in die erste Spalte eingegeben, plus eine optionale Spalte:

  • Textlabel [String, Required] Eine bestimmte Stringadresse, z. B. „1600 Pennsylvania Ave“.
  • Textgröße [Zahl, optional] Die zweite Spalte ist eine optionale numerische Spalte, mit der die Größe des Labels zugewiesen wird. Ist diese Spalte nicht vorhanden, haben alle Labels die gleiche Größe.

Konfigurationsoptionen

Name
backgroundColor

Die Hintergrundfarbe für den Hauptbereich des Diagramms. Dies kann entweder ein einfacher HTML-Farbstring wie 'red' oder '#00cc00' oder ein Objekt mit den folgenden Eigenschaften sein.

Typ:String oder Objekt
Standard:Weiß
backgroundColor.fill

Die Füllfarbe des Diagramms als HTML-Farbstring.

Typ: String
Standard:Weiß
backgroundColor.stroke

Die Farbe des Diagrammrahmens als HTML-Farbstring.

Typ: String
Standard: #666
backgroundColor.strokeWidth

Die Rahmenbreite in Pixeln.

Typ:Zahl
Standard: 0
colorAxis

Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder eine Farbverlaufsskala angibt. Zum Angeben der Eigenschaften dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Typ:Objekt
Standard:null
colorAxis.minValue

Falls vorhanden, gibt es einen Mindestwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als erste Farbe im Bereich colorAxis.colors gerendert.

Typ:Zahl
Standard:Mindestwert der Farbspalte in Diagrammdaten
colorAxis.maxValue

Falls vorhanden, gibt es einen Maximalwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich colorAxis.colors gerendert.

Typ:Zahl
Standard:Maximalwert der Farbspalte in Diagrammdaten
colorAxis.values

Falls vorhanden, wird damit gesteuert, wie Werte mit Farben verknüpft werden. Jeder Wert ist der entsprechenden Farbe im Array colorAxis.colors zugeordnet. Diese Werte gelten für die Farbdaten des Diagramms. Die Färbung erfolgt nach einem Farbverlauf der hier angegebenen Werte. Wenn Sie keinen Wert für diese Option angeben, entspricht dies der Angabe von [minValue, maxValue].

Typ:Array von Zahlen
Standard:null
colorAxis.colors

Farben, die Werten in der Visualisierung zugewiesen werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: colorAxis: {colors:['red','#004411']}. Sie müssen mindestens zwei Werte angeben. Der Farbverlauf enthält alle Ihre Werte sowie berechnete Zwischenwerte, wobei die erste Farbe den kleinsten Wert und die letzte Farbe den höchsten Wert hat.

Typ:Array von Farbstrings
Standard:null
datalessRegionColor

Farbe, die Regionen ohne zugehörige Daten zugewiesen werden soll.

Typ: String
Standard: #F5F5F5
defaultColor

Die Farbe, die für Datenpunkte in einem Geodiagramm verwendet werden soll, wenn der Standort (z.B. 'US') vorhanden ist, aber der Wert ist entweder null oder nicht angegeben. Dies unterscheidet sich von datalessRegionColor, der Farbe, die verwendet wird, wenn Daten fehlen.

Typ: String
Standard: #267114
displayMode

Die Art des Geodiagramms. Das Datentabellenformat muss dem angegebenen Wert entsprechen. Die folgenden Werte werden unterstützt:

  • "auto": Wählen Sie diese Option auf Basis des Formats der Datentabelle aus.
  • Regionen: Hier können Sie die Regionen im Geodiagramm farblich hervorheben.
  • "markers" - Platzieren Sie Markierungen in den Regionen.
  • 'text' - Kennzeichnen Sie die Regionen mit Text aus der DataTable.
Typ: String
Standardeinstellung: „auto“
Domain

Geodiagramm so anzeigen, als würde es aus dieser Region bereitgestellt werden. Wenn Sie beispielsweise domain auf 'IN' setzen, wird Kaschmir als zu Indien gehörend und nicht als umstrittenes Gebiet angezeigt.

Typ: String
Standard:null
enableRegionInteractivity

Falls wahr, aktivieren Sie die Interaktivität für die Regionen, einschließlich Details zu Fokus und Kurzinfo beim Bewegen des Mauszeigers sowie zur Auswahl und zum Auslösen von regionClick- und select-Ereignissen durch Mausklick.

Der Standardwert ist im Regionsmodus "true" und im Markierungsmodus "false".

Typ: Boolesch
Standard:automatisch
forceIFrame

Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.)

Typ: Boolesch
Standard: false
geochartVersion

Die Version der GeoChart-Rahmendaten. Die Versionen 10 und 11 sind verfügbar.

Typ:Zahl
Standard: 10
height

Höhe der Visualisierung in Pixeln. Die Standardhöhe beträgt 347 Pixel, es sei denn, die Option width ist angegeben und keepAspectRatio ist auf „true“ gesetzt. In diesem Fall wird die Höhe entsprechend berechnet.

Typ:Zahl
Standard:automatisch
keepAspectRatio

Falls wahr, wird das Geodiagramm so groß, dass es in seinem natürlichen Seitenverhältnis in den Diagrammbereich passt. Wenn nur eine der Optionen width und height angegeben ist, wird die andere Option gemäß dem Seitenverhältnis berechnet.

Bei „false“ wird das Geodiagramm auf die genaue Größe des Diagramms gestreckt, wie in den Optionen width und height angegeben.

Typ: Boolesch
Standardeinstellung:true
Legende

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Legende oder „none“, wenn keine Legende angezeigt werden soll. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

 {textStyle: {color: 'blue', fontSize: 16}}
Typ:Objekt / 'keine'
Standard:null
legend.numberFormat

Ein Formatstring für numerische Labels. Dies ist eine Teilmenge des Mustersatzes der ICU . Beispielsweise gibt {numberFormat:'.##'} die Werte "10.66", "10.6" und "10.0" für die Werte 10.666, 10.6 und 10 an.

Typ: String
Standard:automatisch
legend.textStyle

Ein Objekt, das den Textstil der Legende angibt. Das Objekt hat folgendes Format:

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

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Typ:Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Region

Bereich, der im Geodiagramm angezeigt werden soll. (Umliegende Gebiete werden ebenfalls angezeigt.) Folgende Werte sind möglich:

  • "world": ein Geodiagramm der gesamten Welt.
  • Ein Kontinent oder ein Subkontinent, angegeben durch seinen 3-stelligen Code, z.B. "011" für Westafrika.
  • Ein Land, das durch seinen ISO 3166-1 alpha-2-Code angegeben wird, z.B. "AU" steht für Australien.
  • Ein Bundesstaat in den USA, der durch seinen ISO 3166-2:US-Code angegeben wird, z.B. „US-AL“ für Alabama. Die Option resolution muss entweder auf „provinz“ oder „metros“ festgelegt sein.
Typ: String
Standardeinstellung: „world“
magnifyingGlass

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Lupe. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

{enable: true, zoomFactor: 7.5}
Typ:Objekt
Standard: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

Falls wahr, wird eine Lupe geöffnet, wenn der Nutzer über einer unübersichtlichen Markierung weiterbewegt.

Hinweis: Diese Funktion wird in Browsern nicht unterstützt, die SVG nicht unterstützen, z.B. Internet Explorer Version 8 oder niedriger.

Typ: Boolesch
Standardeinstellung:true
magnifyingGlass.zoomFactor

Der Zoomfaktor der Lupe. Kann eine beliebige Zahl größer als 0 sein.

Typ:Zahl
Standard: 5,0
markerOpacity

Die Deckkraft der Markierungen, wobei 0,0 vollständig transparent und 1,0 vollständig deckend ist.

Typ:Zahl, 0,0–1,0
Standard: 1,0
regioncoderVersion

Die Version der Regioncoder-Daten. Die Versionen 0 und 1 sind verfügbar.

Typ:Zahl
Standard: 0
Auflösung

Die Auflösung der Rahmen des Geodiagramms. Wählen Sie einen der folgenden Werte aus:

  • "countries": Wird für alle Regionen mit Ausnahme von Regionen mit US-Bundesstaaten unterstützt.
  • "Provinzen": Wird nur für Länderregionen und US-Bundesstaatenregionen unterstützt. Nicht für alle Länder unterstützt. Teste ein Land, um zu sehen, ob diese Option unterstützt wird.
  • "metros": wird nur für die Länderregionen USA und US-Bundesstaaten unterstützt.
Typ: String
Standard: 'countries'
sizeAxis

Ein Objekt mit Mitgliedern, um zu konfigurieren, wie Werte der Blasengröße zugeordnet werden. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

 {minValue: 0,  maxSize: 20}
Typ:Objekt
Standard:null
sizeAxis.maxSize

Maximaler Radius der größtmöglichen Blase in Pixeln.

Typ:Zahl
Standard: 12
sizeAxis.maxValue

Der Größenwert (wie in den Diagrammdaten angezeigt), der sizeAxis.maxSize zugeordnet werden soll. Größere Werte werden auf diesen Wert zugeschnitten.

Typ:Zahl
Standard:Maximalwert der Spalte „Größe“ in Diagrammdaten
sizeAxis.minSize

Mindestradius der kleinstmöglichen Blase in Pixeln

Typ:Zahl
Standard: 3
sizeAxis.minValue

Der Größenwert (wie in den Diagrammdaten angezeigt), der sizeAxis.minSize zugeordnet werden soll. Kleinere Werte werden auf diesen Wert zugeschnitten.

Typ:Zahl
Standard:Mindestwert der Spalte „Größe“ in Diagrammdaten
Kurzinfo

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Typ:Objekt
Standard:null
tooltip.textStyle

Ein Objekt, das den Textstil für die Kurzinfo angibt. Das Objekt hat folgendes Format:

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

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Typ:Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:

  • „Fokus“: Die Kurzinfo wird angezeigt, wenn der Nutzer den Mauszeiger auf das Element bewegt.
  • "none": Die Kurzinfo wird nicht angezeigt.
  • „selection“: Die Kurzinfo wird angezeigt, wenn der Nutzer das Element auswählt.
Typ: String
Standard: „Fokus“
width

Breite der Visualisierung in Pixeln. Die Standardbreite beträgt 556 Pixel, es sei denn, die Option height ist angegeben und keepAspectRatio ist auf „true“ gesetzt. In diesem Fall wird die Breite entsprechend berechnet.

Typ:Zahl
Standard:automatisch

 

Kontinenthierarchie und -Codes

Sie können Geocharts für Kontinente/Subkontinente aufrufen, indem Sie für die Option region einen der folgenden dreistelligen Codes festlegen. Die Codes und die Hierarchie basieren mit einigen Ausnahmen auf jenen, die von der Statistikabteilung der Vereinten Nationen entwickelt und verwaltet werden.

Kontinent Subkontinent Länder
002: Afrika 015: Nordafrika DZ, EG, EH, LY, MA, SD, SS, TN
011: Westafrika BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR, MR, MR und MRSHSLSN
017: Naher Afrika AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014: Ostafrika BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, RERWRW, RERWRWSCSOTZUG
018: Südafrika BW, LS, NA, SZ, ZA
150 - Europa 154: Nordeuropa GG, JE, AX, DK, EE, FI, FO, GB, IE, LT IM, IS, IS, IS, LV
155 – Westeuropa AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151: Osteuropa BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039: Südeuropa AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MTMK, MT, MT, SIRSRSRS
019 – Nord-, Mittel- und Südamerika 021 – Nordamerika BM, CA, GL, PM, US
029: Karibik AG, AI, AN, AW, BB, BL, BS, CU, DM, DO, GD, {M22}GD, {M22}GP2}GPLCMS
013: Mittelamerika BZ, CR, GT, HN, MX, NI, PA, SV
005 - Südamerika AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, VE
142: Asien 143: Zentralasien TM, TJ, KG, KZ, UZ
030: Ostasien CN, HK, JP, KP, KR, MN, MO, TW
034: Südasien AF, BD, BT, IN, IR, LK, MV, NP, PK
035: Südostasien BN, ID, KH, LA, MM, BU, MEIN, PH, SG, TH, TL, TL, TL, TL, TL, TL, MEIN, PH, SG, TH VN
145 – Westasien AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB und LB LB
009: Ozeanien 053: Australien und Neuseeland AU, NF, Neuseeland
054: Melanesien FJ, NC, PG, SB, VU
057: Mikronesien FM, GU, KI, MH, MP, NR, PW
061: Polynesien AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Methoden

Methode
clearChart()

Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei.

Return Type: Kein
draw(data, options)

Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis ready ausgelöst wurde. Extended description.

Return Type: Kein
getImageURI()

Gibt das Diagramm serialisiert als Bild-URI zurück.

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Weitere Informationen finden Sie unter PNG-Diagramme drucken.

Rückgabetyp: String
getSelection()

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Entitäten sind Regionen mit einem zugewiesenen Wert. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Rückgabetyp:Array von Auswahlelementen
setSelection()

Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl. Auswählbare Entitäten sind Regionen mit einem zugewiesenen Wert. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Return Type: Kein

Ereignisse

Name
error

Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt.

Properties (Eigenschaften): id, message, message
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Der Aufruf muss erst erfolgen, nachdem das Ereignis ausgelöst wurde.

Properties:keine
regionClick

Wird aufgerufen, wenn auf eine Region geklickt wird. Dies wird nicht für das spezifische Land ausgegeben, das in der Option „Region“ zugewiesen ist (wenn ein bestimmtes Land aufgeführt ist).

Properties:Ein Objekt mit der einzelnen Property region, bei der es sich um einen String im ISO-3166-Format handelt, der die angeklickte Region beschreibt.
select

Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie getSelection() auf.

Properties:keine

Datenrichtlinie

Standorte werden von Google Maps geocodiert. Daten, die keine Geocodierung erfordern, werden an keinen Server gesendet. Weitere Informationen zu den Datenrichtlinien finden Sie in den Google Maps-Nutzungsbedingungen.