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

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

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

סקירה כללית

תרשים שטח שעובר רינדור תמונה באמצעות Google התרשימים 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. כל העמודות (חוץ מהעמודות הראשונות) חייבות להיות מספר. אין הגבלה על מספר העמודות.

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

שם סוג ברירת מחדל תיאור
צבע רקע string ' #FFFFFF' (לבן) צבע הרקע של התרשים בפורמט צבעים של תרשים API.
צבעים מערך<string> אוטומטית אפשר להשתמש בשיטה הזו כדי להקצות צבעים ספציפיים לכל סדרת נתונים. הצבעים מצוינים בפורמט הצבעים של תרשים ה-API. הצבע i משמש לעמודה i data, ועוטף את הערך בהתחלה, אם יש יותר עמודות נתונים מאשר צבעים. אם וריאציות של צבע אחד קבילות בכל הסדרות, יש להשתמש באפשרות color במקום זאת.
enableEvent boolean לא נכון גורם לתרשימים להשליך אירועים שהופעלו על ידי משתמשים, כגון קליק או העברת עכבר. האפשרות נתמכת רק עבור סוגים ספציפיים של תרשימים. עיינו בקטע אירועים בהמשך.
גובה number גובה הקונטיינר גובה התרשים בפיקסלים.
מקרא string 'right' המיקום והסוג של המקרא. יכול להיות אחת מהאפשרויות הבאות:
  • 'right' - משמאל לתרשים.
  • משמאל - משמאל לתרשים.
  • 'top' (למעלה) – מעל לתרשים.
  • 'bottom' (תחתית) – מתחת לתרשים.
  • 'none' - לא מוצג מקרא.
מקסימלי number אוטומטי הערך המקסימלי להצגה בציר ה-Y.
דק' number אוטומטי הערך המינימלי להצגה בציר ה-Y.
תווית-קטגוריות boolean נכון אם המדיניות מוגדרת כ-False, התוויות של הקטגוריות יוסרו (תוויות ציר ה-X).
תוויות של ValueValue boolean נכון אם המדיניות מוגדרת כ-False, התוויות של הערכים יוסרו (תוויות ציר ה-Y).
שם פריט string ללא שם טקסט להצגה מעל לתרשים.
ValueLabelInterval number אוטומטית המרווח שבו יש להציג תוויות של ציר הערכים. לדוגמה, אם min הוא 0, max הוא 100 ו-valueLabelsInterval הוא 20, התרשים יציג את תוויות הציר ב-(0, 20, 40, 60, 80 100).
רוחב number רוחב הקונטיינר רוחב התרשים בפיקסלים.

שיטות

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

אירועים

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

מדיניות נתונים

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