שיטות שרטוט בתרשים

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

תוכן עניינים

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. מידע נוסף

chart.draw()

זו השיטה הבסיסית שמתוארת בדוגמה של Hello Chart! במסמך הזה. אלה השלבים הבסיסיים:

  1. טעינה של טוען ספריות gstatic, ויזואליזציית Google וספריות תרשימים
  2. הכנת הנתונים
  3. הכנת אפשרויות לתרשים
  4. יצירת אובייקט של מחלקה של תרשים, העברה של נקודת אחיזה לרכיב הקונטיינר של הדף.
  5. אפשר להירשם כדי לקבל כל אירוע בתרשים. אם אתם מתכוונים לשלוח קריאה לשיטות בתרשים, עליכם להאזין לאירוע 'מוכן'.
  6. קוראים אל chart.draw() ומעבירים את הנתונים והאפשרויות.

היתרונות:

  • יש לכם שליטה מלאה בכל שלב בתהליך.
  • אפשר להירשם כדי להאזין לכל האירועים שהתרשים זורק.

החסרונות:

  • דרגת מלל
  • צריך לטעון באופן מפורש את כל ספריות התרשימים הנדרשות.
  • אם שולחים שאילתות, צריך להטמיע את הקריאה החוזרת באופן ידני, לבדוק אם הפעולה הצליחה, לחלץ את הערך של 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>

ChartWrapper

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. שימו לב שהקוד לא צריך לטפל בקריאה חוזרת.

<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>

מידע נוסף