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

חשוב: החלק של 'תרשימי תמונות' בכלים של 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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

בטעינה

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

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

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

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

פורמט נתונים

כל עמודה מייצגת קו בתרשים. כל רשומה היא הערך של ציר ה-Y באותו ציר ה-X, והתצוגה החזותית מחברת אותם עם קו ישר, ואז היא ממלאת את האזור שמתחת לקו.

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

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

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

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

שיטות

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

אירועים

אפשר להירשם כדי לשמוע את האירועים שמתוארים בדף General Image Chart.

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

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