Auf dieser Seite wird beschrieben, wie Sie verschiedene Callouts, Bubbles, Markierungen und andere Grafiken erstellen, 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, Markierungen oder Blasen erstellen, die Text und Bilder enthalten. Diese Elemente werden als dynamische Symbole bezeichnet.
Sie können entweder ein frei stehendes dynamisches Symbolbild erstellen oder mithilfe des chem
-Parameters ein dynamisches Symbol als Markierungstyp über dem Diagramm positionieren. Auf dieser Seite wird beschrieben, wie Sie dynamische Symbole als frei stehende Bilder oder als Markierungen in einem anderen Diagramm erstellen. Auf der Referenzseite Dynamische Symbole in der Infografik werden alle verfügbaren Typen dynamischer Markierungen 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
Ein dynamisches Symbolbild lässt sich auf die gleiche Weise anfordern wie bei anderen Diagrammen. Ein frei stehendes dynamisches Symbol unterstützt andere Parameter 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 die Größe, Drehung, Text und andere erforderliche Daten des Symbols zu beschreiben.
|
cht |
NICHT VERWENDET | In frei stehenden Diagrammen mit dynamischen Symbolen wird der Parameter cht nicht verwendet. |
chs |
NICHT VERWENDET | In frei stehenden Diagrammen mit dynamischen Symbolen wird der Parameter chs nicht verwendet. |
chd |
NICHT VERWENDET | Mit dem Parameter chld können Sie Daten an ein frei stehendes dynamisches Symbol ü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 Dokumentation zu chem
.
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
Häufig verwendete Symbolfunktionen
Den meisten Symbolen können Textzeichenfolgen oder Schatten zugeordnet werden.
Textstrings
Der gesamte Anzeigetext, der an die Chart API übergeben wird, muss UTF-8- und dann URL-codiert sein.
Dies betrifft nur nicht URL-sichere Zeichen. URL-sichere Zeichen bestehen zumeist aus den englischen Buchstaben a–z in Groß- und Kleinschreibung sowie aus wenigen Satzzeichen. Der UTF-8- und URL-codierte Wert für den Buchstaben „è“ ist beispielsweise „%C3%A8
“ und das chinesische Zeichen 駅 auf „%E9%A7%85
“. In den meisten Browsern können Sie im URL-String einen nicht codierten Wert verwenden (z. B. 駅) und codieren ihn im Hintergrund.
Es ist jedoch möglich, dass jemand, der Ihre Diagramm-URL aufruft, einen Browser verwendet, der dies nicht kann. Daher ist es in der Regel am besten, alle Nicht-ASCII-Zeichen in Textzeichenfolgen mit UTF-8 zu UTF-8-URL zu codieren. Dies gilt nur für den Text, der in Infofeldern oder Markierungen angezeigt wird, und nicht für die Zeichen &, | oder andere Zeichen, die Teil der URL-Syntax sind.
Wenn Sie dynamische Symbolmarkierungen mit dem chem
-Parameter angeben, müssen Sie bestimmte Zeichen in Ihrem Text mit Escapezeichen versehen, wie in der Dokumentation zu chem
beschrieben.
Schatten
Sie können Schatten zu vielen Symbolen hinzufügen oder für einige Symbole sogar Schatten zeichnen, ohne das Symbol selbst.
Verdeckte Symbole
Viele dieser Symbole können mit oder ohne Schatten gezeichnet werden. Wenn Shadowing eine Option ist, hat der Symbolname eine Version, die auf _withshadow
endet, und eine andere Version ohne diese Endung. Du kannst ein Symbol mit beiden Endungen angeben, je nachdem, ob du den Schatten verwenden möchtest oder nicht.
Hier siehst du ein Beispiel für eine mittelgroße Textblase und eine Markierung 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 den Schatten allein zeichnen. Das ist beispielsweise sinnvoll, wenn du in einer Grafik mehrere überlappende, schattierte Symbole verwendest, die so nah sind, dass der Schatten von einem Symbol auf ein anderes fällt. Hier sehen Sie beispielsweise zwei schattierte Blasen, zuerst Robert und dann Alice:
Beachten Sie, dass Robert von Alice teilweise von Alices Schatten verdeckt wird. Um dies zu beheben, können Sie zuerst den Schatten von Alice, dann die Blase mit Robert und anschließend Alice ohne Schatten zeichnen. Möglicherweise nicht völlig realistisch in Bezug auf Licht und Schatten, aber es wird vermieden, dass eine Blase durch den Schatten einer anderen verdeckt wird:
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
Für alle Markierungen wird dieselbe Z-Reihenfolge von 1 angegeben (py=1
), sodass sie in der angegebenen Reihenfolge über den Diagrammelementen (der Diagrammlinie) gezeichnet werden. Zuerst wird der Schatten von „Alice“ gezeichnet, dann darüber die Blase Robert und dann darüber die Blase „Alice“.
Informationen dazu, ob Sie den Schatten allein zeichnen können, finden Sie in der Dokumentation für Ihren spezifischen Symboltyp.
Kontextsymbole
Sie können ein Symbol festlegen, das je nach zugewiesenem Punkt seine Farbe, Größe oder Stapelung variiert. Diese Symboltypen sind nur als dynamische Symbolmarkierungen (chem
-Parameter) und nicht als frei stehende Symbole verfügbar.
Diese Symbole können auf einer anderen Reihe gerendert werden als der Reihe, die ihre Farbe, Größe oder Stapelinformationen angibt. Das bedeutet, dass der Wert ds
des Parameters chem
die Reihe angibt, in der das Symbol gerendert werden soll. Die Werte zur Bestimmung der Größe oder Farbe des Symbols sind jedoch in den unten angegebenen Parametern angegeben. Eine gute Verwendung ist, eine verborgene Datenreihe für Symboldaten zu verwenden, die Symbole aber auf einer sichtbaren Linie oder Leiste zu rendern. Hier einige Beispiele:
In Quellserie gerendertes Symbol | In Nicht-Quellreihe gerendertes Symbol | Symbol mit ausgeblendeter Reihe |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
Typen von Kontextmarkierungen
Art der Markierung | Wert von chem |
Beispiel |
---|---|---|
Farbvariationen | s=cm_color |
|
Größenvariante | s=cm_size |
|
Farb- und Größenvariationen | 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 einen optionalen Ausrichtungsstring, 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 dem Punkt beschreiben. Beispiele hierfür sind
tl
(oben links) undrb
(unten rechts). Eine vollständige Auflistung und Beschreibung finden Sie in der Beschreibung zum Parameter alignment_string des Parameterschem
. - h_anchor_offset
- [Optional] Der horizontale Versatz des Ankerpunkts in Pixeln. Vor Werten einschließlich Null muss ein Pluszeichen (+) oder ein Minuszeichen (-) stehen. Wichtig:+ muss als %2B URL-codiert werden.
- v_anchor_offset
- [Optional] Der vertikale Versatz des Ankerpunkts in Pixeln. Vor Werten einschließlich Null muss ein Pluszeichen (+) oder ein Minuszeichen (-) stehen. Wichtig:+ muss als %2B URL-codiert werden.
Sie können auch die Komponente of
des Parameters chem
verwenden, um horizontale und vertikale Offsets anzugeben. Wenn Sie sowohl die of
-Komponente als auch die h_anchor_offset v_anchor_offset
-Werte angeben, werden alle Offsets auf das Symbol angewendet.
Beispiele:
hb-0-0 Horizontal mittig unten Kein Offset |
lb-0-0 Unten links Keine Offsets |
rb-0-0 Unten rechts Keine Offsets |
ht-0-0 Horizontal oben Kein Offset |
hb-20-0 Horizontal mittig unten -20 horizontal 0 vertikal |
hb%2b20-0 Horizontal mittig unten +20 horizontal 0 vertikal |
hb-0%2b10 Horizontal mittig unten 0 horizontal +10 vertikal |
hb-0-20 Horizontal mittig unten 0 horizontal -20 vertikal |
Farbvariation (cm_color
)
Sie können die Farbe einer kontextbezogenen Diagrammmarkierung je nach dargestelltem 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 Bilder am Ende der Seite identifiziert.
- <color_data_series>
- Der nullbasierte Index der Datenreihe, mit dem die Farbe der Symbole variiert wird.
- <low_color>
- Der niedrige Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies wird dem niedrigsten möglichen Wert im verfügbaren Datenbereich zugeordnet.
- <middle_color>
- Der mittlere Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies bezieht sich auf den mittleren Wert im verfügbaren Datenbereich.
- <high_color>
- Der hohe Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-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 (kein #-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 kontextbezogenen Diagrammmarkierung allein je nach Datenreihe Ihrer Wahl variieren.
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 Datenreihe, mit dem die Größe der Symbole variiert.
- <zero_value_size>
- Die Basisgröße des Symbols, beim Mindestdatenwert für die Reihe.
- <size_multiplier>
- Ein Skalierungsfaktor für die Größe. Dieser Wert wird mit der Differenz zwischen dem Datenwert jedes Symbols und dem Mindestreihenwert multipliziert, um die endgültige Symbolgröße zu berechnen. Daher wirkt sich dieser Multiplikator nicht auf ein Symbol beim Datenwert 0 aus.
- <min_size>
- Die Mindestgröße eines Symbols in Pixeln.
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-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 null wird in der Größe Null, also 30 Pixel, gerendert. Die Größe nimmt mit den Daten zu. | chd=t:0,10,20,30,40,50,60,70 |
In diesem Beispiel beziehen die Symbole ihre Größendaten aus der gelben Linie, werden aber auf der blauen Linie dargestellt.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Farb- und Größenvariationen (cm_color_size
)
Sie können sowohl die Farbe als auch die Größe einer kontextbezogenen Diagrammmarkierung je nach Datenreihe Ihrer Wahl variieren.
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 Datenreihe, mit dem die Farbe der Symbole variiert wird.
- <low_color>
- Der niedrige Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies wird dem niedrigsten möglichen Wert im verfügbaren Datenbereich zugeordnet.
- <middle_color>
- Der mittlere Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies bezieht sich auf den mittleren Wert im verfügbaren Datenbereich.
- <high_color>
- Der hohe Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies wird dem höchstmöglichen Wert im verfügbaren Datenbereich zugeordnet.
- <size_data_series>
- Der nullbasierte Index der Datenreihe, mit dem die Größe der Symbole variiert.
- <zero_value_size>
- Die Basisgröße des Symbols, beim Mindestdatenwert für die Reihe.
- <size_multiplier>
- Ein Skalierungsfaktor für die Größe. Dieser Wert wird mit der Differenz zwischen dem Datenwert jedes Symbols und dem Mindestreihenwert multipliziert, um die endgültige Symbolgröße zu berechnen. Daher wirkt sich dieser Multiplikator nicht auf ein Symbol beim Datenwert 0 aus.
- <min_size>
- Die Mindestgröße eines Symbols in Pixeln.
- <outline_color>
- Die Umrissfarbe des Symbols als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen).
- <alignment>
- Ein optionaler String, der die Ausrichtung und den Versatz des Symbols beschreibt.
Beispiele
In diesem Beispiel werden zwei Linien verwendet. Die Markierungen 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 Stapels von Symbolen entsprechend dem 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 Bilder am Ende der Seite identifiziert.
- <repeat_series_index>
- Der nullbasierte Index der Datenreihe, mit dem berechnet wird, wie viele Symbole an diesem Punkt platziert werden sollen.
- <scaling_factor>
- Der Wert für die 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“ (klein) für horizontal oder „V“ (groß) 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 (kein #-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. Er wird nicht im Diagramm gerendert, sondern verwendet, um alle Stapel, beginnend am unteren Rand des Diagramms, gleichmäßig zu verteilen.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Stapeln und Farbvariation (cm_repeat_color
)
Sie können sowohl die Höhe als auch die Farbe eines Symbolstapels entsprechend dem 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 Bilder am Ende der Seite identifiziert.
- <repeat_series_index>
- Der nullbasierte Index der Datenreihe, mit dem berechnet wird, wie viele Symbole an diesem Punkt platziert werden sollen.
- <scaling_factor>
- Der Wert für die 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“ (klein) für horizontal oder „V“ (groß) 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 Datenreihe, mit dem die Farbe der Symbole variiert wird.
- <low_color>
- Der niedrige Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies wird dem niedrigsten möglichen Wert im verfügbaren Datenbereich zugeordnet.
- <middle_color>
- Der mittlere Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-Zeichen). Dies bezieht sich auf den mittleren Wert im verfügbaren Datenbereich.
- <high_color>
- Der hohe Farbwert im Bereich als drei- oder sechsstellige HTML-Hexadezimalfarbe (kein #-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 (kein #-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= |