Dynamische Symbole

Wichtig:Die dynamischen und interaktiven Google Charts werden zwar aktiv gepflegt, aber die statischen Google Bilddiagramme wurden schon 2012 offiziell eingestellt. Sie wurde am 18. März 2019 deaktiviert.

Auf dieser Seite wird beschrieben, wie Sie verschiedene Assets mit Zusatzinformationen, Bubbles, Markierungen und anderen Grafiken erstellen, die über eine URL erstellt werden können.

https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

1. Einführung
2. Syntax
3. Symboltypen
4. Bubbles
5. Markierungen
6. Tolle Notizen zum Stil
7. Hinweise zur Wettervorhersage
8. Textblöcke mit Umriss (nur Text)
9. Textblöcke mit Umriss (Text + Symbol)
10. Liste der verfügbaren Flags und Symbole
11. Textstrings
12. Schatten

Einführung

Sie können verschiedene interessante Zusatzinformationen, Markierungen oder Bubbles erstellen, die Text und Bilder enthalten. Diese Elemente werden als dynamische Symbole bezeichnet.

Syntax

Stamm-URL: https://chart.googleapis.com/chart?

Dynamische Symbole unterstützen die folgenden Parameter nach dem ? in der Stamm-URL:

Symboltypen

Typ	Beispiele
Bubbles: Wählen Sie kleine oder große Sprechblasen mit oder ohne Symbole aus.
Markierungen - Pin-Typen können einfach, mit einem Stern oder abgeschrägt sein und können ein Symbol, einen einzelnen Buchstaben oder längere Textstrings enthalten.
Notizen mit Text und optionalem Titel im lustigen Design
Hinweise zur Wettervorhersage mit Titel, Text und Wettersymbol
Mehrzeiliger, umrissener Textblock, kein Symbol
Einzeiliger, umrissener Textblock mit Symbol

Nach oben

Bubbles

Infofelder gibt es in verschiedenen Kombinationen von Merkmalen: groß oder klein, mit oder ohne Symbol, ein- oder mehrzeiliger Text. In der folgenden Tabelle werden die Arten von Blasen und ihre Syntax beschrieben. Die Beschreibung der einzelnen Parameterwerte finden Sie unter der Tabelle.

Einige zusätzliche Hinweise:

• Die Größe aller Blasen wird an die Breite und Höhe des eingegebenen Texts angepasst.
• Die Blasenkonstante unterstützt eine Variante, die auf _withshadow endet. Wenn Sie die Variation _withshadow verwenden, wird unter der Blase ein Schatten hinzugefügt.

Text	Icon	Syntax	Nur Schatten	Beispiel
Eine Zeile	Nein	chst=   d_bubble_text_small[_withshadow] chld=   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_text_small_shadow chld=   <frame_style>|   <text>	chst=d_bubble_text_small chld=   bb|   Launch+site|   C6EF8C|   000000
Eine Zeile	Yes	chst=   d_bubble_icon_text_small[_withshadow] chld=   <icon_string>|   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_icon_text_small_shadow chld=   <icon_string>|   <frame_style>|   <text>	chst=d_bubble_icon_text_small chld=   wc|   bb|   Pay+Toilets|   C6EF8C|   000000
Eine Zeile	Yes	chst=   d_bubble_icon_text_big[_withshadow] chld=   <icon_string>|   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_icon_text_big_shadow chld=   <icon_string>|   <frame_style>|   <text>	chst=d_bubble_icon_text_big chld=   snack|   bb|   $2.99+!|   FFBB00|   000000
Mehrzeilig	Nein	chst=   d_bubble_texts_big[_withshadow] chld=   <frame_style>|   <fill_color>|   <text_color>|   <text_line_1>    |...|   <text_line_n>	chst=   [d_]bubble_texts_big_shadow chld=   <frame_style>|   <text_line_1>    |...|   <text_line_n>	chst=d_bubble_texts_big chld=   bb|   FFB573|   000000|   Help+Wanted|   Hours:+Midnight+to+3:00+AM|   Good+pay,+interesting+work|   Contact+V.+Helsing
Mehrzeilig	Yes	chst=d_bubble_icon_texts_big[_withshadow] chld=   <icon_string>|   <frame_style>|   <fill_color>|   <text_color>|   <text_line_1>    |...|   <text_line_n>	chst=   [d_]bubble_icon_texts_big_shadow chld=   <icon_string>|   <frame_style>|   <text_line_1>    |...|   <text_line_n>	chst=d_bubble_icon_texts_big chld=   home|   bb|   FFB573|   000000|   Haunted+House|   Hours:+Midnight+to+3:00+AM|   Ghouls,+Goblins,+and+Vampires|   Bring+your+own+wooden+stake

