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

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

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

שם הכיתה של התצוגה החזותית הוא google.visualization.ImageLineChart. 

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

פורמט נתונים

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

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

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

שיטות

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

אירועים

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

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

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