אפשר להשתמש בכלי לעריכת הגדרות התרשים כדי להתאים אישית את אפשרויות העיצוב של ויזואליזציות ב-Looker שמשתמשות ב-HighCharts API. זה כולל את רוב התרשימים הקרטזיאניים, כמו תרשים העמודות, תרשים העמודות האופקיות ותרשים הקו, בין היתר.
אם התכונות של Gemini ב-Looker מופעלות, אתם יכולים להשתמש בעזרה בהגדרת תרשימים כדי ליצור אפשרויות עיצוב בפורמט JSON מתוך הנחיות מבוססות-טקסט, וכך להאיץ את ההתאמה האישית של התרשימים ב-Looker.
דרישות מוקדמות
כדי לגשת לכלי לעריכת הגדרות התרשים, צריכה להיות לכם הרשאה מסוג can_override_vis_config.
התאמה אישית של הצגה חזותית
כדי להתאים אישית תרשים באמצעות הכלי לעריכת הגדרות תרשים, פועלים לפי השלבים הבאים:
- להציג תרשים להמחשה ב-Explore, או לערוך תרשים להמחשה בטבלת Look או בלוח בקרה.
- פותחים את התפריט עריכה בתרשים.
בכרטיסייה Plot (תרשים), לוחצים על הלחצן Edit Chart Config (עריכת הגדרות התרשים). מוצגת תיבת הדו-שיח Edit Chart Config (עריכת הגדרות התרשים).
החלונית Chart Config (Source) מכילה את ה-JSON המקורי של התרשים ולא ניתן לערוך אותו.
בחלונית Chart Config (Override) מופיע קובץ ה-JSON שאמור להחליף את קובץ ה-JSON של המקור. כשפותחים את תיבת הדו-שיח Edit Chart Config (עריכת הגדרות התרשים) בפעם הראשונה, Looker מאכלס את החלונית עם קובץ JSON של ברירת מחדל. אפשר להתחיל עם ה-JSON הזה, או למחוק אותו ולהזין JSON תקין של HighCharts.
בוחרים בקטע Chart Config (Override) (הגדרות תרשים (שינוי ברירת מחדל)) ומזינים JSON תקין של HighCharts. הערכים החדשים יחליפו את כל הערכים בקטע הגדרות התרשים (מקור).
- בקטע דוגמאות מופיעות דוגמאות ל-JSON תקין של HighCharts.
- Looker מקבל כל ערך JSON תקין. Looker לא מקבל פונקציות, תאריכים או ערכים לא מוגדרים.
לוחצים על <> (עיצוב קוד) כדי לאפשר ל-Looker לעצב את ה-JSON בצורה תקינה.
לוחצים על תצוגה מקדימה כדי לבדוק את השינויים.
לוחצים על אישור כדי להחיל את השינויים. ההדמיה תוצג באמצעות ערכי ה-JSON המותאמים אישית.
אחרי שמתאימים אישית את התרשים, אפשר לשמור אותו. אם צפיתם בתצוגה החזותית בניתוח, שמרו את הניתוח. אם ערכתם Look או לוח בקרה, לוחצים על שמירה.
אם תנסו לצפות בתצוגה מקדימה של קוד שמכיל JSON לא תקין, תוצג לכם הודעת השגיאה Invalid JSON detected ב-Looker. כדי לנקות קוד JSON לא תקין, אפשר להשתמש באפשרות תיקון אוטומטי של הקוד בתחתית החלונית הגדרות התרשים (שינוי).
אם רוצים לערוך את אפשרויות ברירת המחדל של התרשים, קודם צריך להסיר את כל השינויים שביצעתם בכלי לעריכת הגדרות התרשים, ואז להחליף אותם. צריך לפעול לפי השלבים הבאים:
- בכרטיסייה Plot (תרשים), לוחצים על הלחצן Edit Chart Config (עריכת הגדרות התרשים). מוצגת תיבת הדו-שיח Edit Chart Config (עריכת הגדרות התרשים).
- מעתיקים את הטקסט בחלונית Chart Config (Override).
- לוחצים על הלחצן Clear Chart Overrides (מחיקת שינויים בתרשים) כדי למחוק את כל השינויים.
- לוחצים על אישור.
- עורכים את ההצגה החזותית באמצעות אפשרויות ברירת המחדל.
- בכרטיסייה Plot (תרשים), לוחצים על הלחצן Edit Chart Config (עריכת הגדרות התרשים). מוצגת תיבת הדו-שיח Edit Chart Config (עריכת הגדרות התרשים).
- מזינים קוד JSON תקין של HighCharts בחלונית Chart Config (Override) (הגדרת תרשים (שינוי ברירת המחדל)). אפשר להשתמש בטקסט שהעתקתם בשלב 2 כתבנית, אבל חשוב לבדוק את השינויים באמצעות הלחצן תצוגה מקדימה כדי לוודא שאין התנגשויות.
- לוחצים על אישור.
עיצוב מותנה עם series formatters
עורך הגדרות התרשים מקבל את רוב קובצי ה-JSON התקינים של HighCharts. הוא מקבל גם את מאפיין series formatters, שקיים רק ב-Looker. לכל סדרה יכולים להיות כמה מעצבים כדי לשלב כללי סגנון שונים.
המאפיין series formatters מקבל שני מאפיינים: select ו-style.
- מזינים ביטוי לוגי במאפיין
selectכדי לציין אילו ערכי נתונים יעברו עיצוב. - מזינים קוד JSON במאפיין
styleכדי לציין איך לעצב את ערכי הנתונים.
לדוגמה, קובץ ה-JSON הבא יצבע כל ערך נתונים בכתום אם הוא גדול מ-380 או שווה לו:
{
series: [{
formatters: [{
select: 'value >= 380',
style: {
color: 'orange'
}
}]
}]
}

