Treemaps

  1. סקירה כללית
  2. דוגמה
  3. המיטב
  4. טיפים לשימוש בכלי
  5. בטעינה
  6. פורמט נתונים
  7. אפשרויות הגדרה
  8. שיטות
  9. אירועים
  10. מדיניות נתונים

סקירה כללית

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

הגודל הכולל של התרשים נקבע לפי גודל הרכיב שמכיל שהוספת לדף. אם יש לך צמתי עלים שהשמות שלהם ארוכים מדי להצגה, השם יקוצר בשלוש נקודות (...).

דוגמה

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

המיטב

אפשר לציין אם צריך להדגיש רכיבים מסוימים, ולהגדיר צבעים ספציפיים לרכיבים מסוימים שישמשו במקרה כזה. כדי להפעיל את ההדגשה, צריך להגדיר את הקוד highlightOnMouseOver:true (לגרסה 49 או ישנה יותר) או את enableHighlight: true (לגרסה 50 ואילך). משם אפשר להגדיר צבעים להדגשה באמצעות הרכיבים באמצעות האפשרויות השונות של HighlightColor. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

טיפים לכלים

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

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

בתרשים שלמעלה, אנחנו מגדירים פונקציה שנקראת showStaticTooltip שפשוט מחזירה מחרוזת עם ה-HTML שתוצג בכל פעם שהמשתמש מרחף מעל תא של מפת עץ. רוצה לנסות? זהו הקוד שייווצר באופן הבא:

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

הפונקציה generateTooltip יכולה להיות כל JavaScript שתרצו. בדרך כלל כדאי להשתמש בהסברים קצרים שמשתנים בהתאם לערכי הנתונים. הדוגמה הבאה מראה איך לגשת לכל שדה בטבלת הנתונים.

אם תציבו את העכבר מעל התאים במפת העץ שלמעלה, תראו הסבר קצר שונה לכל תא. לכל ההסברים על מפת העץ יש שלושה ערכים: row, size ו-value.

  • row: שורת התא מטבלת הנתונים
  • size: סכום הערך (עמודה 3) של התא הזה ושל כל הצאצאים שלו
  • value: צבע התא, מבוטא כמספר בין 0 ל-1

בקטע showFullTooltip, המחרוזת שאנחנו מחזירים היא תיבת HTML עם חמש שורות:

  • בשורה 1 מוצגת השורה המתאימה מטבלת הנתונים, תוך שימוש ליברלי ב-data.getValue.
  • שורה 2 מציינת מה השורה, שהיא בדיוק הפרמטר row.
  • בשורה 3 מופיע מידע מעמודה 3 בטבלת הנתונים: הסכום של עמודה 3 משורה זו והערכים של צאצאים.
  • בשורה 4 מוצג מידע מעמודה 4 בטבלת הנתונים. זה הערך, אבל מיוצג כמספר בין 0 ל-1 שתואם לצבע של התא.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

בטעינה

שם החבילה של google.charts.load הוא "treemap".

  google.charts.load("current", {packages: ["treemap"]});

שם הכיתה הוא google.visualization.TreeMap.

  var visualization = new google.visualization.TreeMap(container);

פורמט נתונים

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

טבלת הנתונים צריכה לכלול ארבע עמודות בפורמט הבא:

  • עמודה 0 עד [string] מזהה עבור הצומת הזה. הוא יכול להיות כל מחרוזת JavaScript חוקית, כולל רווחים וכל אורך שהמחרוזת יכולה להכיל. הערך הזה מוצג ככותרת הצומת.
  • עמודה 1 - [מחרוזת] - המזהה של צומת האב. אם הצומת הזה שורשי, יש להשאיר אותו ריק. לכל מפת עץ מותר להשתמש בשורש אחד בלבד.
  • עמודה 2 - [מספר] - גודל הצומת. ניתן להשתמש בכל ערך חיובי. הערך הזה קובע את גודל הצומת, מחושב ביחס לכל שאר הצמתים שמוצגים כרגע. לגבי צמתים ללא עלים, המערכת מתעלמת מהערך הזה ומחושבת לפי הגודל של כל הצאצאים שלו.
  • עמודה 3 - [אופציונלי, מספר] - ערך אופציונלי המשמש לחישוב צבע עבור הצומת הזה. כל ערך יכול להיות חיובי או שלילי. ערך הצבע מחושב מחדש בסולם מ-minColorValue עד maxColorValue, ואז הצומת מוקצה בצבע הדרגתי בין minColor ל-maxColor.

