טבלאות נתונים ותצוגות נתונים

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

תוכן עניינים

  1. איך הנתונים מיוצגים בתרשים
  2. באיזו סכימת טבלה נעשה שימוש בתרשים שלי?
  3. DataTables ו-DataViews
  4. יצירה ואכלוס של טבלת נתונים
    1. יוצרים DataTable חדש ואז קוראים addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. מאתחל ליטרל של JavaScript
    4. שליחת שאילתה של מקור נתונים
  5. dataTableToCsv()
  6. מידע נוסף

כיצד נתונים מיוצגים בתרשים

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

אינדקס: 0
סוג: מחרוזת
תווית: 'משימה'

 index: 1
type: מספר
label: 'שעות ביום'
'עבודה' 11
'אוכל' 2
'נסיעה יומית' 2
'צפייה בטלוויזיה' 2
'שינה' 7

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

זוהי רשימה מלאה יותר של הרכיבים והמאפיינים הנתמכים בטבלה. פרטים נוספים זמינים במאמר הפורמט של פרמטר JavaScript ליטראלי של הבונה:

  • טבלה – מערך של עמודות ושורות, וגם מפה אופציונלית של צמדי שם/ערך שרירותיים שאפשר להקצות. תרשימים לא משתמשים כרגע במאפיינים ברמת הטבלה.
  • עמודות – כל עמודה תומכת בסוג נתונים נדרש, וגם תווית מחרוזת, מזהה, דפוס ומפה שרירותיים של מאפייני שם/ערך. התווית היא מחרוזת ידידותית למשתמש שאפשר להציג בתרשים. המזהה הוא מזהה אופציונלי שאפשר להשתמש בו במקום אינדקס עמודות. ניתן להפנות לעמודה בקוד באמצעות אינדקס שמבוסס על אפס או לפי המזהה האופציונלי. ב-DataTable.addColumn() מופיעה רשימה של סוגי הנתונים הנתמכים.
  • שורות – שורה היא מערך של תאים. זו גם מפה אופציונלית של צמדי שם/ערך שרירותיים שאפשר להקצות.
  • תאים – כל תא הוא אובייקט שמכיל ערך בפועל של סוג העמודה, וגם גרסה אופציונלית של הערך בפורמט מחרוזת. לדוגמה: לעמודה מספרית אפשר להקצות את הערך 7 ואת הערך המפורמט 'שבע'. אם מזינים ערך בפורמט הנכון, בתרשים ייעשה שימוש בערך בפועל לצורך חישובים ורינדור, אבל ייתכן שיוצג הערך בפורמט המתאים, למשל אם המשתמש מעביר את העכבר מעל נקודה. לכל תא יש גם מפה אופציונלית של צמדי שם/ערך שרירותיים.

באיזו סכימת טבלה נעשה שימוש בתרשים שלי?

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

DataTables ו-DataViews

טבלת נתונים של תרשים מיוצגת ב-JavaScript על ידי אובייקט DataTable או אובייקט DataView. יכול להיות שבמקרים מסוימים תראו שימוש ב-DataTable בגרסה ליטרלית או בגרסת JSON של DataTable. למשל, כשנתונים נשלחים באינטרנט על ידי מקור נתונים של Chart Tools, או כערך קלט אפשרי של ChartWrapper.

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

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

יצירה ואכלוס של טבלת נתונים

יש כמה דרכים שונות ליצור ולאכלוס של DataTable:

ריקון DataTable + addColumn()/addRows()/addRow()/setCell()

שלבים:

  1. יצירת DataTable חדש
  2. הוספת עמודות
  3. מוסיפים שורה אחת או יותר, עם נתונים אופציונליים. אפשר להוסיף שורות ריקות ולאכלס אותן מאוחר יותר. אפשר גם להוסיף או להסיר שורות נוספות או לערוך את ערכי התאים בנפרד.

היתרונות:

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

החסרונות:

  • הוא לא שימושי כמו בניית מחרוזת מילולית של JSON כדי להעביר אותה ל-constructor של DataTable במהלך יצירת הדף באופן פרוגרמטי בשרת אינטרנט.
  • תלויה במהירות הדפדפן, והיא יכולה להיות איטית יותר ממחרוזות מילוליות של JSON עם טבלאות גדולות (כ-1,000 תאים).

לדוגמה:

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

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

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

היתרונות:

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

לדוגמה:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

מאתחל JavaScript ליטראלי

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

היתרונות:

  • שימושי ליצירת נתונים בשרת האינטרנט שלכם.
  • העיבוד מהיר יותר משיטות אחרות לטבלאות גדולות יותר (יותר מ-1,000 תאים)

החסרונות:

  • התחביר מסובך מדי ולא מסובך, ויש הרבה שגיאות הקלדה.
  • לא קוד קריא מאוד.
  • דומה באופן זמני ל-JSON, אבל לא זהה.

דוגמה:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

שליחת שאילתה של מקור נתונים

כששולחים שאילתה למקור נתונים של כלי תרשימים, תשובה מוצלחת היא מופע של DataTable. ניתן להעתיק, לשנות או להעתיק את ה-DataTable שהוחזר ל-DataView כמו לכל טבלה אחרת של DataTable.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

פונקציית העזרה google.visualization.dataTableToCsv(data) מחזירה מחרוזת CSV עם הנתונים מטבלת הנתונים.

הקלט לפונקציה הזו יכול להיות DataTable או DataView.

היא משתמשת בערכים שצוינו בתאים. המערכת מתעלמת מתוויות העמודות.

תווים מיוחדים כמו "," ו-"\n" מסומנים בתווי בריחה (escape) באמצעות כללי בריחה רגילים של CSV.

הקוד הבא יציג את

Ramanujan,1729
Gauss,5050

בלוח JavaScript של הדפדפן:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

מידע נוסף