דף זה מפרט את הדרכים השונות שבהן אפשר ליצור שרטוט ולשרטט אותו בדף. לכל שיטה יש יתרונות וחסרונות, כפי שמתואר בהמשך.
תוכן עניינים
Chart.draw()
זוהי השיטה הבסיסית בדוגמה לתרשים שלום! במסמכי התיעוד האלה. אלו השלבים הבסיסיים:
- טעינת הכלי לטעינת ספריות של Gstatic, תצוגה חזותית של Google וספריות תרשים
- מכינים את הנתונים
- להכין אפשרויות תרשים
- יצירת מחלקה של התרשים באופן זמני, על ידית ידית לרכיב מאגר התגים של הדף.
- אפשר גם להירשם לקבלת אירועים בתרשים. אם אתם רוצים לקרוא לשיטות שבתרשים, עליכם להאזין לאירוע "מוכן".
- התקשרות אל
chart.draw()
והעברת הנתונים והאפשרויות.
היתרונות:
- יש לכם שליטה מלאה על כל שלב בתהליך.
- אפשר להירשם כדי להאזין לכל האירועים המוצגים בתרשים.
החסרונות:
- מרובה-מילים
- יש לטעון באופן מפורש את כל ספריות התרשים הנדרשות.
- כששולחים שאילתות, צריך להטמיע אותן בקריאה חוזרת (callback), לבדוק אם היא בוצעה בהצלחה, לחלץ את הפרמטר
DataTable
שיועבר ולהעביר אותו לתרשים.
דוגמה:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> var data; var chart; // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create our data table. data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. chart = new google.visualization.PieChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(data, options); } function selectHandler() { var selectedItem = chart.getSelection()[0]; var value = data.getValue(selectedItem.row, 0); alert('The user selected ' + value); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>
Wrapper של תרשים
ChartWrapper
היא מחלקת נוחות שמטפלת בטעינת כל ספריות התרשימים המתאימות לכם, ומפשטת את שליחת השאילתות למקורות הנתונים של כלי התרשימים.
היתרונות:
- הרבה פחות קוד
- מתבצעת טעינה של כל ספריות התרשים הנדרשות
- קל יותר להריץ שאילתות על מקורות נתונים על ידי יצירת האובייקט
Query
וטיפול בקריאה החוזרת (callback) - אם תעבירו את מזהה רכיב המאגר, הוא יקבל את הפקודה getElementByID בשבילכם.
- אפשר לשלוח נתונים במגוון פורמטים: כמערך ערכים, כמחרוזת מילולית בפורמט JSON או כמזהה
DataTable
החסרונות:
- בשלב זה,
ChartWrapper
מטמיע רק את אירועי השגיאה 'בחירה', 'מוכן' ו'שגיאה'. כדי לקבל אירועים אחרים, יש ליצור כינוי לתרשים הארוז ולהירשם לאירועים שם. במסמכי התיעוד שלChartWrapper
ניתן למצוא דוגמאות.
לדוגמה:
הנה דוגמה לתרשים עמודות עם נתונים שנוצרו באופן מקומי כמערך. לא ניתן לציין תוויות תרשים או ערכי תאריך ושעה באמצעות תחביר המערך, אבל ניתן ליצור באופן ידני אובייקט DataTable
עם הערכים האלה ולהעביר אותו לנכס dataTable
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], ['', 700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw(); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
זוהי דוגמה לתרשים קו שמקבל את הנתונים שלו באמצעות שאילתה בגיליון אלקטרוני של Google. שימו לב, הקוד לא צריך לטפל בקריאה החוזרת (callback).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() // No query callback handler needed! } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
בשילוב עם טעינה אוטומטית, אפשר ליצור קוד קומפקטי מאוד:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
שימוש בעורך התרשימים באמצעות ChartWrapper
אפשר להשתמש בתיבת הדו-שיח של עורך התרשימים שמובנית בגיליונות האלקטרוניים של Google כדי לעצב תרשים, ואז לבקש את המחרוזת הסידורית ChartWrapper
שמייצגת את התרשים. לאחר מכן אפשר להעתיק את המחרוזת הזו ולהשתמש בה כפי שמתואר למעלה ב-ChartWrapper
.
ניתן להטמיע עורך תרשימים בדף שלך ולהציג שיטות שבהן משתמשים יוכלו להתחבר למקורות נתונים אחרים ולהחזיר את המחרוזת ChartWrapper
. במסמכי העזר בנושא ChartEditor
אפשר לקרוא מידע נוסף.
DrawChart()
DrawChart
היא שיטה סטטית גלובלית שעוטפת את ChartWrapper
.
היתרונות:
- זהה ל-
ChartWrapper
, אבל קצר יותר לשימוש.
החסרונות:
- לא מוחזרת ל-wrapper, כך שאי אפשר לטפל באירועים.
<DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization_div" style="width: 600px; height: 400px;"></div> </body> </html>
מידע נוסף
ChartEditor
תיעוד הפנייה- מסמכים כלליים בנושא
chart.draw()
ChartWrapper
תיעוד הפנייהDrawChart
תיעוד הפנייה