אפשרויות תצורה

שם
Enablehighlight (לגרסה 50 ואילך)

המדיניות הזו קובעת אם הרכיבים יוצגו אפקטים מודגשים. טריגר ברירת המחדל הוא העברת העכבר. אפשר להגדיר את הגורם המפעיל באמצעות eventsConfig. אם היא מוגדרת כ-true, ניתן לציין הדגשה של רכיבים שונים באמצעות אפשרויות highlightColor השונות.

סוג: בוליאני
ברירת מחדל: False
eventsConfig (עבור גרסה 50 ואילך)

תצורת האירוע להפעלת אינטראקציות של מפת עץ. פורמט להגדרת אינטראקציות:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
אם מערך התצורה לא מוגדר או חסר עבור אינטראקציה, המערכת תשתמש ב-default.
אם התצורה היא מערך ריק, האינטראקציה תושבת.
להגדרה תקינה, mouse_event נדרש וחייב להיות אירוע עכבר נתמך. לאחר מכן יכולים להיות לכם עד ארבעה צירופי מקשים אופציונליים.
אינטראקציות נתמכות:
הדגשה, ביטול הדגשה, שילוב, הצגת פירוט
אירועי עכבר נתמכים:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover' . הביטוי 'contextcontext' תואם לקליק הימני.
מפתחות נתמכים לשינוי אירוע בעכבר:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
לקבלת התצורה הנוכחית:
שיטת שיחה getEventsConfig().
דוגמה לשימוש ב-Control+Shift+Right_Click כדי לעבור בעץ:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Type: אובייקט
ברירת מחדל: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
צבע גופן

צבע הטקסט. מציינים ערך צבע ב-HTML.

סוג: מחרוזת
ברירת מחדל: #upload
משפחת פונטים

משפחת הגופנים לשימוש בכל הטקסט.

סוג: מחרוזת
ברירת מחדל: אוטומטי
גודל גופן

גודל הגופן של כל הטקסט, בנקודות.

סוג: מספר
ברירת מחדל: 12
forceIFrame

משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames).

סוג: בוליאני
ברירת מחדל: False
צבע צבע

הצבע של קטע הכותרת בכל צומת. מציינים ערך צבע ב-HTML.

סוג: מחרוזת
ברירת מחדל: #988f86
כותרתגובה

הגובה של קטע הכותרת עבור כל צומת, בפיקסלים (יכול להיות אפס).

מספר סוג
ברירת מחדל: 0
כותרתהדגשהצבע

צבע הכותרת של צומת להעביר את העכבר מעליו. יש לציין ערך צבע של HTML או null. אם הערך הוא null, הערך headerColor יובהר ב-35%.

סוג: מחרוזת
ברירת מחדל: null
מדגיש onOnOver (הוצא משימוש עבור גרסה 50+)

הוצא משימוש עבור גרסה 50+. עבור גרסה 50 ואילך, השתמש ב-enableHighlight. הגדרה זו קובעת אם רכיבים צריכים להציג אפקטים מודגשים כשמעבירים את העכבר מעלם. אם היא מוגדרת כ-true, ניתן לציין הדגשה של רכיבים שונים באמצעות אפשרויות highlightColor השונות.

סוג: בוליאני
ברירת מחדל: False
HintOpacity

