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

חשוב: החלק של 'תרשימי תמונות' בכלים של 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:["imagebarchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

בטעינה

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

  google.charts.load("current", {packages: [[]"imagebarchart"]});

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

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

פורמט נתונים

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

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

שם סוג ברירת המחדל תיאור
backgroundColor string '#FFFFFF' (לבן) צבע הרקע של התרשים בפורמט הצבעים של Chart API.
צבעים מערך<string> אוטומטית ניתן להשתמש בפונקציה הזו כדי להקצות צבעים ספציפיים לכל סדרת נתונים. הצבעים מצוינים בפורמט הצבעים של Chart API. צבע i משמש לעמודה i של הנתונים, שעוטף עד להתחלה אם יש יותר עמודות נתונים מצבעים. אם כל הסדרות מקבלות וריאציות של צבע אחד, צריך להשתמש באפשרות color במקום זאת.
enableEvents boolean false האפשרות הזו גורמת לתרשימים להקפיץ אירועים שהופעלו על ידי משתמשים, כמו לחיצה או העברת עכבר. נתמכת רק בסוגי תרשימים ספציפיים. ראו אירועים בהמשך.
גובה number גובה הקונטיינר גובה התרשים בפיקסלים.
isStacked boolean true המדיניות קובעת אם מספר עמודות נתונים יוצגו כעמודות מוערםות (בניגוד להצגת עמודות מקובצות).
isVertical boolean false המדיניות קובעת אם העמודות יהיו אנכיות.
מקרא string 'ימינה' המיקום והסוג של המקרא. יכול להיות אחת מהאפשרויות הבאות:
  • 'ימין' – מימין לתרשים.
  • 'left' - משמאל לתרשים.
  • 'ראש הדף' – מעל התרשים.
  • 'bottom' – מתחת לתרשים.
  • 'ללא' – לא מוצג מקרא.
מקסימלי number אוטומטי הערך המקסימלי להצגה בציר ה-Y.
דקה number אוטומטי הערך המינימלי להצגה בציר ה-Y.
showCategoryLabels boolean true אם המדיניות מוגדרת כ-False, התוויות של הקטגוריות יוסרו.
showValueLabels boolean true אם המדיניות מוגדרת כ-False, מסיר את התוויות של הערכים.
title string ללא שם טקסט להצגה מעל התרשים.
valueLabelsInterval number אוטומטית מרווח הזמן שבו יוצגו התוויות של ציר הערך. לדוגמה, אם הערך של min הוא 0, הערך של max הוא 100 והערך של valueLabelsInterval הוא 20, בתרשים יוצגו תוויות הצירים במספרים (0, 20, 40, 60, 80 100).
רוחב number רוחב הקונטיינר רוחב התרשים בפיקסלים.

שיטות

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

אירועים

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

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

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