דף זה תורגם על ידי Cloud Translation API.

תרשים סאנקי

סקירה כללית
דוגמה פשוטה
מפתחות סאנדיי רב-שלביים
שליטה בצבעים
התאמה אישית של הגופנים
התאמת צמתים
בטעינה
פורמט נתונים
אפשרויות הגדרה
שיטות
אירועים
המדיניות בנושא נתונים

סקירה כללית

תרשים סאנקי הוא המחשה חזותית של זרימה מקבוצת ערכים אחת לאחרת. הדברים שמקשרים נקראים צמתים והחיבורים נקראים קישורים. כדאי להשתמש במפתחות סאפים כשרוצים להציג מיפוי של מספר רב לרבים בין שני דומיינים (למשל, אוניברסיטאות וענפי תעשייה) או בין נתיבים מרובים בקבוצה של שלבים (למשל, ב-Google Analytics נעשה שימוש במפתחות החלפה כדי להראות איך התנועה עוברת מדפים לדפים אחרים באתר).

הם נקראים על שם קפטן סאנקי, שיצר תרשים יעילות של מנוע קיטור שהשתמש בחיצים עם מידות רוחב פרופורציונליות לאובדן החום.

הערה: יכול להיות שבגרסאות הבאות של Google Charts יתבצעו שינויים משמעותיים בתרשים ההצפנה.

העיבוד של דיאגרמות סאנקי בדפדפן הוא ב-SVG או ב-VML, בהתאם לדפדפן של המשתמש. קוד פריסת Sankey של Google נגזר מקוד הפריסה Sankey של D3.

הערה: תרשימי הצפנה של Google לא זמינים ב-Microsoft Internet Explorer 8 ובגרסאות קודמות.

דוגמה פשוטה

נניח שיש לכם שתי קטגוריות, א' וב', שמתחברים לשלוש קטגוריות אחרות: X, Y ו-Z. חלק מהחיבורים האלה כבדים יותר מאחרים. למשל, ל-B יש חיבור דק ל-X וחיבור עבה יותר ל-Y.

נסו להעביר את העכבר מעל אחד הקישורים כדי להדגיש את החיבור.

כדי ליצור תרשים סאנקי, צריך לספק קבוצה של שורות שכל אחת מהן מכילה מידע על חיבור אחד: מהמאת, אל ומשקל. עכשיו משתמשים בשיטה 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, התרשים לא יוצג.

מפתחות הצפנה רב-שלביים

אפשר ליצור תרשים סאנקי עם כמה רמות של חיבורים:

בתרשימי סאנקי תוכלו להוסיף רמות לפי הצורך, ולפרוס אותן באופן אוטומטי. הנה הקוד המלא של התרשים שלמעלה:

<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 (אופציונלי)
מטרה:	מקור	יעד	ערך של Gpa education	...	תפקידים אופציונליים
סוג הנתונים:	string	string	number	...
תפקיד:	דומיין	דומיין	נתונים	...
תפקידים אופציונליים בעמודות:	ללא	ללא	ללא	...	הסבר קצר סגנון

אפשרויות הגדרה