Syntax

<icon_string>

Ein String, der eines der am Ende dieses Dokuments beschriebenen Symbole angibt.

 

<frame_style>

Die Richtung des Tails. Wählen Sie eine der folgenden Extremwertrichtungskonstanten aus:

• bb – Ballonrahmen, Schwanz links unten
  
  
• bbtl – Ballonrahmen, Schwanz oben links
  
  
• bbtr – Ballonrahmen, Schwanz oben rechts
  
  
• bbbr – Ballonrahmen, Schwanz rechts unten
  
  
• bbT – Ballonrahmen, kein Ende
  
  
• edge_bl – Rahmen, Ende am unteren Rand, linkes Ende
  
  
• edge_bc – Rahmen, Ende am unteren Rand, zentriert
  
  
• edge_br – Rahmen, Ende am unteren Rand, rechtes Ende
  
  
• edge_tl – Rahmen, Ende am oberen Rand, linkes Ende
  
  
• edge_tc – Rahmen, Ende am oberen Rand, zentriert
  
  
• edge_tr – Rahmen, Ende am oberen Rand, rechtes Ende
  
  
• edge_lt – Rahmen, Ende am linken Rand, oberes Ende
  
  
• edge_lc – Rahmen, Ende am linken Rand, zentriert
  
  
• edge_lb – Rahmen, Ende am linken Rand, unteres Ende
  
  
• edge_rt – Rahmen, Ende rechts, oberes Ende
  
  
• edge_rc – Rahmen, Ende am rechten Rand, zentriert
  
  
• edge_rb – Rahmen, Ende rechts, unteres Ende

<fill_color>

Füllfarbe der Blase als sechsstellige HTML-Hexadezimalfarbe

<text_color>

Die Textfarbe als sechsstellige HTML-Hexadezimalfarbe.

<text>

Eine einzelne Zeile mit Infofeldtext für einzeilige Infofelder. Leerzeichen müssen +-Zeichen sein.

<text_line_1>|...|<text_line_n>

Eine oder mehrere Textzeilen, für mehrzeilige Sprechblasen Die einzelnen Zeilen sind durch ein „|“-Zeichen voneinander getrennt. Die erste Zeile wird größer und fett dargestellt. Leerzeichen müssen durch „+“ ersetzt werden.

Nur Schatten

Für Blasen können Sie auch den frei stehenden Schatten mit der Syntax in der Tabelle oben zeichnen. Beispiele:

chst=   d_bubble_text_small_shadow chld=   bb|Launch+site

chst=   d_bubble_icon_text_small_shadow chld=   wc|bb|Pay+Toilets

chst=   d_bubble_icon_text_big_shadow chld=   snack|bb|$2.99+!

chst=   d_bubble_texts_big_shadow chld=   bb|Help+Wanted|   Hours:+Midnight+to+3:00+AM|   Good+pay,+interesting+work|   Contact+V.+Helsing

chst=   d_bubble_icon_texts_big_shadow chld=   home|bb|Haunted+House|   Hours:+Midnight+to+3:00+AM|   Ghouls,+Goblins,+and+Vampires|   Bring+your+own+wooden+stake

Nach oben

Markierungen

Sie können verschiedene Markierungen mit Symbolen und/oder kurzen Textzeichenfolgen erstellen. Dies sind die verfügbaren Arten von Markierungen.

Pin-Typ	Blasenkonstante	Beispiele
Klare Markierung mit einzelnem Buchstaben oder Symbol	chst=d_map_pin_letter[_withshadow] chst=d_map_pin_icon[_withshadow]
Schiefe/markierte Markierung mit einem einzelnen Buchstaben oder Symbol	chst=d_map_xpin_letter[_withshadow] chst=d_map_xpin_icon[_withshadow]
Skalierbarer, drehbarer, mehrzeiliger Stift	chst=d_map_spin

Klare Stecknadel mit einzelnem Buchstaben oder Symbol

Dabei handelt es sich um eine kleine, aufrechte Stecknadel, die entweder ein kleines Symbol oder einen einzelnen Buchstaben enthalten kann.

