התאמה אישית של התרשים

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

 

ציון האפשרויות

לכל תרשים יש אפשרויות רבות להתאמה אישית, כולל כותרת, צבעים, עובי קו, מילוי רקע וכן הלאה. למרות שצוות כלי התרשים השקיע מאמצים רבים במראה התרשים המוגדר כברירת מחדל, ייתכן שתרצו לבצע התאמה אישית של התרשים, למשל להוסיף תוויות של כותרות או צירים.

מציינים אפשרויות מותאמות אישית לתרשים על ידי הגדרת אובייקט JavaScript עם מאפייני option_name/option_value. יש להשתמש בשמות האפשרויות שרשומים במסמכי התרשים. במסמכי התיעוד של כל תרשים מוצגת רשימה של אפשרויות שניתן להתאים אישית. לדוגמה, האפשרויות הזמינות לתרשים העוגה כוללות 'מקרא', 'כותרת' ו'is3D'. לכל האפשרויות יש ערך ברירת מחדל מתועד.

האובייקט הבא מגדיר את מיקום המקרא, כותרת התרשים, גודל התרשים ואפשרות בתלת-ממד לתרשים עוגה:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

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

ציון גודל התרשים

אפשרות ההגדרה הנפוצה ביותר היא גובה ורוחב של תרשים. אפשר לציין את גודל התרשים בשני מקומות: בקובץ ה-HTML של הרכיב <div> של מאגר התגים, או באפשרויות התרשים. אם תציינו את הגודל בשני המיקומים, התרשים ידחה בדרך כלל את הגודל שצוין ב-HTML. אם לא תציינו את גודל התרשים ב-HTML או כאפשרות, יכול להיות שהתרשים לא יוצג כמו שצריך.

יש יתרונות לציון הגודל במקום אחד או במקום אחר:

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

 

מידע נוסף