Auf dieser Seite wird beschrieben, wie du verschiedene Zusatzinformationen, Blasen, Stecknadeln und andere Grafiken erstellst, die über die URL angefordert oder als Markierungen über anderen Diagrammen hinzugefügt werden können.
Inhaltsverzeichnis
Einführung
Mit der Chart API können Sie eine Vielzahl interessanter Zusatzinformationen, Stecknadeln oder Infofelder erstellen, die Text und Bilder miteinander kombinieren. Diese Elemente werden als dynamische Symbole bezeichnet.
Sie können entweder ein frei stehendes dynamisches Symbolbild erstellen oder mit dem Parameter chem
ein dynamisches Symbol als Markierungstyp über dem Diagramm positionieren. Auf dieser Seite wird beschrieben, wie dynamische Symbole als frei stehende Bilder oder als Markierungen in einem anderen Diagramm erstellt werden. Auf der Referenzseite für Infografiken Dynamische Symbole werden alle verfügbaren Typen dynamischer Markierungstypen beschrieben.
Die Syntax zum Erstellen eines dynamischen Symbols hängt davon ab, ob Sie ein frei stehendes Symbol oder als dynamische Markierung in einem anderen Diagramm verwenden möchten.
Frei stehende Symbole
Sie können ein dynamisches Symbolbild auf die gleiche Weise anfordern wie alle anderen Diagramme. Ein frei stehendes dynamisches Symbol unterstützt einen anderen Satz von Parametern als andere Diagramme:
Parameter | Erforderlich oder optional | Beschreibung |
---|---|---|
chst=<icon_string_constant> |
Erforderlich | Beschreibt, welche Art von Symbol erstellt werden soll.
|
chld=<icon_data> |
Erforderlich | Die spezifischen Daten, die verwendet werden, um Größe, Rotation, Text und andere erforderliche Daten des Symbols zu beschreiben.
|
cht |
NICHT VERWENDET | In Diagrammen mit frei stehenden dynamischen Symbolen wird der Parameter cht nicht verwendet. |
chs |
NICHT VERWENDET | In Diagrammen mit frei stehenden dynamischen Symbolen wird der Parameter chs nicht verwendet. |
chd |
NICHT VERWENDET | Verwenden Sie den Parameter chld , um Daten an ein frei stehendes dynamisches Symbol zu übergeben. |
Beispiel
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Dynamische Markierungen
Mit dem Parameter chem
können Sie ein dynamisches Symbol als Markierungstyp in verschiedene Arten von Diagrammen einbetten. Weitere Informationen finden Sie in der chem
-Dokumentation.
Beispiel
https://chart.googleapis.com/chart?
chs=300x140
cht=lc&chco=FF9900,224499
chd=t:75,74,66,30,10,5,3,1
chls=1|1
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0
chm=v,ccccFF,0,::.2,2
Allgemeine Symbolfunktionen
Den meisten Symbolen können Textzeichenfolgen oder Schatten zugeordnet sein.
Textstrings
Der gesamte an die Chart API übergebene Anzeigetext muss UTF-8- und dann URL-codiert sein.
Dies betrifft nur nicht URL-sichere Zeichen. URL-sichere Zeichen bestehen meist aus den englischen Buchstaben a–z und Groß- und Kleinschreibung sowie kleinen Satzzeichen. Der UTF-8- und URL-codierte Wert für den Buchstaben „è“ ist „%C3%A8
“ und für das chinesische Zeichen „駅“ ist „%E9%A7%85
“. Bei den meisten Browsern können Sie im URL-String einen nicht codierten Wert verwenden (z. B. 駅) und im Hintergrund für Sie codieren.
Es ist jedoch möglich, dass jemand, der die Diagramm-URL aufruft, einen Browser verwendet, der dies nicht unterstützt. Daher empfiehlt es sich, alle Nicht-ASCII-Zeichen in Textstrings in UTF-8 und URL zu codieren. Dies gilt nur für Text, der in Sprechblasen oder Stecknadeln angezeigt wird, nicht für &, | oder andere Zeichen, die Teil der URL-Syntax sind.
Wenn Sie dynamische Symbolmarkierungen mit dem Parameter chem
angeben, müssen Sie bestimmte Zeichen in Ihrem Text mit Escapezeichen versehen, wie in der Dokumentation zu chem
beschrieben.
Schatten
Sie können vielen Symbolen Schatten hinzufügen oder bei einigen Symbolen sogar ohne das Symbol selbst Schatten zeichnen.
Verdeckte Symbole
Viele dieser Symbole können mit oder ohne Schatten gezeichnet werden. Wenn Shadowing eine Option ist, hat der Name des Symbols eine Version, die auf _withshadow
endet, und eine andere Version ohne diese Endung. Du kannst ein Symbol mit einer der beiden Endungen angeben, je nachdem, ob du einen Schatten haben möchtest oder nicht.
Hier siehst du ein Beispiel für eine mittelgroße Sprechblase und eine Stecknadel mit und ohne Schatten:
chst=d_bubble_icon_text_big |
chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon |
chst=d_map_pin_icon_withshadow |
Frei stehende Schatten
Bei einigen Symboltypen können Sie ihren Schatten allein zeichnen. Dies ist beispielsweise sinnvoll, wenn Sie mehrere überlappende schattierte Symbole in einer Grafik verwenden und diese so nah beieinander sind, dass der Schatten von einem Symbol auf ein anderes Symbol fällt. Hier sehen Sie zum Beispiel zwei schattierte Blasen, zuerst Robert und dann Alice:
Beachten Sie, wie der Schatten von Alice Robert teilweise verdeckt. Um dieses Problem zu beheben, können Sie zuerst den Schatten von Alice, dann die Blase Robert und dann Alice ohne Schatten zeichnen. In Bezug auf Beleuchtung und Schatten ist diese Funktion vielleicht nicht völlig realistisch, aber es vermeidet es, eine Blase im Schatten einer anderen zu verdecken:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
Alle Markierungen geben die gleiche Z-Reihenfolge von 1 (py=1
) an, sodass sie in der angegebenen Reihenfolge über den Diagrammelementen (Diagrammlinie) gezeichnet werden. Zuerst wird der Schatten von Alice gezeichnet, dann die Blase Robert darüber und schließlich die Blase Alice darüber liegt.
In der Dokumentation zu Ihrem spezifischen Symboltyp erfahren Sie, ob Sie den Schatten allein zeichnen können.
Kontextbezogene Symbole
Sie können ein Symbol angeben, dessen Farbe, Größe oder Stapelung je nach zugewiesenem Punkt variieren. Diese Symboltypen sind nur als dynamische Symbolmarkierungen (chem
-Parameter) und nicht als frei stehende Symbole verfügbar.
Diese Symbole können in einer anderen Reihe als der Reihe gerendert werden, in der ihre Farbe, Größe oder Stapelinformationen angegeben sind. Das bedeutet, dass der ds
-Wert des chem
-Parameters die Datenreihe angibt, in der das Symbol gerendert werden soll. Die Werte zur Bestimmung der Größe oder Farbe des Symbols sind jedoch in den unten aufgeführten Parametern angegeben. Eine gute Verwendung besteht darin, eine versteckte Datenreihe für Symboldaten zu verwenden, aber die Symbole auf einer sichtbaren Linie oder einem sichtbaren Balken zu rendern. Hier sind einige Beispiele:
Symbol in Quellserie gerendert | Symbol in Nicht-Quell-Serie gerendert | Symbol mit ausgeblendeter Reihe |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
Arten von Kontextmarkierungen
Art des Filzstifts | chem s Wert |
Beispiel |
---|---|---|
Farbvariationen | s=cm_color |
|
Größenvariationen | s=cm_size |
|
Farb- und Größenvarianten | s=cm_color_size |
|
Variante stapeln | s=cm_repeat |
|
Stapeln und Farbvariationen | s=cm_repeat_color |
Ausrichtungsstrings für kontextbezogene Symbole
Die kontextbezogenen Symbole unterstützen eine optionale Ausrichtungszeichenfolge, um eine Ausrichtung und einen Versatz des Symbols zum Datenpunkt anzugeben. Dieser String hat die folgende Syntax:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- Zwei Buchstaben, die die Ausrichtung des Symbols an einem Punkt beschreiben. Beispiele hierfür sind
tl
(oben links) undrb
(unten rechts). Eine vollständige Auflistung und Beschreibung finden Sie in der Beschreibung des Parameters alignment_string des Parameterschem
. - h_anchor_offset
- [Optional] Der horizontale Abstand des Ankerpunkts in Pixeln. Vor Werten einschließlich Null muss entweder „+“ oder „-“ vorangestellt werden. Wichtig:Sie müssen + als %2B URL-codieren.
- v_anchor_offset
- [Optional] Der vertikale Abstand des Ankerpunkts in Pixeln. Vor Werten einschließlich Null muss entweder „+“ oder „-“ vorangestellt werden. Wichtig:Sie müssen + als %2B URL-codieren.
Sie können auch die Komponente of
des Parameters chem
verwenden, um horizontale und vertikale Versätze anzugeben. Wenn Sie sowohl die Komponente of
als auch die Werte h_anchor_offset v_anchor_offset
angeben, werden alle Offsets auf Ihr Symbol angewendet.
Beispiele:
hb-0-0 Horizontal zentriert unten Keine Versätze |
lb-0-0 Links unten Keine Offsets |
rb-0-0 Rechts unten Keine Offsets |
ht-0-0 Horizontal oben Keine Offsets |
hb-20-0 Horizontal zentriert unten -20 horizontal 0 vertikal |
hb%2b20-0 Horizontal zentriert unten +20 horizontal 0 vertikal |
hb-0%2b10 Horizontal zentriert unten 0 horizontal +10 vertikal |
hb-0-20 Horizontal zentriert unten 0 horizontal -20 vertikal |
Farbvariation (cm_color
)
Sie können die Farbe einer kontextbezogenen Diagrammmarkierung je nach dem von ihr dargestellten Punkt variieren. Sie müssen einen Farbbereich angeben. Der Datenwert wird dann auf eine entsprechende Farbe innerhalb dieses Bereichs skaliert.
Syntax
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shape>
- Das zu verwendende Symbol Geben Sie einen ID-String an, der eines der am Ende der Seite aufgeführten Bilder identifiziert.
- <color_data_series>
- Der nullbasierte Index der Datenreihen, mit dem die Farbe der Symbole variiert wird.
- <low_color>
- Der niedrige Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Sie wird dem niedrigsten möglichen Wert im verfügbaren Datenbereich zugeordnet.
- <middle_color>
- Der mittlere Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Dies entspricht dem mittleren Wert im verfügbaren Datenbereich.
- <high_color>
- Der hohe Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Dies wird dem höchstmöglichen Wert im verfügbaren Datenbereich zugeordnet.
- <icon_size>
- Die Größe des Symbols in Pixeln. Die folgenden Werte werden unterstützt: 12, 16, 24.
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <alignment>
- Ein optionaler String, der die Ausrichtung und den Versatz des Symbols beschreibt.
Beispiel
|
chem=y;s=cm_color; |
Größenvariation (cm_size
)
Sie können die Größe einer kontextabhängigen Diagrammmarkierung allein entsprechend der von Ihnen gewünschten Datenreihe ändern.
Syntax
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>.
- Die Form des Symbols. Wählen Sie einen der folgenden Werte aus:
maps_pin
,disk
odersquare
. - <size_data_series>
- Der nullbasierte Index der Datenreihen, mit dem die Größe der Symbole variiert wird.
- <zero_value_size>
- Die Basisgröße des Symbols beim Minimalwert der Daten für die Reihe.
- <size_multiplier>
- Ein Faktor für die Größenskalierung. Dieser Wert wird mit der Differenz zwischen den Datenwerten der einzelnen Symbole und dem Mindestreihenwert multipliziert, um die endgültige Symbolgröße zu berechnen. Daher wird ein Symbol beim Datenwert 0 von diesem Multiplikator nicht beeinflusst.
- <min_size>
- Die Mindestgröße eines Symbols in Pixeln.
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <fill_color>
- Die Füllfarbe für das Symbol als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <alignment>
- Ein optionaler String, der die Ausrichtung und den Versatz des Symbols beschreibt.
Beispiele
Ein einfaches Beispiel. Das Symbol mit dem Wert 0 wird mit einem Wert von 30 Pixeln gerendert. Die Größe nimmt mit den Daten zu. | chd=t:0,10,20,30,40,50,60,70 |
In diesem Beispiel übernehmen die Symbole ihre Größendaten von der gelben Linie, werden aber auf der blauen Linie gerendert.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Farb- und Größenvariation (cm_color_size
)
Sie können je nach Datenreihe Ihrer Wahl sowohl die Farbe als auch die Größe einer kontextbezogenen Diagrammmarkierung ändern.
Syntax
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>.
- Die Form des Symbols. Wählen Sie einen der folgenden Werte aus:
maps_pin
,disk
odersquare
. - <color_data_series>
- Der nullbasierte Index der Datenreihen, mit dem die Farbe der Symbole variiert wird.
- <low_color>
- Der niedrige Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Sie wird dem niedrigsten möglichen Wert im verfügbaren Datenbereich zugeordnet.
- <middle_color>
- Der mittlere Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Dies entspricht dem mittleren Wert im verfügbaren Datenbereich.
- <high_color>
- Der hohe Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Dies wird dem höchstmöglichen Wert im verfügbaren Datenbereich zugeordnet.
- <size_data_series>
- Der nullbasierte Index der Datenreihen, mit dem die Größe der Symbole variiert wird.
- <zero_value_size>
- Die Basisgröße des Symbols beim Minimalwert der Daten für die Reihe.
- <size_multiplier>
- Ein Faktor für die Größenskalierung. Dieser Wert wird mit der Differenz zwischen den Datenwerten der einzelnen Symbole und dem Mindestreihenwert multipliziert, um die endgültige Symbolgröße zu berechnen. Daher wird ein Symbol beim Datenwert 0 von diesem Multiplikator nicht beeinflusst.
- <min_size>
- Die Mindestgröße eines Symbols in Pixeln.
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <alignment>
- Ein optionaler String, der die Ausrichtung und den Versatz des Symbols beschreibt.
Beispiele
In diesem Beispiel werden zwei Zeilen verwendet. Die Pins verwenden Farbdaten aus der Reihe, in der sie gerendert werden, aber Größendaten aus der anderen Reihe.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
Variante stapeln (cm_repeat
)
Sie können die Höhe eines Symbolstapels je nach Datenwert an einem bestimmten Punkt variieren.
Syntax
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- Das zu verwendende Symbol Geben Sie einen ID-String an, der eines der am Ende der Seite aufgeführten Bilder identifiziert.
- <repeat_series_index>.
- Der nullbasierte Index der Datenreihe, der berechnet wird, wie viele Symbole an diesem Punkt platziert werden sollen.
- <scaling_factor>
- Der Wert der Quelldatenreihe wird auf einen Wert von 0 bis 1 skaliert und mit diesem Wert multipliziert, um zu bestimmen, wie viele Markierungen an diesem Punkt platziert werden sollen. Teilwerte werden abgeschnitten.
- <stacking_direction>
- Stapelrichtung: entweder „h“ (kleingeschrieben) für horizontal oder „V“ (Großbuchstaben) für vertikal.
- <icon_size>
- Die Größe jeder Markierung in Pixeln. Die folgenden Werte werden unterstützt: 12, 16, 24.
- <fill_color>
- Die Füllfarbe für das Symbol als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <spacing>
- Der Abstand zwischen den einzelnen Markierungen in einem Stapel (in Pixeln)
- <alignment>
- Ein optionaler String, der die Ausrichtung und den Versatz des Symbols beschreibt.
Beispiel
In diesem Beispiel wird eine zweite Dummy-Datenreihe verwendet. Sie wird nicht im Diagramm gerendert, sondern dazu verwendet, alle Stapel gleichmäßig zu verteilen, beginnend am unteren Rand des Diagramms.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Stapeln und Farbvariationen (cm_repeat_color
)
Sie können sowohl die Höhe als auch die Farbe eines Symbolstapels je nach Datenwert an einem bestimmten Punkt variieren.
Syntax
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- Das zu verwendende Symbol Geben Sie einen ID-String an, der eines der am Ende der Seite aufgeführten Bilder identifiziert.
- <repeat_series_index>.
- Der nullbasierte Index der Datenreihe, der berechnet wird, wie viele Symbole an diesem Punkt platziert werden sollen.
- <scaling_factor>
- Der Wert der Quelldatenreihe wird auf einen Wert von 0 bis 1 skaliert und mit diesem Wert multipliziert, um zu bestimmen, wie viele Markierungen an diesem Punkt platziert werden sollen. Teilwerte werden abgeschnitten.
- <stacking_direction>
- Stapelrichtung: entweder „h“ (kleingeschrieben) für horizontal oder „V“ (Großbuchstaben) für vertikal.
- <icon_size>
- Die Größe jeder Markierung in Pixeln. Die folgenden Werte werden unterstützt: 12, 16, 24.
- <color_data_series>
- Der nullbasierte Index der Datenreihen, mit dem die Farbe der Symbole variiert wird.
- <low_color>
- Der niedrige Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Sie wird dem niedrigsten möglichen Wert im verfügbaren Datenbereich zugeordnet.
- <middle_color>
- Der mittlere Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Dies entspricht dem mittleren Wert im verfügbaren Datenbereich.
- <high_color>
- Der hohe Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen). Dies wird dem höchstmöglichen Wert im verfügbaren Datenbereich zugeordnet.
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (ohne #-Zeichen).
- <spacing>
- Der Abstand zwischen den einzelnen Markierungen in einem Stapel (in Pixeln)
- <alignment>
- Ein optionaler String, der die Ausrichtung und den Versatz des Symbols beschreibt.
Beispiel
|
chem= |