תצוגה חזותית: טבלה

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

סקירה כללית

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

דוגמה

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

בטעינה

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

  google.charts.load('current', {packages: ['table']});

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

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

פורמט נתונים

ה-DataTable מומר לטבלת HTML תואמת, וכל שורה/עמודה ב-DataTable מומרת לשורה/עמודה בטבלת ה-HTML. כל עמודה חייבת להיות מאותו סוג נתונים, וכל סוגי הנתונים החזותיים הרגילים נתמכים (מחרוזת, בוליאנית, מספר וכו').

נכסים מותאמים אישית

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

שם הנכס חל על תיאור
className תא שם של מחלקת מחרוזת להקצאה לתא יחיד. אפשר להשתמש בשיטה הזו כדי להקצות עיצוב CSS לתאים ספציפיים.
style תא מחרוזת סגנון להקצאה בתוך התא. פעולה זו תבטל סגנונות ב-CSS שהוחלו על תא זה. עליך להגדיר את המאפיין allowHtml=true כדי שיפעל כהלכה. דוגמה: 'border: 1px solid green;'

דוגמה

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

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

שם
allowHtml

אם היא מוגדרת כ-true, הערכים המעוצבים של תאים שמכילים תגי HTML יוצגו כ-HTML. אם המדיניות מוגדרת כ-False, רוב הפורמטים המותאמים אישית לא יפעלו כראוי.

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

קובעת אם סגנון הצבע המתחלף יוקצה לשורות אי-זוגיות ואי-זוגיות.

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

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

  • headerRow - הקצאת שם מחלקה לשורת הכותרת בטבלה (אלמנט <tr>).
  • tableRow - הקצאת שם מחלקה לשורות שאינן כותרת (<tr> רכיבים).
  • oddTableRow - הקצאת שם מחלקה לשורות טבלה אי-זוגיות (<tr> רכיבים). הערה: יש להגדיר את הערך changeratingRowStyle ל-True.
  • selectedTableRow - הקצאת שם מחלקה לשורה בטבלה שנבחרה (רכיב <tr>).
  • hoverTableRow - הקצאת שם מחלקה לשורה בטבלה עם העכבר. (רכיב <tr>).
  • headerCell - הקצאת שם מחלקה לכל התאים בשורת הכותרת (רכיב <td>).
  • tableCell - הקצאת שם מחלקה לכל התאים בטבלה שאינם מסוג כותרת (רכיב <td>).
  • rowNumberCell - מקצה שם מחלקה לתאים בעמודת מספר השורה (אלמנט <td>). הערה: חייבים להגדיר את הערך showRowNumber כ-True.

דוגמה: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

הערה: ב-CSS, חלק מהרכיבים מבטלים חלקים אחרים. לדוגמה, אם מציינים צבע רקע עבור רכיב <tr> ורכיב <td>, התנאי השני מקבל עדיפות על פני הקודם. חשוב לציין את כל סגנונות ה-CSS הרלוונטיים בcssClassNames כדי למנוע התנגשויות.

Type: אובייקט
ברירת מחדל: null
מספר שורה ראשונה

מספר השורה בשורה הראשונה ב-dataTable. משמש רק אם הערך של trueRowNumber נכון.

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

מספר העמודות משמאל שיוקפאו. העמודות האלה יישארו במקומן כשתגללו את העמודות שנותרו לרוחב. אם הערך של showRowNumber הוא false, ההגדרה של frozenColumns ל-0 תיראה זהה לערך של null, אבל אם המדיניות showRowNumber מוגדרת לערך true, העמודה של מספר השורה תקפא.

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

מגדיר את הגובה של רכיב המאגר של התצוגה החזותית. אפשר להשתמש ביחידות HTML רגילות (לדוגמה, '100px', '80em', '60'). אם לא מצוינות יחידות, ההנחה היא שהמספר הוא פיקסלים. אם לא תגדירו זאת, הדפדפן יתאים את הגובה באופן אוטומטי כך שיתאים לטבלה ויתבצע כיווץ קטן ככל האפשר בתהליך. אם המדיניות מוגדרת פחות מהגובה הנדרש, הטבלה תוסיף סרגל גלילה אנכי (גם שורת הכותרת קפואה). אם המדיניות מוגדרת כ-'100%', הטבלה תתרחב ככל האפשר לרכיב המאגר.

סוג: מחרוזת
ברירת מחדל: אוטומטי
דף, עמוד

אם וכיצד להפעיל דפדוף בנתונים. יש לבחור אחד מערכי המחרוזת הבאים:

  • 'enable' – הטבלה תכלול לחצנים לדף הקודם ולדף הקודם. לחיצה על הלחצנים האלה תבצע את פעולת ההחלפה ותשנה את הדף שמוצג. כדאי גם להגדיר את האפשרות pageSize.
  • 'event' – הטבלה תכלול לחצנים לדף הקודם ולדף הקודם, אבל לחיצה עליהם תפעיל אירוע 'דף' ולא תשנה את הדף המוצג. יש להשתמש באפשרות הזו כאשר הקוד מטמיע לוגיקה משלו להעברת דפים. עיינו בדוגמה ל-TableQueryWrapper לקבלת דוגמה לטיפול בדפי החלפה באופן ידני.
  • 'השבתה' – [ברירת מחדל] אין תמיכה בדפי נחיתה.
    • סוג: מחרוזת
    ברירת מחדל: 'השבתה'
גודל הדף

מספר השורות בכל דף, כאשר הדפדוף מופעל עם אפשרות הדף.

סוג: מספר
ברירת מחדל: 10
חלוקה לדפים

הגדרת אפשרות מוגדרת ללחצני ההחלפה. האפשרויות הן:

  • 'שניהם' – הפעלת הלחצנים 'הקודם' ו'הבא'
  • 'prev' – רק הלחצן 'הקודם' מופעל
  • 'הבא' – רק הלחצן הבא מופעל
  • 'auto' - הלחצנים מופעלים בהתאם לדף הנוכחי. בדף הבא יוצג רק הדף הראשון. בדף הקודם מוצגת רק הקודם. אחרת, שניהם מופעלים.
  • number - מספר לחצני ההחלפה שיש להציג. המספר הבוטה הזה יבטל את המספר המחושב מ-pageSize.
סוג: מחרוזת או מספר
ברירת מחדל: 'אוטומטי'
rtlTable

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

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

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

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

אם המדיניות מוגדרת כ-True, מספר השורה יופיע בעמודה הראשונה בטבלה.

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

אם ואיך למיין עמודות כאשר המשתמש לוחץ על כותרת עמודה. אם אפשרות המיון מופעלת, מומלץ להגדיר גם את המאפייניםsortAscending ו-sortColumn. יש לבחור באחד מערכי המחרוזת הבאים:

  • 'enable' – [Default], משתמשים יכולים ללחוץ על כותרות העמודות כדי למיין את הנתונים לפי העמודה שעליה לוחצים. כשמשתמשים לוחצים על כותרת העמודה, השורות ימוינו באופן אוטומטי ואירוע 'מיון' יופעל.
  • 'event' – כשמשתמשים לוחצים על כותרת העמודה יופעל אירוע 'sort', אבל השורות לא ימוינו באופן אוטומטי. יש להשתמש באפשרות הזו כשמטמיעים בדף סוג משלו. בדוגמה ל-TableQueryWrapper תוכלו לראות דוגמה לטיפול במיון אירועים באופן ידני.
  • 'השבתה' – ללחיצה על כותרת עמודה אין השפעה.
סוג: מחרוזת
ברירת מחדל: 'הפעלה'
מיון בסדר עולה

הסדר שבו עמודת המיון הראשונית ממוינת. True עבור עלייה, False עבור יורד. המערכת תתעלם מהמאפיין אם לא צוין sortColumn.

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

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

סוג: מספר
ברירת מחדל: -1
דף פתיחה

דף הטבלה הראשון שיוצג. משמש רק אם page נמצא במצב הפעלה/אירוע.

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

מגדיר את הרוחב של רכיב המאגר של ההצגה. אפשר להשתמש ביחידות HTML רגילות (לדוגמה, '100px', '80em', '60'). אם לא מצוינות יחידות, ההנחה היא שהמספר הוא פיקסלים. אם לא צוין רוחב, הדפדפן יכוונן את הרוחב באופן אוטומטי בהתאם לטבלה, תוך כיווץ ככל האפשר בתהליך. אם היא מוגדרת לרוחב קטן יותר מהנדרש, הטבלה תוסיף סרגל גלילה אופקי. אם המדיניות מוגדרת כ-'100%', הטבלה תתרחב ככל האפשר לרכיב המאגר.

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

שיטות

שיטה
draw(data, options)

מצייר את הטבלה.

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

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

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

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

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

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

סוג החזרה: אובייקט עם המאפיינים הבאים:
  • column – (מספר) האינדקס של העמודה שלפיה הטבלה ממוינת.
  • ascending - (בוליאני) True אם המיון עולה, False אם יורד.
  • sortedIndexes - (מערך מספרי) מערך של מספרים, כאשר האינדקס במערך הוא מספר המיון (בטבלה הגלויה), והערך שלו הוא האינדקס של השורה הזו בטבלת הנתונים הבסיסית (לא ממוינת).
setSelection(selection)

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

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

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

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

אירועים

שם
בחירה

אירוע בחירה רגיל, אך ניתן לבחור רק שורות שלמות.

נכסים: ללא
דף, עמוד

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

מאפיינים: page: מספר. האינדקס של הדף שאליו יש לנווט.
מיון

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

מאפיינים: אובייקט עם המאפיינים הבאים:
  • column – (מספר) האינדקס של העמודה שלפיה הטבלה ממוינת.
  • ascending - (בוליאני) True אם המיון עולה, False אם יורד.
  • sortedIndexes - (מערך מספרי) מערך של מספרים, כאשר האינדקס במערך הוא מספר השורה כפי שהוא ממוין (בטבלה הגלויה), והערך הוא האינדקס של שורה זו בטבלת הנתונים הבסיסית (ללא מיון).
למקומות

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

נכסים: ללא

פורמטים

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

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

מעצב טבלאות
עיצוב חץ חץ google.visualization.ArrowFormat
עיצוב טבלה google.visualization.BarFormat
טבלת צבעים google.visualization.ColorFormat
פורמט תאריך google.visualization.DateFormat
מספר טבלה google.visualization.NumberFormat
תבנית של טבלה google.visualization.PatternFormat

חשוב: בדרך כלל, מעצבי ה-HTML משתמשים בפורמט HTML כדי לעצב את הטקסט שלהם. לכן, יש להגדיר את האפשרות allowHtml ל-true.

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

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