בקטעים הבאים מפורטים הערכים האפשריים של המאפיינים select ו-style.
המאפיין select
אפשר להשתמש בערכים הבאים בביטוי select:
-
value: המשתנה הזה מחזיר את הערך של הסדרה. אפשר להשתמש בערך הזה בהשוואות, כמו בדוגמאות הבאות:- הביטוי
select: value > 100תואם לשורות שבהן הערכים גדולים מ-100. - הביטוי
select: value > VIEW_NAME.FIELD_NAMEמתאים לשורות שבהן הערכים גדולים מערך של שדה אחר באותה שורה. דוגמה מופיעה בקטע השוואה בין סדרת צבעים לבין ערכים אחרים של סדרות. - הביטוי
select: value > meanמתאים לשורות שהערכים שלהן גדולים מהממוצע של הסדרה. דוגמה מופיעה בקטע השוואה של ערכי סדרות לערך הממוצע או לערך החציון. - הביטוי
select: value > medianמתאים לשורות שהערכים שלהן גדולים מהערך החציוני של הסדרה הזו. דוגמה מופיעה בקטע השוואה של ערכי סדרות לערך הממוצע או לערך החציון.
- הביטוי
-
max: משתמשים ב-select: maxכדי לטרגט את ערך הסדרה עם הערך המקסימלי. -
min: משתמשים ב-select: minכדי לטרגט את ערך הסדרה עם הערך המינימלי. -
percent_rank: המשתנה הזה מכוון לערך הסדרה עם אחוזון ספציפי. לדוגמה, אפשר להשתמש בערךselect: percent_rank >= 0.9כדי לטרגט ערכים של סדרות באחוזון התשעים. -
name: המשתנה הזה מחזיר את ערך המאפיין של הסדרה. לדוגמה, אם יש לכם תרשים שמציג הזמנות שנמכרו, בוטלו והוחזרו, תוכלו להשתמש ב-select: name = Soldכדי לטרגט את הסדרה שבה ערך המאפיין הוא Sold. AND/ORמשתמשים ב-ANDוב-ORכדי לשלב כמה ביטויים לוגיים.
כדי לראות איך הביטויים האלה מיושמים בכלי לעריכת הגדרות התרשים, אפשר לעיין בדוגמה צביעת ערכי המקסימום, המינימום והאחוזון.
המאפיין style
אפשר להשתמש במאפיין style כדי להחיל סגנונות שנתמכים ב-HighCharts. לדוגמה, אפשר להשתמש ב-style.color כדי לצבוע את ערכי הסדרה, ב-style.borderColor כדי לצבוע את גבולות הסדרה וב-style.borderWidth כדי להגדיר את רוחב הגבול של הסדרה. רשימה מלאה יותר של אפשרויות סגנון מופיעה במאמר אפשרויות Highcharts ל-series.column.data.
לתרשימי קו, משתמשים ב-style.marker.fillColor וב-style.marker.lineColor במקום ב-style.color. רשימה מלאה יותר של אפשרויות לסגנון קו מופיעה במאמר אפשרויות Highcharts ל-series.line.data.marker.
כדי לראות איך מיושם עיצוב צבעים בעורך הגדרות התרשים, אפשר לעיין בדוגמה צביעת ערכי המקסימום, המינימום והאחוזון.
מטא-נתונים של שדות
בתפריט הנפתח Field metadata (מטא-נתונים של שדה) אפשר להעתיק את שם הסדרה של כל שדה בתרשים. אפשר להשתמש בשם הסדרה הזה באמצעות המאפיין series formatters כדי להשוות ערכים מסדרות שונות. דוגמה מופיעה בקטע השוואה בין סדרת צבעים לבין ערכים אחרים של סדרות.
דוגמאות
בקטעים הבאים מופיעות דוגמאות לתרחישי שימוש נפוצים בכלי לעריכת הגדרות תרשימים. רשימה מלאה של המאפיינים שאפשר לערוך מופיעה במאמרי העזרה של ה-API של HighCharts.
- שינוי צבע הרקע וצבע הטקסט של הציר
- התאמה אישית של צבע תיאור הכלי
- הוספת הערות וכתוביות לתרשים
- הוספת פסי ייחוס אנכיים
- צביעת הערכים המקסימליים, המינימליים והאחוזוניים
שינוי צבע הרקע וצבע הטקסט של הציר
כדי לשנות את צבע הרקע של תרשים, משתמשים במאפיין chart.backgroundColor.
באופן דומה, כדי לשנות את צבע הטקסט של הצירים בתרשים, משתמשים במאפיינים הבאים:
קובץ ה-JSON הבא של HighCharts משנה את צבע הרקע של התרשים לסגול, ואת הטקסט של הכותרות והתוויות של הצירים ללבן.
{
chart: {
backgroundColor: "purple"
},
xAxis: {
labels: {
style: {
color: "white"
}
},
title: {
style: {
color: "white"
}
}
},
yAxis: {
labels: {
style: {
color: "white"
}
},
title: {
style: {
color: "white"
}
}
}
}

