Ü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.
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>
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 entwedernulloder 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.
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>
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:
-
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
regionunterstützt wird.
-
Farbe der Region [Zahl, optional] – Eine optionale numerische Spalte, mit der dieser Region basierend auf der in der Eigenschaft
colorAxis.colorsangegebenen 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 densizeAxis.minValue/sizeAxis.maxValue-Werten oder zu den Werten skaliert, die in der EigenschaftcolorAxis.valuesangegeben sind, sofern angegeben.
Format des Markierungsmodus
Die Anzahl der Spalten variiert je nach verwendetem Markierungsformat und anderen optionalen Spalten.
-
Position der Markierung [erforderlich]
ODER
Die erste Spalte enthält die Adresse in einem bestimmten String, z. B. „Hauptstraße 16“.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.colorsangegebenen 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 AttributcolorAxis.valuesangegeben 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 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 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 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 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: 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. Typ: String
Standard: #267114
|
| displayMode |
Die Art des Geodiagramms. Das Datentabellenformat muss dem angegebenen Wert entsprechen. Die folgenden Werte werden unterstützt:
Typ: String
Standardeinstellung: „auto“
|
| Domain |
Geodiagramm so anzeigen, als würde es aus dieser Region bereitgestellt werden. Wenn Sie beispielsweise 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 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 Typ:Zahl
Standard: 10
|
| height |
Höhe der Visualisierung in Pixeln. Die Standardhöhe beträgt 347 Pixel, es sei denn, die Option 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
Bei „false“ wird das Geodiagramm auf die genaue Größe des Diagramms gestreckt, wie in den Optionen 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 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> }
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:
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 Typ:Zahl
Standard: 0
|
| Auflösung |
Die Auflösung der Rahmen des Geodiagramms. Wählen Sie einen der folgenden Werte aus:
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 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 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> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:
Typ: String
Standard: „Fokus“
|
| width |
Breite der Visualisierung in Pixeln. Die Standardbreite beträgt 556 Pixel, es sei denn, die Option 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 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.
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.
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 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 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.