כאשר maxPostDepth גדול מ-1, הצמתים שנמצאים מתחת לעומק הנוכחי מוצגים, hintOpacity מציין את מידת השקיפות. הוא צריך להיות בין 0 ל-1, ככל שהערך גבוה יותר, הצומת עמום.

סוג: מספר
ברירת מחדל: 0.0
צבע מלא

הצבע של מלבן עם הערך 3 בעמודה maxColorValue. מציינים ערך צבע HTML.

סוג: מחרוזת
ברירת מחדל: #00dd00
עומק מקסימלי

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

סוג: מספר
ברירת מחדל: 1
צבע הדגשה מקסימלי

צבע ההדגשה שישמש בצומת עם הערך הגבוה ביותר בעמודה 3. יש לציין ערך צבע של HTML או null. אם הערך הוא null, הערך הזה יהיה הערך של maxColor בצבעים בהירים ב-35%

סוג: מחרוזת
ברירת מחדל: null
maxPostDepth

כמה רמות של צמתים מעבר ל-maxDepth מוצגים באופן 'רמז'. צמתים מושמטים מוצגים כמלבנים מוצללים בתוך צומת במסגרת המגבלה של maxDepth.

סוג: מספר
ברירת מחדל: 0
ערך צבע מקסימלי

הערך המקסימלי המותר בעמודה 3. כל הערכים שגדולים מהערך הזה ייחתכו לערך הזה. אם היא מוגדרת לערך null, היא תוגדר לערך המקסימלי בעמודה.

סוג: מספר
ברירת מחדל: null
צבע כהה

הצבע של מלבן עם הערך 3 בעמודה באמצע, בין maxColorValue ל-minColorValue. מציינים ערך צבע ב-HTML.

סוג: מחרוזת
ברירת מחדל: #000000
הדגשה

צבע ההדגשה שישמש בצומת עם ערך של עמודה 3 ליד החציון של minColorValue ו-maxColorValue. צריך לציין ערך של צבע HTML או null. אם הערך הוא null, הערך של midColor יובהר ב-35%.

סוג: מחרוזת
ברירת מחדל: null
minצבע

הצבע של מלבן עם הערך בעמודה 3 של minColorValue. מציינים ערך צבע HTML.

סוג: מחרוזת
ברירת מחדל: #dd0000
minהדגשהצבע

צבע ההדגשה שישמש בצומת עם ערך של עמודה 3 קרוב יותר ל-minColorValue. יש לציין ערך צבע של HTML או null. אם הערך הוא null, הערך הזה יהיה minColor ועם בהירות של 35%

סוג: מחרוזת
ברירת מחדל: null
minColorValue

הערך המינימלי המותר בעמודה 3. כל הערכים שקטנים מכך יקוצרו לערך הזה. אם היא מוגדרת כ-null, היא תחושב כערך המינימלי בעמודה.

סוג: מספר
ברירת מחדל: null
ללא צבע

הצבע של מלבן שאין לו ערך בעמודה 3, והצומת הזה הוא עלה (או מכיל עלים בלבד). מציינים ערך צבע ב-HTML.

סוג: מחרוזת
ברירת מחדל: #000000
ללא הדגשה

הצבע שישמש עבור מלבן בצבע "no" כשהוא מודגש. יש לציין ערך צבע HTML או null. אם הערך הוא null, יוצג הערך של noColor שהבהיר באמצעות 35%.

סוג: מחרוזת
ברירת מחדל: null
הצג קנה מידה

בחירה אם להציג סולם צבעים הדרגתי מ-minColor עד maxColor לאורך החלק העליון של התרשים. יש לציין את הערך true כדי להציג את קנה המידה.

סוג: בוליאני
ברירת מחדל: False
טיפים לשדרוג

האם להציג הסברים קצרים.

סוג: בוליאני
ברירת מחדל: נכון
סגנון טקסט

אובייקט שמציין את סגנון הטקסט בתרשימים מסוימים שיש בהם טקסט באזור התוכן, כמו מפת העץ. לאובייקט יש את הפורמט הבא: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

