תצוגה חזותית: תרשים עוגה (תמונה)

חשוב: החלק של 'תרשימי תמונות' בכלים של Google Charts הוצא משימוש באופן רשמי ב-20 באפריל 2012. הוא ימשיך לפעול בהתאם למדיניות ההוצאה משימוש שלנו.

  1. סקירה כללית
  2. דוגמה
  3. בטעינה
  4. פורמט נתונים
  5. אפשרויות הגדרה
  6. שיטות
  7. אירועים
  8. המדיניות בנושא נתונים

סקירה כללית

תרשים עוגה שמוצג כתמונה באמצעות Google Charts API.

דוגמה

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

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

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

בטעינה

שם החבילה של google.charts.load הוא "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

שם הכיתה של התרשים להמחשה הוא google.visualization.ImagePieChart

  var visualization = new google.visualization.ImagePieChart(container);

פורמט נתונים

שתי עמודות. העמודה הראשונה צריכה להיות מחרוזת ולהכיל את תווית הפלח. העמודה השנייה צריכה להיות מספר ולהכיל את ערך הפלח.

אפשרויות הגדרה

אפשר לציין את האפשרויות הבאות כחלק מהאובייקט options שמועבר ל-method draw() של התצוגה החזותית.

שם סוג ברירת המחדל תיאור
backgroundColor string '#FFFFFF' (לבן) צבע הרקע של התרשים בפורמט הצבעים של Chart API.
color [צבע] string אוטומטית מציינת צבע בסיס שישמש לכל הסדרות. כל סדרה תהיה הדרגתית של הצבע שצוין. הצבעים מוגדרים בפורמט הצבעים של Chart API. המערכת תתעלם אם צוין colors.
צבעים מערך<string> אוטומטית ניתן להשתמש בפונקציה הזו כדי להקצות צבעים ספציפיים לכל סדרת נתונים. הצבעים מצוינים בפורמט הצבעים של Chart API. צבע i משמש לעמודה i של הנתונים, שעוטף עד להתחלה אם יש יותר עמודות נתונים מצבעים. אם כל הסדרות מקבלות וריאציות של צבע אחד, צריך להשתמש באפשרות color במקום זאת.
enableEvents boolean false האפשרות הזו גורמת לתרשימים להקפיץ אירועים שהופעלו על ידי משתמשים, כמו לחיצה או העברת עכבר. נתמכת רק בסוגי תרשימים ספציפיים. ראו אירועים בהמשך.
גובה number גובה הקונטיינר גובה התרשים בפיקסלים.
is3D boolean false אם המדיניות מוגדרת כ-True, מוצג תרשים תלת-ממדי.
labels string 'ללא'

איזו תווית להציג עבור כל פרוסה, אם בכלל. בוחרים מבין הערכים הבאים:

  • 'ללא' – ללא תוויות.
  • 'value' - שימוש בערך הפלח כתווית.
  • 'שם' - השתמשו בשם הפלח (שם העמודה).
מקרא string 'ימינה' המיקום של המקרא בתרשים. צריך לבחור אחד מהערכים הבאים: 'top', 'bottom', 'left', 'right', 'none'.
title string ללא שם טקסט להצגה מעל התרשים.
רוחב number רוחב הקונטיינר רוחב התרשים בפיקסלים.

שיטות

שיטה סוג הערך המוחזר תיאור
draw(data, options) אין מצייר את התרשים.

אירועים

אפשר להירשם כדי לשמוע את האירועים שמתוארים בדף תרשים תמונות גנרי.

המדיניות בנושא נתונים

מידע נוסף על מדיניות הרישום ביומן של Chart API