חשוב: התרשימים של Google הדינמיים והאינטראקטיביים מתוחזקים באופן פעיל, אבל הוצאנו משימוש את תרשימי התמונות הסטטיים של Google מאז 2012. היא הושבתה ב-18 במרץ 2019.
בדף זה נסביר איך ליצור מגוון נכסי יתרונות מרכזיים, בועות, נעצים ופריטי גרפיקה אחרים שניתן ליצור באמצעות כתובת URL.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- מבוא
- תחביר
- סוגי סמלים
- בועות
- סיכות
- הערות מעוצבות
- הערות לגבי תחזית מזג האוויר
- בלוקי טקסט של גופנים בקווים תחתונים (טקסט בלבד)
- בלוקי טקסט של גופנים בקווים תחתונים (טקסט + סמל)
- רשימת הסימונים והסמלים הזמינים
- מחרוזות טקסט
- צלליות
הקדמה
אפשר ליצור מגוון של נכסי יתרונות מרכזיים, נעצים או בועות שמשלבים טקסט ותמונות. הפריטים האלה נקראים סמלים דינמיים.
תחביר
כתובת ה-URL הבסיסית: https://chart.googleapis.com/chart?
סמלים דינמיים תומכים בפרמטרים הבאים אחרי הסימן ? בכתובת ה-URL הבסיסית:
פרמטר | נדרש או אופציונלי | תיאור |
---|---|---|
chst=<icon_string_constant> |
חובה | מתאר את סוג הסמל שיש ליצור.
|
chld=<icon_data> |
חובה | הנתונים הספציפיים שמשמשים לתיאור הגודל, הסיבוב, הטקסט ונתונים נדרשים אחרים של הסמל.
|
סוגי הסמלים
תיאור | דוגמאות |
---|---|
בועות - בוחרים בועות טקסט קטנות או גדולות, עם או בלי סמלים. | |
סיכות – סוגי הסיכות יכולים להיות פשוטים, מסומנים בכוכב או נטוי, והם יכולים לכלול סמל, אות אחת או מחרוזות טקסט ארוכות יותר. | |
הערות מעניינות עם טקסט וכותרת אופציונלית | |
הערות לגבי תחזית מזג האוויר עם כותרת, טקסט וסמל מזג האוויר | |
גוש טקסט עם קו מתאר מרובה, ללא סמל | |
גוש טקסט עם קו אחד בקו אחד עם סמל |
בועות
בועות מופיעות בשילובים שונים של תכונות: גודל גדול או קטן, עם או בלי סמל, טקסט עם שורה אחת או טקסט עם כמה שורות. בטבלה הבאה מתוארים סוגי הבועות והתחביר של כל אחת מהן. התיאור של כל ערך פרמטר מתואר מתחת לטבלה.
כמה הערות נוספות:
- הגודל של כל הבועות משתנה בהתאם לרוחב ולגובה של הטקסט שהזנת.
- קבוע הבועה תומך בווריאציה שמסתיימת ב-
_withshadow
. אם משתמשים בווריאציה_withshadow
, היא מוסיפה צל מתחת לבועה.
טקסט | סמל | תחביר | אזורים כהים בלבד | דוגמה |
---|---|---|---|---|
שורה אחת | לא | chst= |
chst= |
chst=d_bubble_text_small |
שורה אחת | כן | chst= |
chst= |
chst=d_bubble_icon_text_small |
שורה אחת | כן |
chst= |
chst= |
chst=d_bubble_icon_text_big |
ריבוי קווים | לא | chst= |
chst= |
chst=d_bubble_texts_big |
ריבוי קווים | כן |
|
chst= |
chst=d_bubble_icon_texts_big |
תחביר
- <icon_string>
- מחרוזת שמציינת אחד מהסמלים המתוארים בסוף המסמך.
- <frame_style>
- כיוון הזנב. בוחרים את הקבועים הבאים של כיוון הזנב:
bb
– מסגרת בלון, זנב בצד שמאל למטה
bbtl
– מסגרת בלון, זנב בפינה השמאלית העליונה
bbtr
– מסגרת בלון, זנב בפינה הימנית העליונה
bbbr
– מסגרת בלון, זנב בפינה הימנית התחתונה
bbT
– מסגרת בלון, ללא זנב
edge_bl
– מסגרת קצה, זנב בקצה התחתון, קצה שמאלי
edge_bc
– מסגרת קצה, זנב בקצה התחתון, ממורכז
edge_br
– מסגרת קצה, זנב בקצה התחתון, קצה ימני
edge_tl
– מסגרת קצה, זנב בקצה העליון, קצה שמאלי
edge_tc
– מסגרת קצה, זנב בקצה העליון, ממורכז
edge_tr
– מסגרת קצה, זנב בקצה העליון, קצה ימני
edge_lt
– מסגרת קצה, זנב בקצה השמאלי, קצה עליון
edge_lc
– מסגרת קצה, זנב בקצה השמאלי, ממורכז
edge_lb
– מסגרת קצה, זנב בקצה השמאלי, קצה תחתון
edge_rt
– מסגרת קצה, זנב בקצה ימני, קצה עליון
edge_rc
– מסגרת קצה, זנב בקצה הימני, ממורכז
edge_rb
- מסגרת קצה, זנב בקצה ימני, קצה תחתון
- <fill_color>
- צבע המילוי של הבועה, כצבע HTML הקסדצימלי בן שש ספרות.
- <text_color>
- צבע הטקסט, כצבע HTML הקסדצימלי בן שש ספרות.
- <text>
- שורה אחת של טקסט בועה לבועות עם שורה אחת. הרווחים צריכים להיות סימני +.
- <text_line_1>|...|<text_line_n>
- שורת טקסט אחת או יותר, לבועות טקסט עם כמה שורות. כל שורה מופרדת באמצעות סימן |. השורה הראשונה תוצג גדולה יותר ומודגשת. צריך להחליף את הרווחים בסימן +.
צל בלבד
לבועות, אפשר גם לצייר את הצללית העומדת בקריטריונים באמצעות התחביר שמוצג בטבלה שלמעלה. דוגמאות:
chst= |
chst= |
chst= |
chst= |
chst= |
סיכות
ניתן להכין מגוון סיכות באמצעות סמלים ו/או מחרוזות טקסט קצרות. אלה סוגי הסיכות הזמינים.
סוג הסיכה | קבוע בועה | דוגמאות |
---|---|---|
סיכה פשוטה עם אות אחת או סמל יחיד |
|
|
סיכה מוצמדת/מסומנת בכוכב עם אות אחת או סמל יחיד |
|
|
סיכה ניתנת להתאמה, מסתובבת עם מספר קווים | chst=d_map_spin |
סיכה פשוטה עם אות יחידה או סמל
זהו סיכה קטנה וישרה שאפשר לכלול בה סמל קטן או אות אחת.
תחביר האותיות
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
התחביר של הסמל
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <תו>
- [סיכות טקסט בלבד] תו טקסט יחיד.
- <icon_string>
- [סיכות סמלים בלבד] מחרוזת שמציינת אחד מהסמלים שמתוארים בסוף המסמך.
- <fill_color>
- צבע המילוי של הבועה, כצבע HTML הקסדצימלי בן שש ספרות.
- <text_color>
- [סיכות טקסט בלבד] צבע הטקסט, כצבע HTML הקסדצימלי בן שש ספרות.
צל בלבד
כדי לצייר צל רק עבור סוג הסיכה הזה, יש להשתמש בתחביר הבא:
chst=d_map_pin_shadow
הפרמטר chld
לא נדרש עבור צל בלבד.
דוגמאות
chst=d_map_pin_letter_withshadow |
chst=d_map_pin_letter |
chst=d_map_pin_icon |
chst=d_map_pin_shadow |
סיכה מוצמדת/מסומנת בכוכב עם אות אחת או סמל יחיד
זהו סיכה קטנה שניתן להטות אותה שמאלה או ימינה או עם חפיפה עם כוכב. תוכן הסיכה יכול להיות תו יחיד או סמל קטן.
תחביר האותיות
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
התחביר של הסמל
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- סגנון הסיכה. בוחרים אחד מהקבועים הבאים:
pin
pin_star
pin_sleft
pin_sright
- <icon_string>
- [סיכות של סמלים] מחרוזת שמציינת אחד מהסמלים שמתוארים בסוף המסמך.
- <תו>
- [סיכות טקסט] תו טקסט יחיד.
- <fill_color>
- צבע המילוי של הבועה, כצבע HTML הקסדצימלי בן שש ספרות.
- <text_color>
- [סיכות טקסט] צבע הטקסט, כצבע HTML הקסדצימלי בן שש ספרות.
- <star_fill_color>
- [כוכבי סיכה] צבע המילוי של הכוכב, בצבע הקסדצימלי של שש ספרות ב-HTML.
צל בלבד
כדי לצייר צל רק עבור סוג הסיכה הזה, יש להשתמש בתחביר הבא:
chst=d_map_xpin_shadow chld=<pin_style>
דוגמאות
chst=d_map_xpin_letter |
chst=d_map_xpin_letter |
chst=d_map_xpin_icon |
chst=d_map_xpin_shadow |
סיכת טקסט עם קנה מידה וסיבוב
זהו סיכה שניתן לשנות את הגודל שלה באופן ידני כך שתכלול מחרוזות טקסט ארוכות יותר. אפשר גם לסובב את הסיכה בכמות מותאמת אישית ולשלוט בגודל ובצבע של הגופן.
תחביר
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <scale_factor>
- גורם קנה מידה לציון גודל הסיכה. זהו מספר נקודה צפה חיובית, שבה הערך 0.5 מציין את הגודל של נעצים לא מותאמים. 0.25 יהיה חצי מהגודל, 1 יהיה כפול מהגודל, וכן הלאה.
- <rotation_deg>
- סיבוב הסיכה, במעלות. ניתן להזין ערכים חיוביים ושליליים. יש לציין 0 לסיכה אנכית.
- <fill_color>
- צבע המילוי של הבועה, כצבע HTML הקסדצימלי בן שש ספרות.
- <font_size>
- גודל הגופן של הטקסט, בפיקסלים.
- <font_style>
- אפשר להשתמש ב-'_' (קו תחתון) לטקסט רגיל או ב-'b' לטקסט מודגש.
- <text_line_1>...<text_line_n>
- שורת טקסט אחת או יותר, מופרדות באמצעות תווים |
דוגמאות
chst=d_map_spin |
chst=d_map_spin |
chst=d_map_spin |
הערות מעוצבות
אפשר ליצור מגוון הערות טקסט בתבניות של חידושים, כמו הערה במיקום קבוע או בועת מחשבה. אפשר גם להוסיף שורת כותרת להערה.
לפתקים האלה יש גודל קבוע. הם לא יגדלו או יצטמצמו בהתאם לגודל הטקסט.
תחביר
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- chst
- יש לציין
d_fnote_title
להערה עם כותרת, אוd_fnote
להערה ללא כותרת. בהערה עם כותרת, שורת הטקסט הראשונה תעוצב ככותרת (גדולה ומודגשת). - <note_type>
- מחרוזת שמתארת את צורת ההערה. אפשר לבחור אחת מהמחרוזות של סוגי ההערות בטבלה.
- <note_size>
- 1 (אחת) להערה גדולה או 2 להערה קטנה. הגדלים של התבניות קבועים. התבניות לא גדלות או מתכווצות כדי להתאים לטקסט. מומלץ לנסות את שני הגדלים כדי לראות איזה מהם שומר טוב יותר על הטקסט.
- <text_color>
- צבע הטקסט, כצבע הקסדצימלי בן שש ספרות. לא ניתן להזין ערכי אלפא.
- <text_alignment>
- יישור לכל הטקסט, כולל הכותרת. בוחרים אחד מהערכים הבאים:
- l - ('L') יישור לשמאל
- h - יישור למרכז
- r - יישור לימין
- <text_line_1>| ...|<text_line_n>
- הטקסט של ההערה. יש להשתמש בתו | כדי לציין שורה חדשה. כאשר
chst=d_fnote_title
, שורת הטקסט הראשונה היא כותרת.
תבניות של סוגי פתקים
התבניות הבאות נתמכות בתבניות של הערות. המחרוזת note_type של כל אחד מהם מוצגת מתחת לתבנית.
הערה: מחרוזות טקסט הן תלויות אותיות רישיות (case-sensitive).
arrow_d |
balloon |
pinned_c |
sticky_y |
taped_y |
thought |
דוגמאות
תיאור | דוגמה |
---|---|
הערה עם כותרת: chst=d_fnote_title . שורת הטקסט הראשונה משמשת ככותרת. הגודל הוא הערה גדולה (1). |
chst=d_fnote_title |
הערה ללא כותרת: chst=d_fnote. הטקסט ממורכז. |
chst=d_fnote |
תבנית שימושית לבדיחה ישנה. |
|
הערות לגבי תחזית מזג האוויר
ניתן ליצור הערה עם סמל של אינדיקטור מזג האוויר. פריסה דומה להערות בסגנון מהנה, אבל צבע הטקסט הוא תמיד שחור, הטקסט תמיד יישור לשמאל ואפשר לכלול רק שורה אחת עד שלוש שורות טקסט.
לפתקים האלה יש גודל קבוע, והם לא יגדלו או יצטמצמו בהתאם לגודל הטקסט.
תחביר
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- chst
d_weather
מציין הערה על מזג האוויר.- <note_type>
- התבנית שבה ייעשה שימוש עבור ההערה הזו. אפשר להשתמש באחת ממחרוזות ההערות שמפורטות ברשימת ההערות בסגנון המהנה שלמעלה.
- <weather_icon>
- אחת ממחרוזות סמלי מזג האוויר בטבלה שבהמשך. לכל הערה אפשר להוסיף סמל מזג אוויר אחד.
- <title>|<line_2>|<line_3>
- הכותרת, ועוד שתי שורות טקסט (לא חובה). הכותרת גדולה ומודגשת.
סמלי מזג אוויר
הנה רשימה של סמלים נתמכים של מזג אוויר, עם המחרוזת weather_icon של כל אחד מהם.
הערה: מחרוזות טקסט הן תלויות אותיות רישיות (case-sensitive).
clear-night-moon |
cloudy-heavy |
cloudy-sunny |
cloudy |
rain |
rainy-sunny |
snow |
snowflake |
snowy-sunny |
sunny-cloudy |
sunny |
thermometer-cold |
thermometer-hot |
thunder |
windy |
דוגמאות
תיאור | דוגמה |
---|---|
הערה לגבי מזג האוויר עם כותרת ושתי שורות בתבנית בסגנון taped_y . |
|
מחווה של רצון טוב לחורף. |
|
בלוקים של טקסט בגופנים בפורמט קווי (טקסט בלבד)
אתם יכולים ליצור בלוק של טקסט עם קו תחתון עם רקע לבן. אם רוצים להוסיף סמל + טקסט, כדאי להשתמש במגוון של שורה אחת שתומך בסמל.
תחביר
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>
- צבע המילוי של הטקסט. זהו צבע הקסדצימלי בן שש ספרות. לא ניתן להזין ערכי אלפא.
- <font_size>
- מספר שמציין את גודל הגופן, בפיקסלים.
- <text_alignment>
- יישור לכל הטקסט, כולל הכותרת. בוחרים אחד מהערכים הבאים:
- l - ('L') יישור לשמאל
- h - יישור למרכז
- r - יישור לימין
- <outline_color>
- הצבע של קו המתאר של הטקסט. זהו צבע הקסדצימלי בן שש ספרות. לא ניתן להזין ערכי אלפא.
- <font_weight>
- טקסט רגיל או מודגש. קו תחתון ' _' לטקסט רגיל ו-'b' לטקסט מודגש.
- <text_line_1>| ...|<text_line_n>
- הטקסט של ההערה. יש להשתמש בתו | כדי לציין שורה חדשה. כאשר
chst=d_fnote_title
, שורת הטקסט הראשונה היא כותרת.
דוגמאות
chst=d_text_outline |
chst=d_text_outline |
גבולות טקסט של גופנים (טקסט + סמל)
אפשר ליצור שורה אחת של טקסט עם קו מתאר וסמל מעל הבלוק, משמאל ומתחתיו, או מימין לו. אם לא צריך סמל, אפשר להשתמש בגופן הטקסט של הגופנים בקווי מתאר.
תחביר
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>
- קביעת המיקום של הסמל בתיבת הטקסט. בוחרים אחד מהערכים הבאים:
d_simple_text_icon_below
- ממקם את הסמל בחלק התחתון של התיבה:d_simple_text_icon_above
– הוספת הסמל לחלק העליון של התיבה:d_simple_text_icon_left
- ממקם את הסמל שמימין לתיבה:d_simple_text_icon_right
- להציב את הסמל שמשמאל לתיבה:
- <text>
- הטקסט להצגה. שורה אחת בלבד. יש להשתמש בסימן + לרווחים.
- <font_size>
- מספר שמציין את גודל הגופן, בפיקסלים.
- <font_fill_color>
- צבע המילוי של הטקסט, כמחרוזת בת שש ספרות. אין תמיכה בערכי אלפא.
- <icon_name>
- אחד משמות הסמלים המפורטים בתחתית המסמך הזה.
- <icon_size>
- גובה הסמל, בפיקסלים. יש תמיכה בערכים הבאים: 12, 16, 24.
- <icon_fill_color>
- צבע הסמל, ממחרוזת בת שש ספרות. אין תמיכה בערכי אלפא.
- <icon_and_text_border_color>
- צבע הגבול מסביב לסמל ולטקסט, כמחרוזת בת שש ספרות. אין תמיכה בערכי אלפא.
רשימת הסימונים והסמלים הזמינים
ניתן להשתמש בתמונות הבאות בסמלים דינמיים באמצעות הפרמטר המתאים.
הערה: מחרוזות טקסט הן תלויות אותיות רישיות
הערה: הסמלים זמינים רק בגדלים הבאים: 12, 16, 24.
סמלים בסיסיים
סמלים מ-Glyphish.com
הסמלים האלה הם של ג'וזף וויין / glyphish.com. היצירה הזו בשימוש במסגרת רישיון Creative Commons Attribution 3.0 United States.
סימונים
הנה סימונים למדינות ולאזורים מסוימים.
מחרוזות טקסט
כל הטקסט לתצוגה שנשלח בבקשה צריך להיות בקידוד UTF-8, ולאחר מכן בקידוד כתובות URL.
ההגדרה הזו משפיעה רק על תווים שלא בטוחים לשימוש בכתובות URL (תווים בטוחים לשימוש בכתובות URL הם בעיקר
האותיות באנגלית a-z, אותיות קטנות ורישיות,
בתוספת קבוצה קטנה של סימני פיסוק). לדוגמה, הערך בקידוד UTF-8 וכתובת ה-URL של
האות "è" הוא "%C3%A8
", והתו הסיני
駅 הוא "%E9%A7%85
". ברוב הדפדפנים אפשר להשתמש בערך לא מקודד
במחרוזת כתובת ה-URL (לדוגמה, 駅) והוא יקודד בשבילך מאחורי הקלעים.
עם זאת, ייתכן שמישהו שצופה בכתובת ה-URL של התמונה שלך משתמש בדפדפן שלא מבצע את הפעולה הזו, ולכן בדרך כלל עדיף לקודד את כל התווים שאינם ASCII במחרוזות טקסט באמצעות UTF-8 וכתובת ה-URL. לתשומת ליבך: המדיניות הזו מיועדת רק לטקסט שמוצג בבועות או בסיכות, ולא בתווים &,
| או תווים אחרים שהם חלק מתחביר של כתובת ה-URL.
צללים
אפשר להוסיף צל לסמלים רבים, ואפילו לצייר צל לסמלים מסוימים ללא הסמל עצמו!
סמלים מוצללים
ניתן לצייר רבים מהסמלים האלה עם או בלי צללים. אם קיימת אפשרות להצללה, לשם הסמל תהיה גרסה שמסתיימת ב-_withshadow
וגרסה נוספת ללא הסיומת הזו. אפשר לציין סמל עם אחת מהסיומות, בהתאם לסוג הצללית הרצויה.
דוגמה של בועת טקסט בינונית וסיכה עם צלליות ובלי צלליות:
chst=d_bubble_icon_text_big |
chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon |
chst=d_map_pin_icon_withshadow |
צללים עומדים
חלק מסוגי הסמלים מאפשרים לצייר את הצללית שלהם בלבד. כדאי לעשות זאת אם בתמונה כלשהי יש כמה סמלים מוצללים חופפים, והם קרובים כל כך עד שצללית אחת נופלת על פני גרפיקה אחרת. כדאי לעיין בתיעוד של סוג הסמל הספציפי שלך כדי לדעת אם אפשר לצייר את הצללית שלו בלבד.