Wichtig:Während die dynamischen und interaktiven Google-Diagramme aktiv verwaltet werden, haben wir die statischen Google-Bilddiagramme schon seit 2012 offiziell eingestellt. Sie wurde am 18. März 2019 deaktiviert.
Auf dieser Seite wird beschrieben, wie du mithilfe einer URL verschiedene Zusatzinformationen, Blasen, Stecknadeln und andere Grafiken erstellst.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- Einführung
- Syntax
- Symboltypen
- Bubbles
- Markierungen
- Unterhaltsame Stilnotizen
- Hinweise zur Wettervorhersage
- Umrissene Schriftart-Textblöcke (nur Text)
- Umrissene Schriftart-Textblöcke (Text und Symbol)
- Liste der verfügbaren Markierungen und Symbole
- Textstrings
- Schatten
Einführung
Sie können eine Vielzahl interessanter Zusatzinformationen, Stecknadeln oder Infofelder erstellen, in denen Text und Bilder kombiniert werden. Diese Elemente werden als dynamische Symbole bezeichnet.
Syntax
Stamm-URL: https://chart.googleapis.com/chart?
Dynamische Symbole unterstützen die folgenden Parameter nach dem Fragezeichen (? in der Stamm-URL enthalten:
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.
|
Symboltypen
Typ | Beispiele |
---|---|
Bubbles: Hier können Sie kleine oder große Sprechblasen mit oder ohne Symbole auswählen. | |
Markierungen: Stecknadeln können einfach, markiert oder schräg sein und ein Symbol, einen einzelnen Buchstaben oder längere Textstrings umfassen. | |
Lustige Stilnotizen mit Text und optionalem Titel | |
Notizen zur Wettervorhersage mit Titel, Text und Wettersymbol | |
Umrissener Textblock mit mehreren Linien, kein Symbol | |
Umrissener einzeiliger Textblock mit Symbol |
Bubbles
Bubbles 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 die jeweilige 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. Bei der Variante_withshadow
wird unter der Blase ein Schatten hinzugefügt.
Text | Icon | Syntax | Nur Schatten | Beispiel |
---|---|---|---|---|
Einzeilig | No | chst= |
chst= |
chst=d_bubble_text_small |
Einzeilig | Yes | chst= |
chst= |
chst=d_bubble_icon_text_small |
Einzeilig | Yes |
chst= |
chst= |
chst=d_bubble_icon_text_big |
Mehrzeilig | No | chst= |
chst= |
chst=d_bubble_texts_big |
Mehrzeilig | Yes |
|
chst= |
chst=d_bubble_icon_texts_big |
Syntax
- <icon_string>
- Ein String, der eines der Symbole angibt, die am Ende dieses Dokuments beschrieben werden.
- <frame_style>
- Die Schwanzrichtung. Wählen Sie eine der folgenden Extremwert-Richtungskonstanten aus:
bb
– Rahmen des Info-Pop-ups, Ende unten links
bbtl
– Rahmen des Info-Pop-ups, Ende oben links
bbtr
– Rahmen des Info-Pop-ups, Seitenende oben rechts
bbbr
– Rahmen des Info-Pop-ups, Ende rechts unten
bbT
– Rahmen für Info-Pop-up, kein Ende
edge_bl
– Rahmen am unteren Rand, linkes Ende
edge_bc
– Rahmen am unteren Rand, zentriert
edge_br
– Rahmen, Rand am unteren Rand, rechtes Ende
edge_tl
– Rahmen, Rand oben, linkes Ende
edge_tc
– Rahmen am Rand, Ende oben, zentriert
edge_tr
– Rahmen, Rand oben, rechtes Ende
edge_lt
– Rahmen am linken Rand, oberes Ende
edge_lc
– Rahmen am linken Rand, zentriert
edge_lb
– Rahmen, Rand am linken Rand, unteres Ende
edge_rt
– Rahmen am rechten Rand, oberes Ende
edge_rc
– Rahmen am rechten Rand, zentriert
edge_rb
: Rahmen, Rand am rechten Rand, unteres Ende
- <fill_color>
- Die Füllfarbe der Blasen als sechsstellige HTML-Hexadezimalfarbe.
- <text_color>
- Die Textfarbe als sechsstellige HTML-Hexadezimalfarbe.
- <text>
- Eine einzelne Zeile Blasentext für einzeilige Blasen. Leerzeichen müssen durch Pluszeichen (+) gekennzeichnet werden.
- <text_line_1>|...|<text_line_n>
- Eine oder mehrere Textzeilen für mehrzeilige Sprechblasen. Die einzelnen Zeilen sind durch ein |-Zeichen getrennt. Die erste Zeile wird größer und fett dargestellt. Leerzeichen müssen durch ein Pluszeichen ersetzt werden.
Nur Schatten
Bei Blasen können Sie auch den frei stehenden Schatten mithilfe der in der obigen Tabelle gezeigten Syntax zeichnen. Beispiele:
chst= |
chst= |
chst= |
chst= |
chst= |
Markierungen
Sie können verschiedene Stecknadeln mit Symbolen und/oder kurzen Textzeichenfolgen erstellen. Dies sind die verfügbaren Arten von Markierungen.
Stecknadeltyp | Blasenkonstante | Beispiele |
---|---|---|
Nur PIN mit einzelnem Buchstaben oder Symbol |
|
|
Abgeschrägte/markierte Stecknadel mit einzelnem Buchstaben oder Symbol |
|
|
Skalierbarer, drehbarer, mehrzeiliger Pin | chst=d_map_spin |
Leichte Pin mit Einzelbuchstaben oder Symbol
Dies ist eine kleine, senkrechte Stecknadel, die entweder ein kleines Symbol oder einen einzelnen Buchstaben enthalten kann.
Letter-Syntax
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 angepinnte Symbole] Ein String, der eines der Symbole angibt, die am Ende dieses Dokuments beschrieben werden.
- <fill_color>
- Die Füllfarbe der Blasen als sechsstellige HTML-Hexadezimalfarbe.
- <text_color>
- [Nur Text angepinnt] Die Textfarbe als sechsstellige HTML-Hexadezimalfarbe.
Nur Schatten
Verwenden Sie die folgende Syntax, um den Schatten nur für diesen Stecknadeltyp zu zeichnen:
chst=d_map_pin_shadow
Der Parameter chld
ist nur für einen Schatten nicht erforderlich.
Beispiele
chst=d_map_pin_letter_withshadow |
chst=d_map_pin_letter |
chst=d_map_pin_icon |
chst=d_map_pin_shadow |
Schiefe/markierte Stecknadel mit Einzelbuchstaben oder Symbol
Dies ist eine kleine Nadel, die entweder nach links oder rechts geneigt werden kann oder einen Stern überlappt. Die Stecknadel kann entweder ein einzelnes Zeichen oder ein kleines Symbol sein.
Letter-Syntax
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>
- Anstecknadelsymbol Wählen Sie eine der folgenden Konstanten aus:
pin
pin_star
pin_sleft
pin_sright
- <icon_string>
- [Icon pins]: Ein String, der eines der am Ende dieses Dokuments beschriebenen Symbols angibt.
- <Zeichen>
- [Text-Anpinnen] Ein einzelnes Textzeichen.
- <fill_color>
- Die Füllfarbe der Blasen als sechsstellige HTML-Hexadezimalfarbe.
- <text_color>
- [Textmarkierungen] Die Textfarbe als sechsstellige HTML-Hexadezimalfarbe.
- <star_fill_color>
- [Sternstifte] Die Füllfarbe des Sterns als sechsstellige HTML-Hexadezimalfarbe.
Nur Schatten
Verwenden Sie die folgende Syntax, um den Schatten nur für diesen Stecknadeltyp zu zeichnen:
chst=d_map_xpin_shadow chld=<pin_style>
Beispiele
chst=d_map_xpin_letter |
chst=d_map_xpin_letter |
chst=d_map_xpin_icon |
chst=d_map_xpin_shadow |
Textmarkierung mit Skalierung und Drehung
Dies ist eine Stecknadel, die Sie manuell skalieren können, um längere Textzeichenfolgen einzufügen. Sie können die Markierung auch um einen benutzerdefinierten 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 zum Angeben der Markierungsgröße. Dies ist eine positive Gleitkommazahl, wobei 0,5 die Größe der nicht skalierten Pins ist. 0,25 wäre die halbe Größe, 1 wäre die doppelte Größe und so weiter.
- <rotation_deg>
- Die Drehung der Markierung, in Grad. Positive und negative Werte sind zulässig. Geben Sie 0 für eine vertikale Markierung an.
- <fill_color>
- Die Füllfarbe der Blasen als sechsstellige HTML-Hexadezimalfarbe.
- <font_size>
- Die Schriftgröße in Pixeln.
- <font_style>
- Entweder „_“ (Unterstrich) für normalen Text oder „b“ für Fettdruck.
- <text_line_1>...<text_line_n>
- Eine oder mehrere Textzeilen, getrennt durch |-Zeichen.
Beispiele
chst=d_map_spin |
chst=d_map_spin |
chst=d_map_spin |
Unterhaltsame Stilnotizen
Sie können eine Vielzahl von Textnotizen in neuen Vorlagen erstellen, z. B. Haftnotizen oder Gedankenblasen. Optional können Sie eine Titelzeile in die Notiz einfügen.
Diese Notizen haben eine feste Größe. Sie werden weder vergrößert noch verkleinert, um der Textgröße zu entsprechen.
Syntax
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- Chst
- Geben Sie entweder
d_fnote_title
für eine Notiz mit Titel oderd_fnote
für eine Notiz ohne Titel an. In einer Notiz mit Titel wird die erste Textzeile als Titel formatiert (größer und fett). - <note_type>
- Ein String, der die Notizenform beschreibt. Wählen Sie in der Tabelle unten einen der Hinweistyp-Strings aus.
- <note_size>
- 1 (eine) für eine große Notiz oder 2 für eine kleine Notiz. Die Vorlagengrößen werden fest festgelegt. Sie werden nicht vergrößert oder verkleinert, um den Text anzupassen. Experimentieren Sie mit beiden Größen, um zu sehen, welche den Text besser hält.
- <text_color>
- Die Textfarbe als sechsstellige Hexadezimalfarbe. Alphawerte sind nicht zulässig.
- <text_alignment>
- Die Ausrichtung für den gesamten Text, einschließlich der Kopfzeile. Wählen Sie einen der folgenden Werte aus:
- l - ('L') Linksbündig
- h: zentriert
- r - Rechtsbündig
- <text_line_1>| ...|<text_line_1text_line_1>
- Text für die Notiz Verwenden Sie das Zeichen „|“, um einen Zeilenumbruch anzugeben. Bei
chst=d_fnote_title
wird die erste Textzeile als Titel formatiert.
Vorlagen für Notiztypen
Die folgenden Vorlagen werden für Notizvorlagen 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 einem 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 |
Notiz ohne Titel: chst=d_fnote. Der Text ist zentriert. |
chst=d_fnote |
Eine nützliche Vorlage für einen alten Witz. |
|
Hinweise zur Wettervorhersage
Sie können eine Notiz mit einem Wetteranzeigesymbol erstellen. Ähnliches Layout wie Notizen zu lustigen Stilen, aber die Textfarbe ist immer schwarz, der Text immer linksbündig und Sie können nur ein bis drei Textzeilen verwenden.
Diese Notizen haben eine feste Größe. Sie werden weder vergrößert noch verkleinert, um der Textgröße zu entsprechen.
Syntax
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- Chst
d_weather
gibt eine Wetternote an.- <note_type>
- Die Vorlage für diese Notiz. Verwenden Sie einen der Notizenstrings, die oben in der Anmerkungsliste mit unterhaltsamen Stilen aufgeführt sind.
- <weather_icon>
- Einer der Wettersymbol-Strings in der Tabelle unten. Eine Notiz kann ein einzelnes Wettersymbol enthalten.
- <Titel>|<Zeile_2>|<Zeile_3>
- Der Titel und bis zu zwei weitere Textzeilen (optional). Der Titel ist größer und fett formatiert.
Wettersymbole
Hier ist eine Liste der unterstützten Wettersymbole mit dem jeweiligen weather_icon-String.
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
Beschreibung | Beispiel |
---|---|
Eine Wetternotiz mit einem Titel und zwei Zeilen in einer taped_y -Stilvorlage. |
|
Ein Wunschgedanke für den Winter. |
|
Textblöcke mit Umriss (nur Text)
Sie können einen Block mit umrissenem Text mit weißem Hintergrund erstellen. Wenn Sie ein Text-+-Symbol verwenden möchten, können Sie die Einzeiler-Variante verwenden, da diese auch 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 Füllfarbe des Textes. Dies ist eine sechsstellige Hexadezimalfarbe. Alphawerte sind nicht zulässig.
- <font_size>
- Eine Zahl, die die Schriftgröße in Pixeln angibt.
- <text_alignment>
- Die Ausrichtung für den gesamten Text, einschließlich der Kopfzeile. Wählen Sie einen der folgenden Werte aus:
- l - ('L')Linksbündig
- h: zentriert
- r - Rechtsbündig
- <outline_color>
- Die Umrissfarbe des Texts. Dies ist eine sechsstellige Hexadezimalfarbe. Alphawerte sind nicht zulässig.
- <font_weight>
- Normaler oder fetter Text. Unterstrich „_“ für normalen Text und „b“ für fett formatierten Text.
- <text_line_1>| ...|<text_line_1text_line_1>
- Text für die Notiz Verwenden Sie das Zeichen „|“, um einen Zeilenumbruch anzugeben. Bei
chst=d_fnote_title
wird die erste Textzeile als Titel formatiert.
Beispiele
chst=d_text_outline |
chst=d_text_outline |
Umrissene Schriftart-Textblöcke (Text und Symbol)
Sie können eine einzelne Zeile mit umrissenem Text sowie ein Symbol oben, links, unten oder rechts vom Block erstellen. Wenn Sie kein Symbol benötigen, nutzen Sie den umrissenen Schriftarttextblock.
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 erscheint. Wählen Sie einen der folgenden Werte aus:
d_simple_text_icon_below
: Das Symbol wird unten im Feld platziert:d_simple_text_icon_above
: Platziert das Symbol oben auf dem Feld:d_simple_text_icon_left
: Platziert das Symbol links neben dem Feld:d_simple_text_icon_right
: Platziert das Symbol rechts neben dem Feld:
- <text>
- Der anzuzeigende Text. 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 unten im Dokument aufgeführten Symbolnamen.
- <icon_size>
- Die Höhe des Symbols in Pixeln. Die folgenden 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 Symbol und Text als sechsstelliger String. Alphawerte werden nicht unterstützt.
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, 24.
Einfache Symbole
Symbole von Glyphish.com
Diese Symbole wurden von Joseph Wain / glyphish.com erstellt. Dieses Werk unterliegt der Creative Commons Attribution 3.0 United States License.
Flags
Hier sind Flaggen für einige Länder und Gebiete.
Textstrings
Der gesamte in der Anfrage gesendete 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 deine Bild-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.
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 eine andere Grafik fällt. In der Dokumentation zu Ihrem spezifischen Symboltyp erfahren Sie, ob Sie den Schatten allein zeichnen können.