Übersicht
Ein Geodiagramm ist die Karte eines Landes, eines Kontinents oder einer Region mit drei Bereichen:
- Im Modus Region werden ganze Regionen farblich dargestellt, z. B. Länder, Provinzen oder Bundesstaaten/-länder.
- Im Modus Markierungen werden Kreise verwendet, um Regionen zu kennzeichnen, die gemäß dem von Ihnen angegebenen Wert skaliert werden.
- Im Modus Text werden die Regionen mit Kennungen gekennzeichnet, z.B. „Russland“ oder „Asien“).
Ein Geodiagramm wird mit SVG oder VML im Browser gerendert. Beachten Sie, dass das Geo-Diagramm nicht gescrollt oder ziehbar ist und es sich um eine Linienzeichnung und nicht um eine Geländekarte handelt. Wenn Sie eine solche Karte erstellen möchten, können Sie stattdessen eine Kartenvisualisierung verwenden.
GeoCharts für Regionen
Mit dem Stil regions werden ganze Regionen (in der Regel Länder) mit Farben gefüllt, 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>
GeoCharts für Markierungen
Mit dem Stil markers werden Kreise an den angegebenen Stellen im Geodiagramm mit der von Ihnen angegebenen Farbe und Größe gerendert.
Wenn Sie den Mauszeiger auf die unübersichtlichen Markierungen in Rom bewegen, wird eine Lupe geöffnet, um die Markierungen detaillierter zu sehen. Die Lupe wird in Internet Explorer 8 oder niedriger 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>
Proportionalmarkierungen anzeigen
Normalerweise zeigen Markierungs-Geodiagramme den kleinsten Markierungswert als minimalen Punkt an. Wenn Sie stattdessen proportionale Markierungswerte anzeigen lassen möchten, z. B. Prozentangaben, verwenden Sie die Option sizeAxis, um minValue und maxValue explizit festzulegen.
Hier ist z. B. eine Karte von Westeuropa mit Bevölkerungsgruppen und Gebieten für drei Länder: Deutschland, Frankreich und Polen. Die Werte sind alle absolute Zahlen (z.B. 65 Millionen für Frankreich), aber die Gebiete sind alle in Prozent angegeben: Die Frankreich-Markierung ist violett, weil sie Mitte ist, aber 50 von 100 möglichen Punkten, da sie 50% der Gesamtfläche umfasst.
In diesem Code verwenden wir sizeAxis, um Markierungsgrößen im Bereich von 0 bis 100 anzugeben. Wir verwenden auch einen colorAxis-Wert mit RGB-Werten, um die Populationen in einem Farbbereich von Orange zu Blau anzuzeigen. Dieser Farbspektrum eignet sich gut für Nutzer mit Sehschwächen. Schließlich geben wir Westeuropa mit einem region von 155 an, gemäß dem Abschnitt „Inhaltshierarchie und Codes“ weiter unten in diesem Dokument.
<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>
GeoCharts für Text
Mit displayMode:
text können Sie Textlabels über einem 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 einfärben
Es gibt mehrere Möglichkeiten, die Farben von GeoCharts anzupassen:
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 gibt den Farbbereich für Ihre Datenwerte an. Im Array colorAxis ist das erste Element die Farbe, die dem kleinsten Wert im Dataset zugewiesen wurde. Das letzte Element ist die Farbe, die dem größten Wert im Dataset zugewiesen wurde. Wenn Sie mehr als zwei Farben angeben, wird zwischen ihnen interpoliert.
Im folgenden Diagramm verwenden wir alle vier Optionen. Mit colorAxis wird Afrika mit den Farben der panafrikanischen Flagge angezeigt, wobei die Breitengrade der Länder verwendet werden: von Rot im Norden über Schwarz bis Grün im Süden. Die Option backgroundColor wird verwendet, um den Hintergrund in Blau zu färben, datalessRegionColor für die Länder außerhalb Afrikas in Hellrosa und 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 von google.charts.load lautet "geochart".
Der mapsApiKey sollte nicht kopiert werden, da dies nicht funktioniert. Sofern Ihr Diagramm keine Geocodierung erfordert oder nicht standardgemäße Codes zur Identifizierung von Standorten verwendet, benötigen Sie keinen mapsApiKey. 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 Visualisierungsklasse für Geo-Diagramme lautet google.visualization.GeoChart.
var visualization = new google.visualization.GeoChart(container);
Datenformat
Das Format der DataTable hängt davon ab, welchen Anzeigemodus Sie verwenden: regions, markers oder text.
Format des Regionsmodus
Der Standort wird in eine Spalte und eine optionale Spalte eingegeben, wie hier beschrieben:
-
Regionsstandort [String, erforderlich]: Eine Region, die markiert werden soll.
Alle der folgenden Formate werden akzeptiert. Sie können in verschiedenen Zeilen unterschiedliche Formate verwenden:
- Ländername als String (z. B. „England“) oder ein ISO-3166-1-Alpha-2-Großcode oder die Entsprechung in englischer Sprache (z. B. „GB“ oder „Vereinigtes Königreich“).
- Ein großgeschriebener Regionscode für ISO-3166-2 oder der entsprechende englischsprachige Text (z. B. „US-NJ“ oder „New Jersey“).
- Metropolitan Area Code. Dies sind dreistellige Großraumcodes, die verwendet werden können, um verschiedene Regionen zu kennzeichnen; US-Codes werden nur unterstützt. Beachten Sie, dass diese Telefonnummer nicht mit der Vorwahl identisch ist.
- Jeder Wert, der von der Property
regionunterstützt wird.
-
Regionsfarbe [Number, Optional]: Eine optionale numerische Spalte, die dieser Region basierend auf der in der Property
colorAxis.colorsangegebenen Skala eine Farbe zuweist. Wenn diese Spalte nicht vorhanden ist, haben alle Regionen die gleiche Farbe. Wenn die Spalte vorhanden ist, sind keine Nullwerte zulässig. Die Werte werden relativ zu den Werten vonsizeAxis.minValue/sizeAxis.maxValueoder den Werten, die in der PropertycolorAxis.valuesangegeben sind, skaliert, sofern angegeben.
Format des Markierungsmodus
Die Anzahl der Spalten variiert je nach verwendetem Markierungsformat sowie anderen optionalen Spalten.
-
Markierungsposition [erforderlich]
ODER
Die erste Spalte ist eine bestimmte Stringadresse (z. B. „Hauptstraße 1600“).Die ersten beiden Spalten sind numerisch, wobei die erste Spalte den Breitengrad und die zweite Spalte den Längengrad enthält.
Hinweis: Wir empfehlen zwar die Verwendung von ISO 3166-Codes für den Regionsmodus, der Modus „Markierungen“ funktioniert jedoch am besten mit längeren Namen für Regionen wie Deutschland, Panama usw. Das liegt daran, dass Geocharts im Modus „Markierungen“ Google Maps zum Geocoding der Standorte verwenden und einen Stringstandort in einen Breiten- und Längengrad umwandeln. Das kann dazu führen, dass Standorte nicht mehr wie erwartet korrekt geocodiert werden, z. B. „DE“ für Deutschland oder Delaware oder „PA“ für Panama oder Pennsylvania.
-
Markierungsfarbe [Number, Optional] Die nächste Spalte ist eine optionale numerische Spalte, die dieser Markierung basierend auf der in der Eigenschaft
colorAxis.colorsangegebenen Skala eine Farbe zuweist. Wenn diese Spalte nicht vorhanden ist, haben alle Markierungen dieselbe Farbe. Wenn die Spalte vorhanden ist, sind keine Nullwerte zulässig. Die Werte werden relativ zueinander oder auf die im AttributcolorAxis.valuesangegebenen Werte skaliert. - Markierungsgröße [Zahl, optional] eine optionale numerische Spalte, die verwendet wird, um die Größe der Markierung relativ zu den anderen Größen anzugeben. Wenn diese Spalte nicht vorhanden ist, wird der Wert der vorherigen Spalte verwendet (oder die Standardgröße, wenn auch keine Farbspalte angegeben wurde). Wenn die Spalte vorhanden ist, sind keine Nullwerte zulässig.
Format des Textmodus
Das Label wird in die erste Spalte und eine optionale Spalte eingegeben:
- Textlabel [String, Erforderlich] Eine bestimmte Stringadresse (z. B. „1600 Pennsylvania Ave.“)
- Textgröße [Zahl, optional] Die zweite Spalte ist eine optionale numerische Spalte, die zum Zuweisen der Größe des Labels verwendet wird. Wenn diese Spalte nicht vorhanden ist, haben alle Labels dieselbe Größe.
Konfigurationsoptionen
| Name | |
|---|---|
| backgroundColor |
Die Hintergrundfarbe für den Hauptbereich des Diagramms. Kann ein einfacher HTML-Farbstring sein, z. B. Typ:String oder Objekt
Standard: Weiß
|
| backgroundColor.fill |
Die Füllfarbe des Diagramms als HTML-Farbstring. Typ: String
Standard: Weiß
|
| backgroundColor.Strike |
Die Farbe des Diagrammrahmens als HTML-Farbstring. Typ: String
Standard: „#666“
|
| backgroundColor.strichBreite |
Die Rahmenbreite in Pixeln. Typ: Zahl
Standard: 0
|
| colorAxis |
Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder einer Farbverlaufsskala angibt. Um Eigenschaften dieses Objekts anzugeben, können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Type: Objekt
Standard: null
|
| colorAxis.minWert |
Falls vorhanden, wird ein Mindestwert für Diagrammfarbdaten angegeben. Farbdatenwerte dieses Werts und darunter werden als erste Farbe im Bereich Typ: Zahl
Standard:Mindestwert der Farbspalte in Diagrammdaten
|
| colorAxis.maxValue-Wert |
Falls vorhanden, wird ein Maximalwert für Diagrammfarbdaten angegeben. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich Typ:Zahl
Standard:Maximalwert der Farbspalte in Diagrammdaten
|
| colorAxis.values |
Steuert, wie vorhanden, wie Werte mit Farben verknüpft werden. Jeder Wert wird der entsprechenden Farbe im Array Typ:Zahlenarray
Standard: null
|
| colorAxis.colors |
Farben, die den Werten in der Visualisierung zugewiesen werden Ein String-Array, bei dem jedes Element ein HTML-Farbstring ist, zum Beispiel Typ: Array mit Farbstrings
Standard: null
|
| datenloseRegion/Farbe |
Farbe für Regionen ohne zugehörige Daten. Typ: String
Standard: '#F5F5F5'
|
| Standardfarbe |
Die Farbe, die bei Datenpunkten in einem Geodiagramm verwendet werden soll, wenn der Standort (z.B. Typ: String
Standard: '#267114'
|
| Anzeigemodus |
Dies ist die Art des Geodiagramms. Das DataTable-Format muss dem angegebenen Wert entsprechen. Die folgenden Werte werden unterstützt:
Typ: String
Standard: „auto“
|
| Domain |
Das Geodiagramm wird so angezeigt, als ob es aus dieser Region bereitgestellt würde. Wenn Sie beispielsweise Typ: String
Standard: null
|
| „regionRegion“-Aktivität aktivieren |
Falls wahr, aktivieren Sie die Interaktivität der Region, einschließlich Fokussierung und Kurzinfo für Mauszeiger, sowie Auswahl und Auslösung von Die Standardeinstellung ist „true“ im Regionsmodus und „false“ im Markierungsmodus. Typ: Boolesch
Standard: automatisch
|
| forceIFrame |
Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im 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 Pixel. Die Standardhöhe beträgt 347 Pixel, es sei denn, die Option Typ: Zahl
Standard: automatisch
|
| keepAspectRatio |
Wenn der Wert „true“ ist, wird das Geodiagramm mit der größten Größe gezeichnet, die in das natürliche Seitenverhältnis des Diagrammbereichs passt. Wenn nur eine der Optionen
Bei „false“ wird das Geodiagramm auf die genaue Größe des Diagramms gestreckt, wie durch die Optionen Typ: Boolesch
Standard: true
|
| Legende |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Legende oder „Keine“, wenn keine Legende angezeigt werden soll. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {textStyle: {color: 'blue', fontSize: 16}}
Typ: Objekt/„Keine“
Standard: null
|
| Legende.ZahlFormat |
Ein Formatstring für numerische Labels. Dies ist eine Teilmenge des ICU-Mustersatzes.
Für Typ: String
Standard: automatisch
|
| Legende.textStyle |
Ein Objekt, das den Legendentextstil angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Region |
Bereich, der im Geodiagramm angezeigt werden soll Die umliegenden Bereiche werden ebenfalls angezeigt. Folgende Typen sind möglich:
Typ: String
Standard: „world“
|
| Lupe |
Ein Objekt mit Mitgliedern zur Konfiguration verschiedener Aspekte der Lupe. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {enable: true, zoomFactor: 7.5}
Typ: Objekt
Standard:
{enable: true, zoomFactor: 5.0} |
| zoomGlass.aktivieren |
Wenn der Wert „true“ ist und der Nutzer über einer unübersichtlichen Markierung bleibt, wird eine Lupe geöffnet. Hinweis: Diese Funktion wird in Browsern nicht unterstützt, die SVG, also Internet Explorer Version 8 oder niedriger, nicht unterstützen. Typ: Boolesch
Standard: true
|
| zoomGlass.zoomFaktor |
Der Zoomfaktor der Lupe. Kann eine beliebige Zahl größer 0 sein. Typ:Zahl
Standard: 5,0
|
| MarkierungOpacity |
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
|
| RegionscoderVersion |
Die Version der Regionscoder-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: 'Länder'
|
| sizeAxis |
Ein Objekt mit Mitgliedern, mit dem konfiguriert wird, wie Werte mit der Größe von Blasen verknüpft werden. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {minValue: 0, maxSize: 20}
Type: Objekt
Standard: null
|
| "sizeAxis.maxSize" |
Maximaler Radius der größten möglichen Blase in Pixeln. Typ:Zahl
Standard: 12
|
| "sizeAxis.maxValue" |
Der Größenwert (wie in den Diagrammdaten angezeigt), der Typ:Zahl
Standard: Höchstwert der Größenspalte in Diagrammdaten
|
| sizeAxis.minSize |
Der minimale Radius der kleinstmöglichen Blase, in Pixel. 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. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type: Objekt
Standard: null
|
| tooltip.textStyle |
Ein Objekt, das den Textstil der Kurzinfo angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.Trigger |
Die Nutzerinteraktion, die dazu führt, dass die Kurzinfo angezeigt wird:
Typ: String
Standardeinstellung: „focus“
|
| width |
Breite der Visualisierung in Pixel Die Standardbreite beträgt 556 Pixel, es sei denn, die Option Typ:Zahl
Standard: automatisch
|
Kontinuierliche Hierarchie und Codes
Sie können Geodiagramme von Kontinenten/Subkontinenten anzeigen lassen, indem Sie für die Option region einen der folgenden dreistelligen Codes festlegen. Die Codes und die Hierarchie basieren mit einigen Ausnahmen auf denen, die von der Statistikabteilung der Vereinten Nationen entwickelt und gepflegt 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 | |
017 – Mittelafrika |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014: Ostafrika |
BI, DJ, ER, ET, KE, KM, MG, MU, MW, M{ | |
018: Südafrika |
BW, LS, NA, SZ, ZA | |
150 – Europa |
154: Nordeuropa |
GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, |
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, MT, 3 | |
019 – Nord-, Mittel- und Südamerika |
021 – Nordamerika |
BM, CA, GL, PM, US |
029: Karibik |
und nicht schließbarer und langer | |
013 – Mittelamerika |
BZ, CR, GT, HN, MX, NI, PA, SV | |
005: Südamerika |
AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY | |
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, MY, PH, SG, TH, TL, | |
145: Westasien |
AE, AM, AZ, BH, CY, GE, IL, IQ, JO, } | |
009: Ozeanien |
053: Australien und Neuseeland |
AU, NF, NZ |
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 zugehörigen Ressourcen frei. Rückgabetyp: Keine
|
draw(data, options) |
Zeichnet das Diagramm. Im Diagramm sind weitere Methodenaufrufe erst möglich, nachdem das Ereignis Rückgabetyp: Keine
|
getImageURI() |
Gibt das serialisierte Diagramm als Bild-URI zurück. Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. 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() |
Die angegebenen Diagrammentitäten werden ausgewählt. Die vorherige Auswahl wird abgebrochen.
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: Keine
|
Ereignisse
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt Eigenschaften: ID, Nachricht
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Eigenschaften: Keine
|
regionClick |
Wird aufgerufen, wenn auf eine Region geklickt wird. Dies wird nicht für das in der Option „Region“ zugewiesene Land ausgelöst, wenn ein bestimmtes Land aufgeführt ist.
Attribute:Ein Objekt mit einer einzelnen Eigenschaft (
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 ein visuelles Element klickt. Rufen Sie Eigenschaften: Keine
|
Datenrichtlinie
Standorte werden von Google Maps geocodiert. Daten, die keine Geocodierung erfordern, werden an keinen Server gesendet. Weitere Informationen finden Sie in den Google Maps-Nutzungsbedingungen.