שיטות לציור תרשימים

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

תוכן עניינים

  1. chart.draw()
  2. wrapper של תרשים
  3. DrawChart()
  4. מידע נוסף

Chart.draw()

זוהי השיטה הבסיסית בדוגמה לתרשים שלום! במסמכי התיעוד האלה. אלו השלבים הבסיסיים:

  1. טעינת הכלי לטעינת ספריות של Gstatic, תצוגה חזותית של Google וספריות תרשים
  2. מכינים את הנתונים
  3. להכין אפשרויות תרשים
  4. יצירת מחלקה של התרשים באופן זמני, על ידית ידית לרכיב מאגר התגים של הדף.
  5. אפשר גם להירשם לקבלת אירועים בתרשים. אם אתם רוצים לקרוא לשיטות שבתרשים, עליכם להאזין לאירוע "מוכן".
  6. התקשרות אל 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>

מידע נוסף