סקירה כללית
טבלה שניתן למיין ולפלח. אפשר לעצב תאים בטבלה באמצעות מחרוזות פורמט, או על ידי הוספה ישירה של 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 עבור המחלקה הזו בדף. שמות הנכסים הבאים נתמכים:
דוגמה:
הערה: ב-CSS, חלק מהרכיבים מבטלים חלקים אחרים. לדוגמה, אם מציינים צבע רקע עבור רכיב Type: אובייקט
ברירת מחדל: null
|
מספר שורה ראשונה |
מספר השורה בשורה הראשונה ב-dataTable. משמש רק אם הערך של trueRowNumber נכון. סוג: מספר
ברירת מחדל: 1
|
עמודות שהוקפאו |
מספר העמודות משמאל שיוקפאו. העמודות האלה יישארו במקומן
כשתגללו את העמודות שנותרו לרוחב. אם הערך של סוג: מספר
ברירת מחדל: null
|
גובה |
מגדיר את הגובה של רכיב המאגר של התצוגה החזותית. אפשר להשתמש ביחידות HTML רגילות (לדוגמה, '100px', '80em', '60'). אם לא מצוינות יחידות, ההנחה היא שהמספר הוא פיקסלים. אם לא תגדירו זאת, הדפדפן יתאים את הגובה באופן אוטומטי כך שיתאים לטבלה ויתבצע כיווץ קטן ככל האפשר בתהליך. אם המדיניות מוגדרת פחות מהגובה הנדרש, הטבלה תוסיף סרגל גלילה אנכי (גם שורת הכותרת קפואה). אם המדיניות מוגדרת כ-'100%', הטבלה תתרחב ככל האפשר לרכיב המאגר. סוג: מחרוזת
ברירת מחדל: אוטומטי
|
דף, עמוד |
אם וכיצד להפעיל דפדוף בנתונים. יש לבחור אחד מערכי המחרוזת הבאים:
סוג: מחרוזת
ברירת מחדל: 'השבתה'
|
גודל הדף |
מספר השורות בכל דף, כאשר הדפדוף מופעל עם אפשרות הדף. סוג: מספר
ברירת מחדל: 10
|
חלוקה לדפים |
הגדרת אפשרות מוגדרת ללחצני ההחלפה. האפשרויות הן:
סוג: מחרוזת או מספר
ברירת מחדל: 'אוטומטי'
|
rtlTable |
מוסיף תמיכה בסיסית בשפות הנכתבות מימין לשמאל (כמו ערבית או עברית) על ידי הפיכת סדר העמודות בטבלה, כך שהעמודה אפס תהיה העמודה השמאלית ביותר, והעמודה האחרונה היא העמודה השמאלית ביותר. פעולה זו לא תשפיע על אינדקס העמודות בנתונים הבסיסיים, אלא רק על סדר התצוגה. התצוגה הדו-כיוונית המלאה (BiDi) לא נתמכת על ידי התצוגה החזותית של הטבלה גם עם האפשרות הזו. המערכת תתעלם מאפשרות זו אם תפעיל חלוקה לדפים (באמצעות אפשרות הדף) או אם הטבלה כוללת פסי גלילה מכיוון שציינת אפשרויות גובה ורוחב קטנות יותר מהגודל הנדרש בטבלה. סוג: בוליאני
ברירת מחדל: False
|
ScrollLeftStartPosition |
מגדיר את מיקום הגלילה האופקי, בפיקסלים, אם הטבלה כוללת פסי גלילה אופקיים מפני שהגדרת את רוחב המאפיין. אחרי שגוללים מעל הטבלה, גוללים כל כך הרבה פיקסלים בטבלה. סוג: מספר
ברירת מחדל: 0
|
הצג מספר שורה |
אם המדיניות מוגדרת כ-True, מספר השורה יופיע בעמודה הראשונה בטבלה. סוג: בוליאני
ברירת מחדל: False
|
מיון |
אם ואיך למיין עמודות כאשר המשתמש לוחץ על כותרת עמודה. אם אפשרות המיון מופעלת, מומלץ להגדיר גם את המאפייניםsortAscending ו-sortColumn. יש לבחור באחד מערכי המחרוזת הבאים:
סוג: מחרוזת
ברירת מחדל: 'הפעלה'
|
מיון בסדר עולה |
הסדר שבו עמודת המיון הראשונית ממוינת. True עבור עלייה, False עבור
יורד. המערכת תתעלם מהמאפיין אם לא צוין סוג: בוליאני
ברירת מחדל: נכון
|
עמודת מיון |
אינדקס של עמודה בטבלת הנתונים, מיון ראשוני של הטבלה. העמודה תסומן בחץ קטן שמציין את סדר המיון. סוג: מספר
ברירת מחדל: -1
|
דף פתיחה |
דף הטבלה הראשון שיוצג. משמש רק אם סוג: מספר
ברירת מחדל: 0
|
רוחב |
מגדיר את הרוחב של רכיב המאגר של ההצגה. אפשר להשתמש ביחידות HTML רגילות (לדוגמה, '100px', '80em', '60'). אם לא מצוינות יחידות, ההנחה היא שהמספר הוא פיקסלים. אם לא צוין רוחב, הדפדפן יכוונן את הרוחב באופן אוטומטי בהתאם לטבלה, תוך כיווץ ככל האפשר בתהליך. אם היא מוגדרת לרוחב קטן יותר מהנדרש, הטבלה תוסיף סרגל גלילה אופקי. אם המדיניות מוגדרת כ-'100%', הטבלה תתרחב ככל האפשר לרכיב המאגר. סוג: מחרוזת
ברירת מחדל: אוטומטי
|
שיטות
שיטה | |
---|---|
draw(data, options) |
מצייר את הטבלה. סוג החזרה: אין
|
getSelection() |
הטמעה סטנדרטית של getSelection. רכיבי הבחירה הם אלמנטים של שורה. היא יכולה להחזיר יותר משורה אחת שנבחרה. השורות באינדקס של אובייקט הבחירה מתייחסות לטבלת הנתונים המקורית, ללא קשר לאינטראקציה של המשתמש (מיון, חלוקה לדפים וכו'). שימו לב שהמתג פועל רק כשלוחצים על תא בפעם הראשונה. כדי לעשות זאת, לוחצים שוב על התא ומבטלים את הבחירה בו, אבל לא בוחרים פריטים באובייקט הבחירה שאוחזרה. סוג החזרה: מערך של רכיבי בחירה
|
getSortInfo() |
כדאי לקרוא לשיטה הזו כדי לאחזר מידע על מצב המיון הנוכחי של טבלה שממוינת (בדרך כלל על ידי המשתמש, שהקליק על כותרת עמודה כדי למיין את השורות לפי עמודה ספציפית). אם אפשרות המיון מושבתת, השיטה הזו לא תפעל. אם לא ימוינת נתונים בקוד או שהמשתמש לא ממיין נתונים על ידי בחירה בקוד, יוחזרו ערכי המיון שמוגדרים כברירת מחדל. סוג החזרה: אובייקט עם המאפיינים הבאים:
|
setSelection(selection) |
הטמעה רגילה של סוג החזרה: אין
|
clearChart() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: אין
|
אירועים
שם | |
---|---|
בחירה |
אירוע בחירה רגיל, אך ניתן לבחור רק שורות שלמות. נכסים: ללא
|
דף, עמוד |
מופעל כאשר משתמשים לוחצים על לחצן ניווט בדף. מאפיינים:
page : מספר. האינדקס של הדף שאליו יש לנווט. |
מיון |
מופעל כאשר משתמשים לוחצים על כותרת של עמודה, ואפשרות המיון אינה 'השבתה'. מאפיינים: אובייקט עם המאפיינים הבאים:
|
למקומות |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר event listener לאירוע הזה לפני שמתקשרים לשיטת השרטוט, ולהתקשר אליהם רק אחרי שהאירוע הופעל. נכסים: ללא
|
פורמטים
הערה: המחשה החזותית בטבלה כוללת קבוצה של אובייקטי פורים שהוחלפו על ידי מעצבים כלליים שמתנהגים באותו אופן, אך ניתן להשתמש בהם בכל תצוגה חזותית.
בטבלה הבאה אפשר לראות את פורמט העיצוב הקודם של הטבלה ואת הפורמט הכללי המקביל שלה. צריך להשתמש בפורמט הכללי כשאתם כותבים קוד חדש.
מעצב טבלאות | |
---|---|
עיצוב חץ חץ | google.visualization.ArrowFormat |
עיצוב טבלה | google.visualization.BarFormat |
טבלת צבעים | google.visualization.ColorFormat |
פורמט תאריך | google.visualization.DateFormat |
מספר טבלה | google.visualization.NumberFormat |
תבנית של טבלה | google.visualization.PatternFormat |
חשוב: בדרך כלל, מעצבי ה-HTML משתמשים בפורמט HTML כדי לעצב את הטקסט שלהם. לכן, יש להגדיר את האפשרות allowHtml
ל-true
.
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.