בדף הזה נסביר איך ליצור מגוון נכסי יתרונות מרכזיים, בועות, נעצים ופריטי גרפיקה אחרים שאפשר לבקש באמצעות כתובת URL או להוסיף אותם כסמנים מעל לתרשימים אחרים.
תוכן העניינים
הקדמה
Chart API מאפשר ליצור מגוון של נכסי יתרונות מרכזיים,
נעצים ובועות מעניינים שמשלבים טקסט ותמונות. הפריטים האלה נקראים סמלים דינמיים.
אפשר ליצור תמונת סמל דינמית עצמאית,
או למקם סמל דינמי בחלק העליון של התרשים כסוג סמן
באמצעות הפרמטר chem
. בדף הזה נסביר איך ליצור סמלים דינמיים
כתמונות עומדות או כסמנים בתרשים אחר. בדף המידע על סמלים דינמיים של אינפוגרפיקה מתוארים כל הסוגים הזמינים של סמנים דינמיים.
התחביר ליצירת סמל דינמי תלוי בשאלה אם רוצים להשתמש בסמל עצמאי או בסמן דינמי בתרשים אחר.
סמלים שעומדים בפני עצמם
אפשר לבקש תמונת סמל דינמית באותו אופן שבו מבקשים כל תרשימים אחרים. סמל דינמי עצמאי תומך בקבוצה שונה של פרמטרים מאשר בתרשימים אחרים:
פרמטר | נדרש או אופציונלי | תיאור |
---|---|---|
chst=<icon_string_constant> |
חובה | מתאר את סוג הסמל שיש ליצור.
|
chld=<icon_data> |
חובה | הנתונים הספציפיים שמשמשים לתיאור הגודל, הסיבוב, הטקסט ונתונים נדרשים אחרים של הסמל.
|
cht |
לא בשימוש | בתרשימי סמלים דינמיים עצמאיים לא נעשה שימוש בפרמטר cht . |
chs |
לא בשימוש | בתרשימי סמלים דינמיים עצמאיים לא נעשה שימוש בפרמטר chs . |
chd |
לא בשימוש | משתמשים בפרמטר chld כדי להעביר נתונים לסמל דינמי עצמאי. |
דוגמה
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
סמנים דינמיים
אפשר להטמיע סמל דינמי כסוג סמן במספר סוגים שונים של תרשימים
באמצעות הפרמטר chem
. במסמכי התיעוד של chem
מוסבר איך לעשות זאת.
דוגמה
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
תכונות הסמלים הנפוצות
לרוב הסמלים יכולים להיות מחרוזות טקסט או צלליות.
מחרוזות טקסט
כל הטקסט לתצוגה שמועבר ל-Chart API חייב להיות בקידוד UTF-8 ולאחר מכן בקידוד כתובות URL.
ההגדרה הזו משפיעה רק על תווים שלא בטוחים לשימוש בכתובות URL (תווים בטוחים לשימוש בכתובות URL הם בעיקר
האותיות באנגלית a-z, אותיות קטנות ורישיות,
בתוספת קבוצה קטנה של סימני פיסוק). לדוגמה, הערך בקידוד UTF-8 וכתובת ה-URL של
האות "è" הוא "%C3%A8
", והתו הסיני
駅 הוא "%E9%A7%85
". ברוב הדפדפנים אפשר להשתמש בערך לא מקודד
במחרוזת כתובת ה-URL (לדוגמה, 駅) והוא יקודד בשבילך מאחורי הקלעים.
עם זאת, ייתכן שמישהו שצופה בכתובת ה-URL של התרשים
משתמש בדפדפן שלא מבצע את הפעולה הזו, ולכן בדרך כלל עדיף לקודד את כל התווים שאינם ASCII במחרוזות טקסט ובקידוד UTF-8. לתשומת ליבך: המדיניות הזו מיועדת רק לטקסט שמוצג בבועות או בסיכות, ולא בתווים &,
| או תווים אחרים שהם חלק מתחביר של כתובת ה-URL.
כשמשתמשים בפרמטר chem
כדי לציין סמני סמלים דינמיים,
צריך גם לסמן בתו בריחה (escape) חלק מתווים מסוימים בטקסט, כפי שמתואר במסמכי התיעוד של chem
.
צללים
אפשר להוסיף צל לסמלים רבים, ואפילו לצייר צל לסמלים מסוימים ללא הסמל עצמו!
סמלים מוצללים
ניתן לצייר רבים מהסמלים האלה עם או בלי צללים. אם קיימת אפשרות להצללה, לשם הסמל תהיה גרסה שמסתיימת ב-_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 |
צללים עומדים
חלק מסוגי הסמלים מאפשרים לצייר את הצללית שלהם בלבד. כדאי לעשות זאת אם הגרפיקה כוללת כמה סמלים מוצללים חופפים, והם קרובים כל כך עד שצל של אחד מהם נופל על סמל אחר. לדוגמה, הנה שתי בועות מוצלות, קודם רון שורטט ואחר כך אליס:
שימו לב איך הצל של אליס מכסה חלקית את רוברט. כדי לתקן את הבעיה, אפשר קודם לצייר את הצללית של אליס, אחר כך את הבועה 'רוב', ואז את יעל בלי צל. אולי לא מציאותי לחלוטין מבחינת תאורה וצל, אבל אנחנו נמנעים מהסתרת בועה אחת עם צל של אחרת:
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
כל הסמנים מציינים את אותו סדר z של 1 (py=1
), ולכן הם משורטטים לפי הסדר שבו הם מופיעים מעל לרכיבי התרשים (הקו בתרשים). תחילה משורטטים את הצללית של אליס, אחר כך את בועת רוברט
ומעליה את הבועה 'אליס'.
כדאי לעיין בתיעוד של סוג הסמל הספציפי שלך כדי לדעת אם אפשר לצייר את הצללית שלו בלבד.
סמלים לפי הקשר
ניתן לציין סמל שמשתנה לפי הצבע, הגודל או הערימה שלו בהתאם לנקודה שאליה הוא מוקצה. סוגי הסמלים האלה זמינים כסמני סמלים דינמיים בלבד (פרמטר chem
), לא כסמלים עומדים בנפרד.
ניתן לעבד את הסמלים האלה בסדרה שאינה סדרה שמציינת את הצבע, הגודל או נתוני הסידור בערימה שלהם. פירוש הדבר הוא שהערך ds
של הפרמטר chem
מציין את הסדרה שבה רוצים לעבד את הסמל, אבל הערכים לקביעת הגודל או הצבע של הסמל מצוינים בפרמטרים שבהמשך. כדאי להשתמש באפשרות הזו כדי להשתמש בסדרת נתונים מוסתרת עבור נתוני סמלים, אבל לעבד את הסמלים על גבי קו או סרגל גלויים. ריכזנו כאן כמה דוגמאות:
הסמל שמוצג בסדרת המקור | הסמל מוצג בסדרה שאינה מקור | סמל עם סדרה מוסתרת |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
סוגים של סמני הקשר
סוג הסמן | הערך של chem s |
דוגמה |
---|---|---|
וריאציית צבע | s=cm_color |
|
וריאציית גודל | s=cm_size |
|
וריאציות של צבעים ומידות | s=cm_color_size |
|
וריאציות שונות | s=cm_repeat |
|
ערימה ווריאציות של צבעים | s=cm_repeat_color |
מחרוזות יישור של סמלים לפי הקשר
הסמלים לפי ההקשר תומכים במחרוזת יישור אופציונלית כדי לציין יישור וקיזוז של הסמל לנקודת הנתונים. למחרוזת הזו יש את התחביר הבא:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- שתי אותיות שמתארות את היישור של הסמל לנקודה. הדוגמאות כוללות את
tl
(בצד ימין למעלה) ו-rb
(ימין למטה). לתיאור המלא של הפרמטר alignment_string ולתיאור שלו, עיינו בתיאור של הפרמטרchem
. - h_anchor_offset
- [אופציונלי] ההיסט האופקי של נקודת העיגון, בפיקסלים. לפני הערכים כולל אפס צריך להוסיף את הסימן + או -. חשוב: חובה לקודד כתובת URL + כ-%2B.
- v_anchor_offset
- [אופציונלי] ההיסט האנכי של נקודת העוגן, בפיקסלים. לפני ערכים כולל אפס צריך להוסיף את הסימן + או -. חשוב: חובה לקודד כתובת URL + כ-%2B.
לתשומת ליבך, אפשר גם להשתמש ברכיב of
של הפרמטר chem
כדי לציין היסט אופקי ואנכי. אם תציינו גם את הרכיב of
וגם את הערך h_anchor_offset v_anchor_offset
, כל ההיסטים יחולו על הסמל שלך.
דוגמאות:
hb-0-0 מרכז אופקי בחלק התחתון ללא קיזוזים |
lb-0-0 למטה משמאל ללא קיזוזים |
rb-0-0 ימין למטה ללא קיזוזים |
ht-0-0 ראש אופקי ללא קיזוזים |
hb-20-0 מרכז אופקי למטה -20 אופקיים 0 אנכי |
hb%2b20-0 מרכז אופקי למטה +20 לרוחב 0 אנכיות |
hb-0%2b10 מרכז אופקי למטה 0 אופקי +10 אנכי |
hb-0-20 מרכז אופקי למטה 0 אופקי -20 אנכי |
וריאציית צבע (cm_color
)
אפשר לשנות את הצבע של סמן תרשים הקשרי בהתאם לנקודה שהוא מייצג. עליכם לציין טווח צבעים, וערך הנתונים יותאם לצבע תואם בטווח הזה.
תחביר
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>
- הסמל לשימוש. מציינים מחרוזת מזהה המזהה אחת מהתמונות המפורטות בסוף הדף.
- <color_data_series>
- האינדקס המבוסס על אפסים של סדרת הנתונים שמשמש לשינוי צבע הסמלים.
- <low_color>
- ערך הצבע הנמוך בטווח, כצבע הקסדצימלי של שלוש או שש ספרות של HTML (ללא סימן #). הנתון הזה משויך לערך הנמוך ביותר האפשרי בטווח הנתונים הזמין.
- <middle_color>
- ערך הצבע האמצעי בטווח, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #). הוא משויך לערך האמצעי בטווח הנתונים הזמין.
- <high_color>
- ערך הצבע הגבוה בטווח, כצבע הקסדצימלי של שלוש או שש ספרות של HTML (ללא סימן #). הוא משויך לערך הגבוה ביותר האפשרי בטווח הנתונים הזמין.
- <icon_size>
- גודל הסמל, בפיקסלים. הערכים הבאים נתמכים: 12, 16, 24.
- <outline_color>
- צבע המתאר של הסמל, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #).
- <alignment>
- מחרוזת אופציונלית שמתארת את היישור והקיזוז של הסמל.
דוגמה
|
chem=y;s=cm_color; |
וריאציית גודל (cm_size
)
אפשר לשנות את הגודל בנפרד של סמן תרשים לפי הקשר, בהתאם לסדרת הנתונים הרצויה.
תחביר
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>
- הצורה של הסמל. יש לבחור אחד מהערכים הבאים:
maps_pin
,disk
אוsquare
. - <size_data_series>
- האינדקס המבוסס על אפסים של סדרת הנתונים שמשמש לשינוי הגודל של הסמלים.
- <zero_value_size>
- הגודל הבסיסי של הסמל, לפי ערך הנתונים המינימלי לסדרה.
- <size_multiplier>
- גורם לקביעת מידות. כדי לחשב את גודל הסמל הסופי, הערך הזה מוכפל בהפרש בין ערך הנתונים של כל סמל לבין ערך הסדרה המינימלי. לכן, סמל עם ערך נתונים 0 לא יושפע מהמכפיל הזה.
- <min_size>
- הגודל המינימלי בפיקסלים של כל סמל.
- <outline_color>
- צבע המתאר של הסמל, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #).
- <fill_color>
- צבע המילוי של הסמל, כצבע HTML הקסדצימלי בן שלוש או שש ספרות (ללא סימן #).
- <alignment>
- מחרוזת אופציונלית שמתארת את היישור והקיזוז של הסמל.
דוגמאות
דוגמה בסיסית. הסמל עם הערך אפס מוצג בגודל של ערך אפס, שהוא 30 פיקסלים. גדלים גדלים יחד עם הנתונים. | chd=t:0,10,20,30,40,50,60,70 |
בדוגמה הזו, הסמלים מייצגים את נתוני הגודל שלהם מהקו הצהוב, אבל מעובדים בקו הכחול.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
וריאציות צבעים ומידות (cm_color_size
)
אפשר לשנות את הצבע וגם את הגודל של סמן בתרשים לפי הקשר, בהתאם לסדרת הנתונים הרצויה.
תחביר
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>
- הצורה של הסמל. יש לבחור אחד מהערכים הבאים:
maps_pin
,disk
אוsquare
. - <color_data_series>
- האינדקס המבוסס על אפסים של סדרת הנתונים שמשמש לשינוי צבע הסמלים.
- <low_color>
- ערך הצבע הנמוך בטווח, כצבע הקסדצימלי של שלוש או שש ספרות של HTML (ללא סימן #). הנתון הזה משויך לערך הנמוך ביותר האפשרי בטווח הנתונים הזמין.
- <middle_color>
- ערך הצבע האמצעי בטווח, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #). הוא משויך לערך האמצעי בטווח הנתונים הזמין.
- <high_color>
- ערך הצבע הגבוה בטווח, כצבע הקסדצימלי של שלוש או שש ספרות של HTML (ללא סימן #). הוא משויך לערך הגבוה ביותר האפשרי בטווח הנתונים הזמין.
- <size_data_series>
- האינדקס המבוסס על אפסים של סדרת הנתונים שמשמש לשינוי הגודל של הסמלים.
- <zero_value_size>
- הגודל הבסיסי של הסמל, לפי ערך הנתונים המינימלי לסדרה.
- <size_multiplier>
- גורם לקביעת מידות. כדי לחשב את גודל הסמל הסופי, הערך הזה מוכפל בהפרש בין ערך הנתונים של כל סמל לבין ערך הסדרה המינימלי. לכן, סמל עם ערך נתונים 0 לא יושפע מהמכפיל הזה.
- <min_size>
- הגודל המינימלי בפיקסלים של כל סמל.
- <outline_color>
- צבע המתאר של הסמל, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #).
- <alignment>
- מחרוזת אופציונלית שמתארת את היישור והקיזוז של הסמל.
דוגמאות
בדוגמה הזו נעשה שימוש בשתי שורות. הנעצים מבוססים על נתוני צבעים מהסדרה שבה הם מעובדים, אבל
נעשה שימוש בנתוני הגודל מהסדרה האחרת.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
וריאציית מקבצים (cm_repeat
)
ניתן לשנות את הגובה של ערימת סמלים בהתאם לערך הנתונים בנקודה ספציפית.
תחביר
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>
- הסמל לשימוש. מציינים מחרוזת מזהה המזהה אחת מהתמונות המפורטות בסוף הדף.
- <repeat_series_index>
- האינדקס המבוסס על אפסים של סדרת הנתונים כדי לחשב כמה סמלים צריך למקם בנקודה הזו.
- <scaling_factor>
- הערך של סדרת נתוני המקור מותאם לערך מ-0 עד 1 ומוכפל בערך הזה כדי לקבוע כמה סמנים להציב בנקודה הזו. ערכים חלקיים נחתכים.
- <stacking_direction>
- כיוון הערימה: "h" (אותיות קטנות) לרוחב או "V" (אותיות רישיות) לפורמט אנכי.
- <icon_size>
- הגודל של כל סמן, בפיקסלים. הערכים הבאים נתמכים: 12, 16, 24.
- <fill_color>
- צבע המילוי של הסמל, כצבע HTML הקסדצימלי בן שלוש או שש ספרות (ללא סימן #).
- <outline_color>
- צבע המתאר של הסמל, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #).
- <spacing>
- כמה מקום צריך להוסיף בין כל סמן במקבץ, בפיקסלים.
- <alignment>
- מחרוזת אופציונלית שמתארת את היישור והקיזוז של הסמל.
דוגמה
בדוגמה הזו נעשה שימוש בסדרת נתוני דמה שנייה. היא לא עוברת רינדור בתרשים, אלא משמשת לשטח של כל המקבצים באופן שווה, החל מהחלק התחתון של התרשים.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
ערימה ווריאציית צבעים (cm_repeat_color
)
ניתן לשנות את הגובה והצבע של ערימת סמלים, בהתאם לערך הנתונים בנקודה ספציפית.
תחביר
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>
- הסמל לשימוש. מציינים מחרוזת מזהה המזהה אחת מהתמונות המפורטות בסוף הדף.
- <repeat_series_index>
- האינדקס המבוסס על אפסים של סדרת הנתונים כדי לחשב כמה סמלים צריך למקם בנקודה הזו.
- <scaling_factor>
- הערך של סדרת נתוני המקור מותאם לערך מ-0 עד 1 ומוכפל בערך הזה כדי לקבוע כמה סמנים להציב בנקודה הזו. ערכים חלקיים נחתכים.
- <stacking_direction>
- כיוון הערימה: "h" (אותיות קטנות) לרוחב או "V" (אותיות רישיות) לפורמט אנכי.
- <icon_size>
- הגודל של כל סמן, בפיקסלים. הערכים הבאים נתמכים: 12, 16, 24.
- <color_data_series>
- האינדקס המבוסס על אפסים של סדרת הנתונים שמשמש לשינוי צבע הסמלים.
- <low_color>
- ערך הצבע הנמוך בטווח, כצבע הקסדצימלי של שלוש או שש ספרות של HTML (ללא סימן #). הנתון הזה משויך לערך הנמוך ביותר האפשרי בטווח הנתונים הזמין.
- <middle_color>
- ערך הצבע האמצעי בטווח, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #). הוא משויך לערך האמצעי בטווח הנתונים הזמין.
- <high_color>
- ערך הצבע הגבוה בטווח, כצבע הקסדצימלי של שלוש או שש ספרות של HTML (ללא סימן #). הוא משויך לערך הגבוה ביותר האפשרי בטווח הנתונים הזמין.
- <outline_color>
- צבע המתאר של הסמל, כצבע הקסדצימלי של שלוש או שש ספרות ב-HTML (ללא סימן #).
- <spacing>
- כמה מקום צריך להוסיף בין כל סמן במקבץ, בפיקסלים.
- <alignment>
- מחרוזת אופציונלית שמתארת את היישור והקיזוז של הסמל.
דוגמה
|
chem= |