Buchstabensyntax

chst=d_map_pin_letter[_withshadow]
chld=<character>|<fill_color>|<text_color>

Symbolsyntax

chst=d_map_pin_icon[_withshadow]
chld=<icon_string>|<fill_color>

<Zeichen>

[Nur Text angepinnt] Ein einzelnes Textzeichen.

<icon_string>

[Nur Symbolpins] Ein String, der eines der am Ende dieses Dokuments beschriebenen Symbole angibt.

<fill_color>

Füllfarbe der Blase als sechsstellige HTML-Hexadezimalfarbe

<text_color>

[Nur Text-Pins] Die Textfarbe als sechsstellige HTML-Hexadezimalfarbe.

Nur Schatten

Um den Schatten nur für diesen Stecknadeltyp zu zeichnen, verwenden Sie diese Syntax:

chst=d_map_pin_shadow

Der Parameter chld ist nur für einen Schatten erforderlich.

Beispiele

chst=d_map_pin_letter_withshadow chld=A|FF0000|0000FF

chst=d_map_pin_letter chld=%E5%8D%B1|FF0000|000000

chst=d_map_pin_icon chld=camping|ADDE63

chst=d_map_pin_shadow

Nach oben

Schräg gestellte/Markierte Markierung mit einem Buchstaben oder Symbol

Dabei handelt es sich um eine kleine Stecknadel, die entweder nach links oder rechts geneigt werden kann oder mit einem Stern überlappt werden kann. Der Inhalt der Stecknadel kann entweder ein einzelnes Zeichen oder ein kleines Symbol sein.

Buchstabensyntax

chst=d_map_xpin_letter[_withshadow]
chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>

Symbolsyntax

chst=d_map_xpin_icon[_withshadow]
chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>

<pin_style>

Das Pin-Design. Wählen Sie eine der folgenden Konstanten aus:

• pin
• pin_star
• pin_sleft
• pin_sright

<icon_string>

[Pins] Ein String, der eines der Symbole angibt, die am Ende dieses Dokuments beschrieben werden.

<Zeichen>

[Text angepinnt] Ein einzelnes Textzeichen.

<fill_color>

Füllfarbe der Blase als sechsstellige HTML-Hexadezimalfarbe

<text_color>

[Textpins] Die Textfarbe als sechsstellige HTML-Hexadezimalfarbe.

<star_fill_color>

[Markierungen] Die Füllfarbe des Sterns als sechsstellige HTML-Hexadezimalfarbe.

Nur Schatten

Um den Schatten nur für diesen Stecknadeltyp zu zeichnen, verwenden Sie diese Syntax:

chst=d_map_xpin_shadow

chld=<pin_style>

Beispiele

chst=d_map_xpin_letter chld=pin_star|A|FF0000|000000

chst=d_map_xpin_letter chld=pin_sleft|A|FF0000|000000

chst=d_map_xpin_icon chld=pin_sleft|bank-dollar|52B552

chst=d_map_xpin_shadow chld=pin_sleft

Nach oben

Text-Pin mit Skalierung und Drehung

Dies ist eine Markierung, die Sie manuell skalieren können, um längere Textzeichenfolgen einzubeziehen. Sie können die Markierung auch um einen bestimmten Wert drehen und die Schriftgröße und -farbe festlegen.

Syntax

chst=d_map_spin
chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>

<scale_factor>

Ein Skalierungsfaktor zur Angabe der Pin-Größe. Dies ist eine positive Gleitkommazahl, wobei 0,5 für die Größe der nicht skalierten Pins steht. 0,25 wäre die Hälfte dieser Größe, 1 wäre die doppelte Größe und so weiter.

<rotation_deg>

Die Drehung des Stifts in Grad. Positive und negative Werte sind zulässig. Geben Sie für eine senkrechte Stecknadel 0 an.

<fill_color>

Füllfarbe der Blase als sechsstellige HTML-Hexadezimalfarbe

<font_size>

Die Schriftgröße des Textes in Pixeln.

<font_style>

Entweder "_" (Unterstrich) für normalen Text oder "b" für fett formatierten Text.

<text_line_1>...<text_line_n>

Eine oder mehrere Textzeilen, die durch | voneinander getrennt sind.

Beispiele

chst=d_map_spin chld=1.7|180|C6E7DE|11|_|Raindrop

