סקירה כללית
תרשים קישוטים הוא תצוגה חזותית שמראה זרימה מקבוצה של ערכים לקבוצה אחרת. הדברים שמתחברים אליהם נקראים צמתים, והחיבורים נקראים קישורים. מומלץ להשתמש במפתחות כדי להציג מיפוי של רבים לרבים בין שני דומיינים (למשל, אוניברסיטאות ומספר מדינות) או מספר מסלולים בקבוצת שלבים (למשל, מערכת Google Analytics משתמשת בסניקרים כדי להראות איך התנועה עוברת מדף מסוים לדפים אחרים באתר שלכם).
עבור הסקרנים, הם נקראים על ידי קפטן סאנקי, שיצר תרשים יעילות של מנוע קיטור שנעשה בו שימוש בחיצים עם רוחב באופן יחסי לאובדן חום.
הערה: יכול להיות שתרשים סאנקי עובר שינויים משמעותיים בגרסאות עתידיות של תרשימי Google.
יצירת תרשימים של skey בדפדפן מתבצעת באמצעות SVG או VML, בהתאם לדפדפן של המשתמש. קוד הפריסה של sankey של Google נגזר מקוד פריסת sankey של D3.
הערה: תרשימי המפתח של Google לא זמינים ב-Microsoft Internet Explorer 8 ובגרסאות קודמות.
דוגמה פשוטה
נניח שיש לכם שתי קטגוריות, א' ו-ב', שמתחברות לשלוש קטגוריות אחרות, X, Y ו-Z. חלק מהחיבורים האלה כבדים יותר מאחרים. לדוגמה, ל-B יש חיבור דק ל-X וחיבור הרבה יותר עמוק ל-Y.
נסו להעביר את העכבר מעל אחד מהקישורים כדי להדגיש את החיבור.
כדי ליצור תרשים sanki, צרו קבוצה של שורות עם מידע על כל חיבור: מ-, אל ומשקל. לאחר מכן צריך להשתמש בשיטה google.visualization.Sankey()
כדי להפעיל את התרשים, ולאחר מכן בשיטה draw()
כדי לעבד אותו:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'A', 'X', 5 ], [ 'A', 'Y', 7 ], [ 'A', 'Z', 6 ], [ 'B', 'X', 2 ], [ 'B', 'Y', 9 ], [ 'B', 'Z', 4 ] ]); // Sets chart options. var options = { width: 600, }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div id="sankey_basic" style="width: 900px; height: 300px;"></div> </body> </html>
הערה: רצוי להימנע ממחזורי נתונים: אם A מקשר אל עצמו, או מקשר אל B שמקושר ל-C שמקושר ל-A, התרשים לא יבצע עיבוד.
סניקרס רב-מפלסי
ניתן ליצור תרשים Sankey עם רמות מרובות של חיבורים:
תרשימי סאני יגרמו להוספת רמות לפי הצורך, ופריסה תתבצע באופן אוטומטי. הנה הקוד המלא לתרשים שלמעלה:
<html> <body> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_multiple" style="width: 900px; height: 300px;"></div> <script type="text/javascript"> google.charts.load("current", {packages:["sankey"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Brazil', 'Portugal', 5 ], [ 'Brazil', 'France', 1 ], [ 'Brazil', 'Spain', 1 ], [ 'Brazil', 'England', 1 ], [ 'Canada', 'Portugal', 1 ], [ 'Canada', 'France', 5 ], [ 'Canada', 'England', 1 ], [ 'Mexico', 'Portugal', 1 ], [ 'Mexico', 'France', 1 ], [ 'Mexico', 'Spain', 5 ], [ 'Mexico', 'England', 1 ], [ 'USA', 'Portugal', 1 ], [ 'USA', 'France', 1 ], [ 'USA', 'Spain', 1 ], [ 'USA', 'England', 5 ], [ 'Portugal', 'Angola', 2 ], [ 'Portugal', 'Senegal', 1 ], [ 'Portugal', 'Morocco', 1 ], [ 'Portugal', 'South Africa', 3 ], [ 'France', 'Angola', 1 ], [ 'France', 'Senegal', 3 ], [ 'France', 'Mali', 3 ], [ 'France', 'Morocco', 3 ], [ 'France', 'South Africa', 1 ], [ 'Spain', 'Senegal', 1 ], [ 'Spain', 'Morocco', 3 ], [ 'Spain', 'South Africa', 1 ], [ 'England', 'Angola', 1 ], [ 'England', 'Senegal', 1 ], [ 'England', 'Morocco', 2 ], [ 'England', 'South Africa', 7 ], [ 'South Africa', 'China', 5 ], [ 'South Africa', 'India', 1 ], [ 'South Africa', 'Japan', 3 ], [ 'Angola', 'China', 5 ], [ 'Angola', 'India', 1 ], [ 'Angola', 'Japan', 3 ], [ 'Senegal', 'China', 5 ], [ 'Senegal', 'India', 1 ], [ 'Senegal', 'Japan', 3 ], [ 'Mali', 'China', 5 ], [ 'Mali', 'India', 1 ], [ 'Mali', 'Japan', 3 ], [ 'Morocco', 'China', 5 ], [ 'Morocco', 'India', 1 ], [ 'Morocco', 'Japan', 3 ] ]); // Set chart options var options = { width: 600, }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple')); chart.draw(data, options); } </script> </body> </html>
שליטה בצבעים
באמצעות תרשימי סקי אפשר להגדיר צבעים מותאמים אישית לצמתים ולקישורים. אפשר להגדיר גם צמתים וגם קישורים ללוחות צבעים בהתאמה אישית באמצעות אפשרויות ה-colors
שלהם (sankey.node.colors
ו-sankey.link.colors
, בהתאמה). אפשר גם לתת להם
צבעים שונים באמצעות האפשרות
colorMode
.
אם הצבעים אינם מותאמים אישית, ברירת המחדל היא לוח הצבעים הרגיל 'חומר'.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4', '#33a02c']; var options = { height: 400, sankey: { node: { colors: colors }, link: { colorMode: 'gradient', colors: colors } } };
אתם יכולים לשלוט בצבעי הקישורים, הצמתים והתוויות בעזרת אפשרויות ההגדרה. כאן אנו בוחרים שלושה עם גוון, אך בהירות שונות:
כך נראות אפשרויות אלה:
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae' } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
אפשר גם לשלוט בשקיפות של הקישורים באמצעות האפשרות sankey.link.color.fillOpacity
:
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae', fillOpacity: 0.8 } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
כדי ליצור גבול סביב הקישורים, צריך להשתמש באפשרויות sankey.link.color.stroke
ו-sankey.link.color.strokeWidth
:
אפשר לציין את צבע המשיכת בפורמט RGB או בשם באנגלית.
var options = { width: 750, height: 400, sankey: { node: { colors: [ '#a61d4c' ] }, link: { color: { stroke: 'black', strokeWidth: 1 } }, } };
התאמה אישית של תוויות
תוכלו להתאים אישית את הטקסט בתרשימי סאנקי באמצעות sankey.node.label.fontName
וחברים:
זוהי האפשרות שתופיע בתרשים שלמעלה:
var options = { width: 600, sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 14, color: '#871b47', bold: true, italic: true } } }, };
ניתן להתאים את המיקום של התוויות ביחס לצמתים באמצעות האפשרות sankey.node.labelPadding
:
בתרשים שלמעלה הוספנו מרווח פנימי של 30 פיקסלים בין התוויות לצמתים.
var options = { width: 600, sankey: { node: { labelPadding: 30 } }, };
כוונון צמתים
אפשר לשלוט ברוחב הצמתים באמצעות sankey.node.width
:
למעלה, הגדרנו את רוחב הצומת ל-2.
var options = { width: 600, sankey: { node: { width: 2 } }, };
תוכלו להתאים את המרחק בין הצמתים באמצעות sankey.node.nodePadding
:
בתרשים שלמעלה הגדרנו את sankey.node.nodePadding
ל-80.
var options = { width: 900, sankey: { node: { nodePadding: 80 } }, };
בטעינה
שם החבילה של google.charts.load
הוא "sankey"
:
google.charts.load("current" {packages: ["sankey"]});
שם הסיווג של התצוגה החזותית הוא google.visualization.Sankey
:
var visualization = new google.visualization.Sankey(container);
פורמט נתונים
שורות: כל שורה בטבלה מייצגת חיבור בין שתי תוויות. העמודה השלישית מציינת את עוצמת החיבור, ותשתקף ברוחב הנתיב שבין התוויות.
עמודות:
עמודה 0 | עמודה 1 | עמודה 2 | ... | עמודה N (אופציונלי) | |
---|---|---|---|---|---|
מטרה: | מקור | יעד | ערך | ... | תפקידים אופציונליים |
סוג הנתונים: | מחרוזת | מחרוזת | מספר טלפון | ... | |
תפקיד: | דומיין | דומיין | נתונים | ... | |
תפקידי עמודות אופציונליים: | ללא |
ללא |
ללא |
... |
אפשרויות הגדרה
שם | |
---|---|
אכיפת IFrame |
משרטט את התרשים בתוך מסגרת מוטבעת. (לתשומת ליבך, ב-IE8 המערכת מתעלמת מהאפשרות הזו וכל תרשימי IE8 מצוירים ב-i-frames.) סוג: בוליאני
ברירת מחדל: לא נכון
|
גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: גובה הרכיב שמכיל את הטקסט
|
ankey.iterations |
לעיתים, עם קאנומים רב-מפלסיים, לא יהיה ברור איפה כדאי למקם את הצמתים כדי שיהיה קל
לקרוא אותם. מנוע D3 לפריסת ניסויים עם פריסות צומת שונות, נעצר כאשר בוצעו סוג: מספר שלם
ברירת מחדל: 32
|
sankey.link |
קביעת המאפיינים של החיבורים בין צמתים. בשלב זה, כל המאפיינים קשורים לצבע: sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border (default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } סוג: אובייקט
ברירת מחדל: null
|
sankey.link.colorMode? |
מגדיר מצב צביעה עבור הקישורים בין צמתים. ערכים אפשריים:
האפשרות הזו מבטלת את sankey.link.color. סוג: מחרוזת
ברירת מחדל: 'ללא'
|
ankey.node |
שולטת במאפיינים של הצמתים (הקווים האנכיים בין קישורים): sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } סוג: אובייקט
ברירת מחדל: null
|
sankey.node.colorMode |
הגדרת מצב צביעה לצמתי סנקי. ערכים אפשריים:
סוג: מחרוזת
ברירת מחדל: 'ייחודי'
|
הסבר קצר |
אובייקט עם חברים להגדרה של אלמנטים שונים של הסבר קצר. כדי לציין מאפיינים של אובייקט זה, תוכלו להשתמש בסימון ליטרל של אובייקט, כפי שמוצג כאן: {textStyle: {color: '#FF0000'}, showColorCode: true} סוג: אובייקט
ברירת מחדל: null
|
הסבר קצר.isHtml |
אם המדיניות מוגדרת כ-True, יש להשתמש בהסברים ברינדור HTML (במקום ברינדור SVG) לפרטים נוספים, אפשר לקרוא את המאמר התאמה אישית של תוכן הסבר קצר. הערה: ההתאמה האישית של תוכן של הסבר קצר ב-HTML באמצעות תפקיד נתוני העמודה של ההסבר הקצר לא נתמכת על ידי התצוגה החזותית של תרשים הבועות. סוג: בוליאני
ברירת מחדל: לא נכון
|
הסבר קצר.textStyle |
אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. האובייקט הוא בפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה סוג: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: רוחב הרכיב המכיל
|
שיטות
Method | |
---|---|
draw(data, options) |
משרטט את התרשים. התרשים מקבל קריאות לשיטות נוספות רק אחרי שהאירוע
סוג החזרה: ללא
|
getBoundingBox(id) |
מחזירה אובייקט שמכיל את החלק השמאלי, העליון, הרוחב והגובה של רכיב התרשים
הערכים הם יחסיים למאגר של התרשים. קרא לזה אחרי שרטוט התרשים. סוג החזרה: אובייקט
|
getSelection() |
מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שניתן לבחור הן עמודות, רשומות אגדיות וקטגוריות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של אלמנטים לבחירה
|
setSelection() |
בחירת ישויות התרשים שצוינו. ביטול כל הבחירה הקודמת.
ישויות שניתן לבחור הן עמודות, רשומות אגדיות וקטגוריות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל פעם.
סוג החזרה: ללא
|
clearChart() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: ללא
|
אירועים
שם | |
---|---|
error |
מופעל כשמתרחשת שגיאה במהלך העיבוד של התרשים. מאפיינים: מזהה, הודעה
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ישות ויזואלית. מחזירה את האינדקסים של השורה והעמודה של הרכיב בטבלת הנתונים התואם. עמודה כלשהי משייכת תא בטבלת הנתונים, רשומה במקרא לעמודה (אינדקס השורות היא null) וקטגוריה לשורה (אינדקס העמודות הוא null). מאפיינים: שורה, עמודה
|
onmouseout |
מופעל כשהמשתמש מזיז את העכבר מעל ישות ויזואלית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. עמודה כלשהי משייכת תא בטבלת הנתונים, רשומה במקרא לעמודה (אינדקס השורות היא null) וקטגוריה לשורה (אינדקס העמודות הוא null). מאפיינים: שורה, עמודה
|
ready |
התרשים מוכן לקריאות חיצוניות לשיטות. אם רוצים ליצור אינטראקציה עם התרשים ועם שיטות השיחה אחרי השרטוט, צריך להגדיר event listener לאירוע הזה לפני שמתקשרים ל-method מאפיינים: ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות ויזואלית. כדי לראות מה נבחר, צריך להתקשר אל
מאפיינים: ללא
|
מדיניות נתונים
כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.