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

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

 

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

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

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

 

מידע נוסף