chst=d_map_spin chld=2.1|0|FFFF42|13|b|Kumquats

chst=d_map_spin chld=3|45|FFFF42|11|_|First+line|Second+line

Nach oben

Witzige Notizen

In Neuheiten können Sie verschiedene Textnotizen erstellen, z. B. Haftnotizen oder Denkanstöße. Optional können Sie eine Titelzeile in die Notiz einfügen.

Diese Notizen haben eine feste Größe und werden nicht entsprechend der Textgröße vergrößert oder verkleinert.

Syntax

chst=d_fnote_title OR chst=d_fnote
chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>

Chrome

Geben Sie entweder d_fnote_title für eine Notiz mit einem Titel oder d_fnote für eine Notiz ohne Titel an. In einer Notiz mit einem Titel wird die erste Textzeile als Titel formatiert (größer und fett).

<note_type>

Ein String, der die Form der Notiz beschreibt. Wählen Sie in der Tabelle unten einen der Strings vom Typ „Notiz“ aus.

<note_size>

„1“ für eine große Notiz oder „2“ für eine kleine Notiz. Die Vorlagengrößen sind festgelegt. Vorlagen werden nicht an den Text angepasst und weder vergrößert noch verkleinert. Experimentieren Sie mit beiden Größen, um zu sehen, mit welcher der Text besser gehalten wird.

<text_color>

Die Textfarbe als sechsstellige hexadezimale Farbe. Alphawerte sind nicht zulässig.

<text_alignment>

Die Ausrichtung des gesamten Textes, einschließlich der Kopfzeile. Wählen Sie einen der folgenden Werte aus:

• l – ('L') linksbündig
• h – zentriert
• r - Rechtsbündig ausgerichtet

<text_line_1>| ...|<Text_line_n>

Der Text für die Notiz. Verwenden Sie das Zeichen |, um eine neue Zeile anzugeben. Bei chst=d_fnote_title ist die erste Textzeile als Titel formatiert.

Vorlagen für Notiztypen

Die folgenden Vorlagen werden für Notizenvorlagen unterstützt. Der jeweilige note_type-String wird unter der Vorlage angezeigt.

Hinweis:Bei Textstrings wird zwischen Groß- und Kleinschreibung unterschieden.

arrow_d

balloon

pinned_c

sticky_y

taped_y

thought

Beispiele

Beschreibung	Beispiel
Notiz mit Titel: chst=d_fnote_title. Die erste Textzeile wird als Titel verwendet. Die Größe ist eine große Notiz (1).	chst=d_fnote_title chld=pinned_c|1|004400|l|Joe's|Today+2-for-1+!|555-1234
Notiz ohne Titel: chst=d_fnote.Der Text ist zentriert.	chst=d_fnote chld=thought|1|0088FF|h|Why+am+I+here?
Eine nützliche Vorlage für einen alten Witz.	chst=d_fnote chld=arrow_d|1|000000|h|Your|shoe's|untied

Nach oben

Hinweise zur Wettervorhersage

Sie können eine Notiz mit einem Wetterindikator-Symbol erstellen. Ähnliches Layout wie witzige Notizen, aber die Textfarbe ist immer schwarz, der Text ist immer linksbündig ausgerichtet und Sie können nur eine bis drei Textzeilen haben.

Diese Notizen haben eine feste Größe und werden nicht entsprechend der Textgröße vergrößert oder verkleinert.

Syntax

chst=d_weather
chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>

Chrome

d_weather gibt eine Wetternotiz an.

<note_type>

Die Vorlage für diese Notiz. Verwende einen der Hinweisstrings, die in der Liste für lustige Stilnotizen oben aufgeführt sind.

<weather_icon>.

Einer der Strings für das Wettersymbol in der Tabelle unten. Eine Notiz kann ein einzelnes Wettersymbol enthalten.

<title>|<line_2>|<line_3>

Den Titel und bis zu zwei weitere Textzeilen (diese zusätzlichen Textzeilen sind optional). Der Titel ist größer und fett formatiert.

Wettersymbole

Hier ist eine Liste der unterstützten Wettersymbole mit dem String weather_icon.

Hinweis:Bei Textstrings wird zwischen Groß- und Kleinschreibung unterschieden.

clear-night-moon	cloudy-heavy	cloudy-sunny	cloudy	rain
rainy-sunny	snow	snowflake	snowy-sunny	sunny-cloudy
sunny	thermometer-cold	thermometer-hot	thunder	windy

