בדף הזה תמצאו מידע על ייצוג הנתונים הפנימיים שמשמשים לתרשימים, ועל המחלקות DataTable ו-DataView שמשמשות להעברת נתונים לתרשים, ועל הדרכים השונות לאכלוס DataTable ולאכלוס שלו.
תוכן עניינים
- איך הנתונים מיוצגים בתרשים
- איזו סכימת טבלה נמצאת בתרשים שלי?
- טבלאות נתונים ותצוגות נתונים
- יצירה ואיכלוס של טבלת נתונים
- dataTableToCsv()
- מידע נוסף
איך הנתונים מיוצגים בתרשים
כל התרשימים מאחסנים את הנתונים בטבלה. לפניכם ייצוג פשוט של טבלת נתונים מאוכלסת בשתי עמודות:
index: 0 |
אינדקס: 1 type: number label: 'שעות ליום' |
|---|---|
| 'עבודה' | 11 |
| 'אוכל' | 2 |
| 'נסיעה יומית' | 2 |
| 'צפייה בטלוויזיה' | 2 |
| 'שינה' | 7 |
הנתונים מאוחסנים בתאים שיש אליהם הפניה בתור (שורה, עמודה), כאשר שורה היא אינדקס שורה על בסיס אפס ועמודה היא אינדקס של עמודה המבוססת על אפס או מזהה ייחודי שאפשר לציין.
הנה רשימה מלאה יותר של הרכיבים והמאפיינים הנתמכים של הטבלה. לפרטים נוספים, ראו פורמט של פרמטר Literal של JavaScript של בונה:
- טבלה – מערך של עמודות ושורות, וגם מפה אופציונלית של זוגות שרירותיים של שמות/ערכים שאפשר להקצות. בשלב זה, לא ניתן להשתמש בתרשימים ברמת הטבלה.
- עמודות – כל עמודה תומכת בסוג נתונים נדרש, וגם תווית אופציונלית של מזהה, מחרוזת, תבנית ומפה של מאפייני שם/ערך שרירותיים. התווית היא מחרוזת ידידותית למשתמש שאפשר להציג בתרשים. המזהה הוא מזהה אופציונלי שיכול לשמש במקום האינדקס של העמודה. אפשר להפנות לעמודה בקוד באמצעות אינדקס מבוסס אפס או באמצעות המזהה האופציונלי. רשימה של סוגי הנתונים הנתמכים מופיעה
DataTable.addColumn(). - שורות – שורה היא מערך של תאים, עם מפה אופציונלית של זוגות שרירותיים של שמות/ערכים שאפשר להקצות.
- תאים - כל תא הוא אובייקט שמכיל את הערך בפועל של סוג העמודה, וכן גרסה אופציונלית של מחרוזת מחרוזת של הערך שאתם מספקים. לדוגמה: ייתכן שעמודה מספרית תוקצה לערך 7 ולערך המפורמט "שבע".
איזו סכימה בטבלה נמצאת בתרשים שלי?
בטבלאות שונות נעשה שימוש בטבלאות בפורמטים שונים: לדוגמה, תרשים עוגה מצפה לטבלה עם שתי עמודות עם עמודת מחרוזת ועמודת מספרים, כאשר כל שורה מתארת פלח והעמודה הראשונה היא תווית הפלח והערך השני הוא ערך הפלח. עם זאת, תרשים פיזור מצפה לקבל טבלה המורכבת משתי עמודות מספריות, כאשר כל שורה היא נקודה ושתי העמודות הן ערכי ה-X וה-Y של הנקודה. מומלץ לקרוא את מסמכי התיעוד של התרשים כדי לדעת איזה פורמט נתונים דרוש לו.
טבלאות נתונים ותצוגות נתונים
טבלת נתוני תרשים מיוצגת ב-JavaScript על ידי אובייקט DataTable או אובייקט DataView. במקרים מסוימים, ייתכן שתוצג גרסת JavaScript מילולית או קובץ JSON המשתמש ב-DataTable, לדוגמה, כאשר הנתונים נשלחים באינטרנט על ידי מקור נתונים של Chart Tools, או כערך קלט אפשרי עבור ChartWrapper.
DataTable משמש ליצירת טבלת הנתונים המקורית. DataView היא רמת נוחות שמאפשרת תצוגה לקריאה בלבד של DataTable, עם שיטות להסתיר או לסדר מחדש שורות או עמודות במהירות, בלי לשנות את הנתונים המקוריים המקושרים. לפניכם השוואה קצרה בין שתי הכיתות:
| טבלת נתונים | תצוגת נתונים |
|---|---|
| קריאה/כתיבה | קריאה-בלבד |
| אפשר ליצור אותם ריקים ולאחר מכן לאכלס אותם | הוא קובץ עזר של DataTable קיים. לא ניתן לאכלס מראש את התוכן; יש להמציא אותו עם אזכור של DataTable קיים. |
| הנתונים תופסים נפח אחסון. | הנתונים מתייחסים לקובץ DataTable קיים ולא נדרשים בו נפח אחסון. |
| ניתן להוסיף/לערוך/למחוק שורות, עמודות ונתונים, וכל השינויים קבועים. | אפשר למיין או לסנן שורות בלי לשנות את הנתונים הבסיסיים. אפשר להסתיר ולהסתיר שורות ועמודות. |
| אפשר לשכפל | אפשר להחזיר גרסה DataTable של התצוגה |
| מכיל נתוני מקור, לא מכיל הפניות | אזכור בזמן אמת לקובץ DataTable. כל שינוי בנתונים של DataTable ישתקף באופן מיידי בתצוגה המפורטת. |
| העברה לתרשים כמקור נתונים | העברה לתרשים כמקור נתונים |
| לא תומך בעמודות מחושבות | תומכת בעמודות מחושבות, שהן עמודות עם ערך שמחושב בזמן אמת על ידי שילוב או שינוי של עמודות אחרות. |
| אין הסתרה של שורה או עמודה | יכול להסתיר או להציג את העמודות שנבחרו |
יצירה ואכלוס של טבלת נתונים
קיימות כמה דרכים שונות ליצור ולאכלוס של טבלת נתונים:
- יוצרים DataTable חדש ואז קוראים ל-addColumn()/addRows()/addRow()/setCell()
- arrayToDataTable()
- אתחול מילולי של JavaScript
- שליחת שאילתה של מקור נתונים
Empty DataTable + addColumn()/addRows()/addRow()/setCell()
צעדים:
- יצירה של
DataTableחדשה - הוספת עמודות
- מוסיפים שורה אחת או יותר, ואפשר להוסיף לה נתונים. אתם יכולים להוסיף שורות ריקות ולאכלס אותן מאוחר יותר. ניתן גם להוסיף או להסיר שורות נוספות או לערוך ערכים של תאים בנפרד.
היתרונות:
- אפשר לציין את סוג הנתונים ואת התווית של כל עמודה.
- שיטה טובה ליצירת הטבלה בדפדפן, עם נטייה שגויה לשגיאות הקלדה מאשר השיטה המילולית של JSON.
החסרונות:
- לא שימושי כמו בניית מחרוזת מילולית של JSON כדי לעבור לבנאי 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 להסיק את הסוג מהנתונים שמועברים.
- כדי לציין במפורש את סוג הנתונים של עמודה, יש לציין אובייקט בשורת הכותרת עם המאפיין
type. - כדי ש-Google התרשימים תסיק את הסוג, צריך להשתמש במחרוזת עבור תווית העמודה.
- כדי לציין במפורש את סוג הנתונים של עמודה, יש לציין אובייקט בשורת הכותרת עם המאפיין
לדוגמה:
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 לתוך מבנה הטבלה, שמגדיר את סכימת הטבלה ואפשר גם נתונים.
היתרונות:
- שימושי בעת יצירת נתונים בשרת האינטרנט.
- מתבצע עיבוד מהיר יותר משיטות אחרות לטבלאות גדולות (יותר מ-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. את הנתונים האלה שמוחזרים אפשר להעתיק, לשנות או להעתיק ל-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(נתונים) מחזירה מחרוזת CSV עם הנתונים מטבלת הנתונים.
הקלט לפונקציה הזו יכול להיות DataTable או DataView.
ייעשה שימוש בערכים המעוצבים של התאים. המערכת מתעלמת מתוויות עמודה.
תווים מיוחדים כמו "," ו-"\n" מסומנים בתווי בריחה רגילים בפורמט 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>