השדה color יכול להיות כל מחרוזת צבע HTML, לדוגמה: 'red' או '#00cc00'. למידע נוסף יש לעיין ב-fontName וב-fontSize.

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
שם פריט

טקסט להצגה מעל לתרשים.

סוג: מחרוזת
ברירת מחדל: ללא שם
סגנון טקסט

אובייקט שמציין את סגנון הטקסט של הכותרת. לאובייקט יש את הפורמט הבא:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

השדה color יכול להיות כל מחרוזת צבע HTML, לדוגמה: 'red' או '#00cc00'. למידע נוסף יש לעיין ב-fontName וב-fontSize.

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
שימוש בממוצע משוקלל עבור AAggregation

האם להשתמש בממוצעים משוקללים לצבירה.

סוג: בוליאני
ברירת מחדל: False

שיטות

שיטה
draw(data, options)

משרטט את התרשים.

סוג החזרה: אין
getEventsConfig() (for v50+)

מחזירה את ההגדרה הנוכחית של האינטראקציה. אפשר לאמת את האפשרות eventsConfig

סוג החזרה: אובייקט
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

הטמעה רגילה של getSelection(). הרכיבים שנבחרו הם צמתים. אפשר לבחור רק צומת אחד בכל פעם.

סוג החזרה: מערך של רכיבי בחירה
setSelection()

הטמעה רגילה של setSelection(). הרכיבים שנבחרו הם צמתים. אפשר לבחור רק צומת אחד בכל פעם.

סוג החזרה: אין
goUpAndDraw()

מזיזים את העץ ברמה אחת מעליו ומשרטטים אותו מחדש. לא מתבצעת שגיאה אם הצומת הוא הצומת הבסיסי (root). הוא מופעל באופן אוטומטי כשהמשתמש לוחץ לחיצה ימנית על צומת.

סוג החזרה: אין
getMaxPossibleDepth()

מחזירה את העומק המקסימלי האפשרי עבור התצוגה הנוכחית.

סוג החזרה: מספר
clearChart()

ניקוי התרשים ושחרור כל המשאבים שהוקצו לו.

סוג החזרה: אין

אירועים

כדי לקבל טריגרים ניתנים להגדרה של אירוע, יש לעיין ב-eventsConfig.
שם
onmouseover

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

מאפיינים: שורה
highlight (for v50+)

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

מאפיינים: שורה
onmouseout

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

מאפיינים: שורה
unhighlight (for v50+)

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

מאפיינים: שורה
ready

מופעל כשהתרשים מוכן לקריאות שיטה חיצוניות. כדי ליצור אינטראקציה עם התרשים ושיטות השיחה אחרי השרטוט, צריך להגדיר למאזינים אירוע לפני שמתקשרים לשיטת draw. אפשר להתקשר אליהם רק אחרי שהאירוע הופעל.

נכסים: ללא
rollup

מופעל כשהמשתמש מנווט חזרה אל העץ. ברירת המחדל של ההפעלה היא לחיצה ימנית. אפשר להגדיר אותו באמצעות eventsConfig מגרסה 50 ואילך. נכס השורה שמועבר ל-handler של האירוע הוא השורה של הצומת שהמשתמש מנווט אליו מ, ולא השורה שדרכה המשתמש מנווט .

מאפיינים: שורה
select

מופעל כשמשתמש לוחץ על פירוט או מגולל צומת. מופעל גם כאשר מתבצעת קריאה לשיטה setSelection() או goUpAndDraw(). כדי לבדוק איזה צומת נבחר, אפשר להתקשר למספר getSelection().

מאפיינים: ללא
drilldown (for v50+)

מופעל כשהמשתמש עובר עמוק יותר לתוך העץ. ברירת המחדל של ההפעלה היא לחיצה. אפשר להגדיר אותו עם eventsConfig בגרסה 50 ואילך. כדי לדעת על איזה צומת לחצת, צריך להתקשר אל getSelection().

מאפיינים: ללא

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

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