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

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

פורמט נתונים

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

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

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

שיטות

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

אירועים

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

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

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