Beispiele

Nach oben

Textblöcke mit Umriss (nur Text)

Sie können einen Block mit umrandetem Text mit weißem Hintergrund erstellen. Wenn Sie einen Text + Symbol verwenden möchten, sollten Sie die einzeilige Variante verwenden, die ein Symbol unterstützt.

Syntax

chst=d_text_outline
chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>

<text_fill_color>

Die Textfüllfarbe. Dies ist eine sechsstellige hexadezimale Farbe. Alphawerte werden nicht akzeptiert.

<font_size>

Eine Zahl, die die Schriftgröße in Pixeln angibt.

<text_alignment>

Die Ausrichtung des gesamten Textes, einschließlich der Kopfzeile. Wählen Sie einen der folgenden Werte aus:

• l – ('L')Linksbündig
• h – zentriert
• r - Rechtsbündig ausgerichtet

<outline_color>

Die Umrissfarbe des Textes. Dies ist eine sechsstellige hexadezimale Farbe. Alphawerte werden nicht akzeptiert.

<font_weight>

Normaler oder fett formatierter Text Unterstrich " _" für normalen Text und "b" für fett formatierten Text.

<text_line_1>| ...|<Text_line_n>

Der Text für die Notiz. Verwenden Sie das Zeichen |, um eine neue Zeile anzugeben. Bei chst=d_fnote_title ist die erste Textzeile als Titel formatiert.

Beispiele

chst=d_text_outline chld=FFCC33|16|h|FF0000|b|Mad+Scientist|Boo

chst=d_text_outline chld=FF65BB|20|h|00FF00|_|Freshly+Made+Pie

Nach oben

Umrissene Schriftblöcke (Text + Symbol)

Sie können eine einzelne Zeile mit umrissenem Text sowie ein Symbol am oberen, linken, unteren oder rechten Rand des Blocks erstellen. Wenn du kein Symbol benötigst, verwende den Textblock mit umrissener Schriftart.

Syntax

chst=<icon_position_string>
chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>

<icon_position_string>

Gibt an, wo das Symbol im Textfeld angezeigt wird. Wählen Sie einen der folgenden Werte aus:

• d_simple_text_icon_below – Platziert das Symbol unten im Feld:
• d_simple_text_icon_above – platziert das Symbol oben im Feld:
• d_simple_text_icon_left: Das Symbol wird links neben dem Feld platziert: .
• d_simple_text_icon_right: Das Symbol wird rechts neben dem Feld platziert: .

<text>

Der Text, der angezeigt werden soll. Nur eine Zeile. Verwenden Sie + für Leerzeichen.

<font_size>

Eine Zahl, die die Schriftgröße in Pixeln angibt.

<font_fill_color>

Die Füllfarbe für den Text als sechsstelliger String. Alphawerte werden nicht unterstützt.

<icon_name>

Einer der am Ende des Dokuments aufgeführten Symbolnamen.

<icon_size>

Die Höhe des Symbols in Pixeln. Folgende Werte werden unterstützt: 12, 16, 24.

<icon_fill_color>

Die Farbe des Symbols als sechsstelliger String. Alphawerte werden nicht unterstützt.

<icon_and_text_border_color>

Die Farbe des Rahmens um das Symbol und den Text als sechsstelliger String. Alphawerte werden nicht unterstützt.

Nach oben

Liste der verfügbaren Flags und Symbole

Die folgenden Bilder können mithilfe des entsprechenden -Parameters in dynamischen Symbolen verwendet werden.

Hinweis:Bei Textstrings wird zwischen Groß- und Kleinschreibung unterschieden.

Hinweis:Symbole sind nur in den folgenden Größen verfügbar: 12, 16 und 24.

Einfache Symbole

Symbole von Glyphish.com

Diese Symbole stammen von Joseph Wain / glyphish.com. Dieses Werk unterliegt der Creative Commons Attribution 3.0 United States License.

Flags

Hier sind die Flaggen für einige Länder und Gebiete.

Nach oben

Textstrings

Der gesamte in der Anfrage gesendete Anzeigetext muss UTF-8- und anschließend 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 Bild-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.

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 über eine andere fällt. Informationen dazu, ob Sie den Schatten allein zeichnen können, finden Sie in der Dokumentation für Ihren spezifischen Symboltyp.

Nach oben