התאמה אישית של צבע תיאור הכלים
כדי להתאים אישית את הצבע של תיאור הכלי, משתמשים במאפיינים הבאים:
קובץ ה-JSON הבא של HighCharts משנה את צבע הרקע של תיאור הכלי לצבע ציאן, ואת צבע הטקסט בתיאור הכלי לשחור.
{
tooltip: {
backgroundColor: "cyan",
style: {
color: "black"
}
}
}

התאמה אישית של התוכן והסגנונות של תיאורי הכלים
כדי להתאים אישית את התוכן של תיאור הכלי, משתמשים במאפיינים הבאים:
קוד ה-JSON הבא של HighCharts משנה את פורמט הכלי לטיפים כך שהערך של ציר ה-X יופיע בחלק העליון של הכלי לטיפים בגופן גדול יותר, ואחריו תופיע רשימה של כל ערכי הסדרות בנקודה הזו.
בדוגמה הזו נעשה שימוש בפונקציות ובמשתנים הבאים של HighCharts:
-
{key}הוא משתנה שמחזיר את הערך של ציר ה-X של הנקודה שנבחרה. (בדוגמה הזו, החודש והשנה). -
{#each points}{/each}היא פונקציה שחוזרת על הקוד שמוקף בסוגריים לכל סדרה בתרשים. -
{series.name}הוא משתנה שמחזיר את שם הסדרה. -
{y:.2f}היא משתנה שמחזיר את הערך של ציר ה-y של הנקודה שנבחרה, מעוגל לשני מקומות אחרי הנקודה העשרונית.-
{y}הוא משתנה שמחזיר את הערך של ציר ה-y של הנקודה שנבחרה. -
{variable:.2f}מעגלת אתvariableלשתי ספרות אחרי הנקודה העשרונית. במסמכי התיעוד של Highcharts בנושא תבניות יש דוגמאות נוספות לעיצוב ערכים.
-
{
tooltip: {
format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
shared: true
},
}

הוספת הערות וכתוביות לתרשים
כדי להוסיף הערה, משתמשים במאפיין annotations. כדי להוסיף כיתוב לתרשים, משתמשים במאפיין caption.
כדי לקבל את הקואורדינטות של נקודה, לוחצים על Inspect Point Metadata (בדיקת מטא-נתונים של נקודה) בחלק העליון של תיבת הדו-שיח Edit Chart Config (עריכת הגדרות התרשים). לאחר מכן, מעבירים את מצביע העכבר מעל נקודה על הגרף שרוצים להוסיף לה הערה. מערכת Looker מציגה מזהה נקודה שאפשר להשתמש בו במאפיין annotations.labels.point.
קוד ה-JSON הבא של HighCharts מוסיף לתרשים שתי הערות שמסבירות את הירידה במספר הפריטים במלאי אחרי תקופות זמן מסוימות. בנוסף, מתווסף כיתוב בתחתית התרשים עם הסבר מפורט יותר על ההערות.
{
caption: {
text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
},
annotations: [{
labels: [{
point: "inventory_items.count-60-79",
text: "Clearance sale"
},
{
point: "inventory_items.count-80+",
text: "Thrown away"
},
]
}]
}

הוספת הערות דינמיות
אפשר גם להשתמש בפרמטרים annotationsSource ו-annotationsTarget כדי להשתמש בנתונים משדה כהערה.
כדי לקבל את שמות השדות, אפשר להשתמש בתפריט הנפתח מטא-נתונים של שדות. שימו לב שהשדה annotationsTarget חייב להיות מדד.
קובץ ה-JSON הבא של HighCharts משתמש בערך מהשדה orders.annotations כהערה בשדה orders.count:
{
annotations: [{
labels: [{
annotationsSource: 'orders.annotations',
annotationsTarget: 'orders.count'
}]
}]
}

הוספת פסי ייחוס אנכיים
כדי להוסיף פס אנכי להשוואה, משתמשים במאפיין xAxis.plotBands.
קובץ ה-JSON הבא של HighCharts מוסיף פס אנכי להשוואה בין 24 בנובמבר 2022 ל-29 בנובמבר 2022 כדי לציין תקופת מכירות. בנוסף, מתווספת כתובית בתחתית התרשים שמסבירה את המשמעות של הטווח.
שימו לב שהמאפיינים to ו-from של xAxis.plotBands צריכים להתאים לערכי הנתונים בתרשים. בדוגמה הזו, הנתונים מבוססים על זמן, ולכן המאפיינים מקבלים ערכים של חותמת זמן בפורמט Unix (1669680000000 ל-29 בנובמבר 2022 ו-1669248000000 ל-24 בנובמבר 2022). פורמטים של תאריכים שמבוססים על מחרוזות, כמו MM/DD/YYYY ו-DD-MM-YY, לא אפשריים במאפייני HighCharts to ו-from.
{
caption: {
text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
},
xAxis: {
plotBands: [{
to: 1669680000000,
from: 1669248000000,
label: {
text: 'BFCM Sale Period'
}
}]
},
}

הוספת קווים מנוקדים ומקווקווים
כדי לשנות קווים רציפים לקווים מנוקדים או מקווקווים, משתמשים במאפיין series.dashStyle.
השינויים הבאים ב-JSON של HighCharts משנים את מאפיין dashStyle של סדרת Customers לקו מקווקו, ואת מאפיין dashStyle של סדרת Sales לקו מנוקד.
{
series: [{
name: 'Customers',
dashStyle: 'Dash'
}, {
name: 'Sales',
dashStyle: 'Dot'
}]
}

צביעת הערכים המקסימליים, המינימליים והאחוזוניים
במאמר Getting the most out of Looker visualizations cookbook: Conditional formatting customization in Cartesian charts (הפקת המרב מהוויזואליזציות של Looker: התאמה אישית של עיצוב מותנה בתרשימים קרטזיים) מופיעה דוגמה מפורטת לצביעת ערכי המקסימום, המינימום והאחוזון של ויזואליזציה קרטזית.
סדרת הצבעים בהשוואה לערכים אחרים בסדרה
החל מ-Looker 25.0, הפרמטר formatters.select מאפשר להשוות את ערך הנתונים הנוכחי לערכים מסדרות אחרות.
לדוגמה, נניח שאתם רוצים לראות את מחיר המבצע הממוצע ואת מחיר המבצע החציוני בכמה ערים. השינויים הבאים ב-JSON של HighCharts משנים את הצבע של מחיר המכירה הממוצע לירוק אם הוא גדול ממחיר המכירה החציוני או שווה לו, ולחום ערמוני בכל מקרה אחר:
{
chart: {},
series: [{
name: 'Average Sale Price',
formatters: [{
select: 'value >= order_items.median_sale_price',
style: {
color: 'green',
dataLabels: {
color: 'green'
}
}
},
{
select: 'value < order_items.median_sale_price',
style: {
color: 'maroon',
dataLabels: {
color: 'maroon'
}
}
}
]
}, {
name: 'Median Sale Price'
}]
}

שימו לב שהשורה select: 'value >= order_items.median_sale_price' מתייחסת לשדה Median Sale Price (מחיר מבצע חציוני) בפורמט VIEW_NAME.FIELD_NAME. כדי להעתיק את הערך של השדה הזה ישירות, לוחצים על התפריט הנפתח Field metadata בתיבת הדו-שיח Edit Chart Config ובוחרים את שם השדה.

השוואה בין ערכי סדרות לבין ערך הממוצע או החציון
הפרמטר formatters.select תומך במילת המפתח mean ב-Looker 25.0 ומעלה, ובמילת המפתח median ב-Looker 25.2 ומעלה. מילות המפתח האלה מאפשרות להשוות את ערך הנתונים הנוכחי לממוצע או לחציון של הסדרה.
לדוגמה, אפשר להשתמש בתרשים שמציג את הרווח מהזמנות בכל חודש בשנה שעברה. השינויים הבאים ב-JSON של HighCharts משנים את הצבע של כל עמודה לאפור (שמיוצג על ידי הקוד ההקסדצימלי #aaa) אם הרווח מההזמנה נמוך מהרווח הממוצע מההזמנה:
{
chart: {},
series: [{
name: 'Order Profit',
formatters: [{
select: 'value < mean',
style: {
color: '#aaa'
}
}]
}]
}

כדי להשוות את ערך הסדרה לחציון במקום לממוצע, משנים את השורה select: 'value < mean' ל-select: 'value < median'.
שימוש בתבניות כדי לשמור ולשתף הגדרות
אפשר לשמור הגדרה כתבנית כדי להשתמש בה שוב בהדמיות אחרות או לשתף אותה כנקודת התחלה למשתמשים אחרים.

שמירת תבנית
כדי לשמור את הקוד כתבנית בזמן עריכת JSON של HighCharts בכלי לעריכת הגדרות תרשים:
- בתיבת הדו-שיח 'עורך הגדרות התרשים', לוחצים על שמירה כתבנית.
- נותנים לתבנית שם ייחודי.
- מזינים תיאור שמסביר למשתמשים אחרים מה התבנית עושה.
- עורכים את הקוד וצופים בתצוגה מקדימה לפי הצורך.
- לוחצים על שמירה כדי לאמת את הקוד.
- מתקנים את כל שגיאות האימות.
- לוחצים שוב על שמירה כדי לשמור את התבנית.
כשיוצרים תבנית, חשוב לזכור את השיקולים הבאים:
- משתמשים שמוטמעים לא יכולים ליצור, לערוך או להחיל תבניות.
- כל המשתמשים במופע שלכם שלא משובצים בו, שיש להם גישה לכלי לעריכת הגדרות התרשים, יוכלו לראות את התבנית.
- לא כל התבניות מתאימות לכל סוגי התצוגות החזותיות. כדאי לציין בשדה תיאור באיזה סוג של תרשים להשתמש בתבנית.
שימוש בתבנית
אפשר להחיל תבנית על התצוגה החזותית הנוכחית. כשמחילים תבנית, חשוב לזכור את הדברים הבאים:
- החלת תבנית מחליפה כל קוד שכתבתם בכלי לעריכת הגדרות התרשים.
- לא כל התבניות מתאימות לכל סוגי התצוגות החזותיות. לדוגמה, אם מחבר התבנית כתב קוד לתרשים עמודות, יכול להיות שהקוד הזה ישפיע בצורה שונה על תרשים קו.
כדי להחיל תבנית:
- בתיבת הדו-שיח 'עורך הגדרות התרשים', לוחצים על תבניות שמורות.
- לוחצים על תבנית ואז על החלת התבנית.
- לוחצים על Continue.
מערכת Looker תחיל את התבנית, ותוכלו להמשיך לערוך בעורך ההגדרות של התרשים.
מחיקת תבנית
כדי למחוק תבנית:
- בתיבת הדו-שיח 'עורך הגדרות התרשים', לוחצים על תבניות שמורות.
- לוחצים על סמל האפשרויות הנוספות (3 נקודות) לצד התבנית שרוצים למחוק.
- לוחצים על Delete.
כשמסיימים לבצע שינויים, לוחצים על הלחצן X בתיבת הדו-שיח Saved Templates (תבניות שמורות) כדי לחזור לתיבת הדו-שיח Chart Config Editor (עורך הגדרות התרשים).
עריכת תבנית
כדי לערוך תבנית:
- בתיבת הדו-שיח 'עורך הגדרות התרשים', לוחצים על תבניות שמורות.
- לוחצים על סמל האפשרויות הנוספות (3 נקודות) לצד התבנית שרוצים לערוך.
- לוחצים על Edit.
- כשמסיימים לבצע את השינויים, לוחצים על שמירה.
יצירת סוגים חדשים של תרשימים להמחשה
אתם יכולים להשתמש בכלי לעריכת הגדרות התרשים כדי ליצור סוגים של תצוגות חזותיות שלא נכללים בסוגי התצוגות החזותיות שמוגדרים כברירת מחדל ב-Looker. במאמרים הבאים מפורטות דוגמאות לחלק מהוויזואליזציות שאפשר לעצב באמצעות הכלי לעריכת הגדרות התרשים:
- יצירת תרשים כדורים באמצעות כלי ההגדרה של התרשימים
- יצירת תרשים לוח מחוונים מלא באמצעות הכלי לעריכת הגדרות תרשימים
- יצירת תרשים זרימה באמצעות הכלי לעריכת הגדרות תרשים
- יצירת תרשים מפת עץ באמצעות הכלי לעריכת הגדרות תרשימים
- יצירת תרשים סאנקי באמצעות הכלי לעריכת הגדרות התרשים
- יצירת תרשים גלגל תלות באמצעות הכלי לעריכת הגדרות תרשים
- יצירת דיאגרמת ון באמצעות הכלי לעריכת הגדרות תרשים
- יצירת תרשים קרני שמש באמצעות הכלי לעריכת הגדרות תרשימים
- יצירת תרשים פריטים באמצעות הכלי לעריכת הגדרות תרשים