שרטוט התרשים

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // 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 the data table.
      var 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.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

השלב האחרון הוא שרטוט התרשים. קודם צריך ליצור מכונה של רמת התרשים שבה רוצים להשתמש, ואז להתקשר אליה עם draw().

יצירת תרשים באופן מיידי

כל סוג של תרשים מבוסס על מחלקה אחרת, המפורטת במסמכי התיעוד של התרשים. למשל, תרשים העוגה מבוסס על רמת google.visualization.PieChart, תרשים העמודות מבוסס על רמת google.visualization.BarChart וכן הלאה. תרשימי העוגה ותרשימי העמודות כלולים בחבילה של תרשים הליבה שטענת בתחילת המדריך הזה. עם זאת, אם אתם רוצים להציג תרשים עץ או תרשים גיאוגרפי בדף שלכם, עליכם להוסיף בנוסף את החבילות 'מיפוי עצים' או 'מפה גיאוגרפית'.

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

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

שרטוט התרשים

אחרי שמכינים את הנתונים והאפשרויות, אפשר לשרטט את התרשים.

הדף צריך להכיל רכיב HTML (בדרך כלל <div>) כדי לשמור את התרשים. עליך להעביר לתרשים שלך הפניה לרכיב הזה, לכן יש להקצות מזהה שישמש כאחזור של הפניה באמצעות document.getElementById(). כל מה שמופיע ברכיב הזה יוחלף בתרשים. חשבו אם צריך להגדיר במפורש את הרכיב <div> הזה, אבל בינתיים מציינים את גודל התרשים ב-HTML של <div>.

כל תרשים תומך בשיטת draw() שמשתמשת בשני ערכים: אובייקט DataTable (או DataView) שמכיל את הנתונים שלך, ואובייקט אופציונלי בתרשים. אובייקט האפשרויות אינו נדרש, ואפשר להתעלם ממנו או להעביר אותו ריק (null) כדי להשתמש באפשרויות ברירת המחדל של התרשים.

אחרי התקשרות למספר draw(), התרשים יעוצב בדף. יש להפעיל את השיטה draw() בכל פעם שמשנים את הנתונים או האפשרויות, ורוצים לעדכן את התרשים.

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

פתרון בעיות

אם התרשים לא משורטט על הדף, הנה כמה גישות שיעזרו לפתור את הבעיות:

  • מחפשים שגיאות הקלדה. חשוב לזכור ש-JavaScript היא שפה תלוית אותיות רישיות.
  • לחפש בקבוצת הדיון של Google Visualization API. אם לא מצאת פוסט שעונה על השאלה, אפשר לפרסם את השאלה בקבוצה וגם קישור לדף אינטרנט שמדגים את הבעיה.

 

 

 

מידע נוסף