שם
forceIFrame	משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames). סוג: בוליאני ברירת מחדל: false
גובה	גובה התרשים, בפיקסלים. סוג: מספר ברירת מחדל: גובה הרכיב שמכיל
sankey.iterations	כשמשתמשים במפתחות גישה רב-שלבית, לפעמים לא ברור איפה צריך למקם את הצמתים כדי לאפשר קריאות אופטימליות. מנוע הפריסה D3 ניסויים עם פריסות צמתים שונות, שיפסיקו לפעול לאחר ביצוע `sankey.iterations` ניסיונות. ככל שהמספר הזה גדול יותר, כך הפריסה נאה יותר של סימני 'קוד' מורכבים, אבל יש לכך עלות: נדרש יותר זמן לעיבוד של ה-snakey. לעומת זאת, ככל שהמספר קצר יותר, כך התרשימים יוצגו מהר יותר. סוג: integer ברירת מחדל: 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' ] } } Type: object (סוג אובייקט) ברירת מחדל: null
sankey.link.colorMode	הגדרת מצב צביעה לקישורים בין צמתים. ערכים אפשריים: `'source'` – הצבע של צומת המקור משמש לקישורים לכל צומתי היעד. `'target'` - הצבע של צומת היעד משמש לקישור לצמתים של המקור. `'gradient'` - הקישור בין צומת מקור וצומת יעד צבוע כהדרגתיות מצבע הצומת של המקור לצבע של צומת היעד. `'none'` - אפשרות ברירת המחדל. צבעי הקישורים יוגדרו לברירת המחדל (או לצבע כפי שצוין באפשרויות `sankey.link.color.fill` ו-`sankey.link.color.fillOpacity`). האפשרות הזו מבטלת את המדיניות sankey.link.color. סוג: מחרוזת ברירת מחדל: 'none'
sankey.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' ] } } Type: object (סוג אובייקט) ברירת מחדל: null
sankey.node.colorMode	הגדרת מצב צביעה לצמתים מסוג Sankey. ערכים אפשריים: `'unique'` – לכל צומת יהיה צבע ייחודי. סוג: מחרוזת ברירת מחדל: 'Unique'
הסבר קצר	אובייקט עם חברים להגדיר רכיבים שונים של הסבר קצר. כדי לציין את המאפיינים של האובייקט אפשר להשתמש בסימון מילולי של האובייקטים, כפי שמוצג כאן: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: object (סוג אובייקט) ברירת מחדל: null
tooltip.isHtml	אם המדיניות מוגדרת כ-True, צריך להשתמש בהסבר קצר על עיבוד HTML (ולא ב-SVG). למידע נוסף, אפשר לקרוא את המאמר התאמה אישית של תוכן הסבר קצר. הערה: התאמה אישית של התוכן בהסבר הקצר ב-HTML דרך תפקיד הנתונים בעמודה של הסבר קצר לא נתמכת בהמחשה החזותית של תרשים הבועות. סוג: בוליאני ברירת מחדל: false
tooltip.textStyle	אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } הערך `color` יכול להיות כל מחרוזת של צבע HTML, לדוגמה: `'red'` או `'#00cc00'`. ראו גם את `fontName` ואת `fontSize`. Type: object (סוג אובייקט) ברירת המחדל: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
רוחב	רוחב התרשים, בפיקסלים. סוג: מספר ברירת מחדל: רוחב הרכיב שמכיל

שיטות

שיטה
`draw(data, options)`	מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע `ready` מופעל. `Extended description`. סוג החזרה: ללא
`getBoundingBox(id)`	מחזירה אובייקט שמכיל את הרכיבים השמאליים, החלק העליון, הרוחב והגובה של רכיב התרשים `id`. הפורמט של `id` עדיין לא תועד (אלה הערכים המוחזרים של גורמים מטפלים באירועים), אבל הנה כמה דוגמאות: `var cli = chart.getChartLayoutInterface();` גובה השטח של התרשים `cli.getBoundingBox('chartarea').height` הרוחב של העמודה השלישית בסדרה הראשונה של תרשים עמודות או תרשים עמודות אנכי `cli.getBoundingBox('bar#0#2').width` תיבה תוחמת של מתקן התלייה החמישי בתרשים עוגה `cli.getBoundingBox('slice#4')` תיבת קישור של נתוני התרשים של תרשים אנכי (למשל, עמודה): `cli.getBoundingBox('vAxis#0#gridline')` תיבת קישור של נתוני התרשים של תרשים אופקי (למשל, עמודות): `cli.getBoundingBox('hAxis#0#gridline')` הערכים הם יחסיים למאגר התגים של התרשים. קוראים לפונקציה אחרי הצגת התרשים. Return Type (סוג החזרה): אובייקט
`getSelection()`	מחזירה מערך של ישויות התרשים שנבחרו. ישויות שניתן לבחור הן עמודות, רשומות מקרא וקטגוריות. עבור התרשים הזה, ניתן לבחור רק ישות אחת בכל רגע נתון. `Extended description` . סוג החזרה: מערך של רכיבי בחירה
`setSelection()`	בחירת ישויות התרשים שצוינו. ביטול הבחירה הקודמת. ישויות שניתן לבחור הן עמודות, רשומות מקרא וקטגוריות. בתרשים הזה ניתן לבחור רק ישות אחת בכל פעם. `Extended description` . סוג החזרה: ללא
`clearChart()`	ניקוי התרשים וכל המשאבים שהוקצו לו. סוג החזרה: ללא

אירועים

שם
`error`	מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
`onmouseover`	מופעל כשהמשתמש מעביר את העכבר מעל ישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. עמודה קשורה לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null). מאפיינים: שורה, עמודה
`onmouseout`	מופעל כשהמשתמש מזיז את העכבר מישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. עמודה קשורה לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null). מאפיינים: שורה, עמודה
`ready`	התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ושל שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את ה-method `draw`, ולקרוא לו רק אחרי שהאירוע הופעל. מאפיינים:ללא
`select`	מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר `getSelection()`. מאפיינים:ללא

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.