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

תרשים של Sankey

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

סקירה כללית

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

שיטות

‏Method
`draw(data, options)`	משרטט את התרשים. התרשים מקבל קריאות לשיטות נוספות רק אחרי שהאירוע `ready` מופעל. `Extended description`. סוג החזרה: ללא
`getBoundingBox(id)`	מחזירה אובייקט שמכיל את החלק השמאלי, העליון, הרוחב והגובה של רכיב התרשים `id`. הפורמט של `id` עדיין לא מתועד (מדובר בערכי החזרה של רכיבי handler של אירועים), הנה כמה דוגמאות: `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')` הערכים הם יחסיים למאגר של התרשים. קרא לזה אחרי שרטוט התרשים. סוג החזרה: אובייקט
`getSelection()`	מחזירה מערך של ישויות התרשים שנבחרו. ישויות שניתן לבחור הן עמודות, רשומות אגדיות וקטגוריות. בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון. `Extended description` . סוג החזרה: מערך של אלמנטים לבחירה
`setSelection()`	בחירת ישויות התרשים שצוינו. ביטול כל הבחירה הקודמת. ישויות שניתן לבחור הן עמודות, רשומות אגדיות וקטגוריות. בתרשים הזה אפשר לבחור רק ישות אחת בכל פעם. `Extended description` . סוג החזרה: ללא
`clearChart()`	ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: ללא

אירועים

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

מדיניות נתונים

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