תרשים: קו ללא צירים (תמונה)

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

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

סקירה כללית

תרשים קו ללא צירים יחיד או עם מספר קווים אנכיים שמעובדים באמצעות תמונות באמצעות Google Charts API. התמונות נכללות בטבלת HTML.

דוגמה

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

בטעינה

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

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

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

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

פורמט נתונים

כל מספר של עמודות. כל העמודות צריכות להכיל מספרים. כל עמודה מוצגת כציר אחד.

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

שם סוג ברירת המחדל תיאור
color [צבע] string מציינת צבע לכל התרשימים. מחרוזת בפורמט #rrggbb. לדוגמה: '#00cc00'. בשימוש רק אם האפשרות colors לא מוגדרת.
צבעים מערך של מחרוזות צבעי ברירת מחדל הצבעים שבהם רוצים להשתמש בעמודות הנתונים. מערך מחרוזות כאשר כל רכיב הוא מחרוזת בפורמט #rrggbb. לדוגמה: '#00cc00'. צבע i משמש עבור עמודת הנתונים i. אם מספר הצבעים קטן ממספר העמודות, המערכת תמלא את בחירת הצבעים.
מילוי boolean false אם הערך הוא True, האזור שמתחת לקו יאוכלס בצבע.
גובה number גובה הקונטיינר גובה התמונות, בפיקסלים.
labelPosition string אין המיקום של התוויות. הערכים הנתמכים הם 'none', 'שמאל', 'ימין'.
מקסימלי מערך של מספרים ערך הנתונים המקסימלי של כל תרשים קו ללא צירים הערך הגבוה ביותר עבור טווח ערכי הנתונים של כל עקומת תרשים. האינדקס במערך חייב להתאים לאינדקס העמודה ב-DataTable. אם כל הערכים הם null, זה יהיה הערך המקסימלי בסדרה.
דקה מערך של מספרים ערך הנתונים המינימלי של כל תרשים קו ללא צירים הערך הנמוך ביותר עבור טווח ערכי הנתונים של כל עקומת תרשים. האינדקס במערך חייב להתאים לאינדקס העמודה ב-DataTable. אם כל הערכים הם null, זהו הערך המינימלי בסדרה.
showAxisLines boolean true אם True, יוצגו קווי הצירים. אם הערך הוא False, הערכים לא יהיו וברירת המחדל של showValueLabels היא False.
showValueLabels boolean True, חוץ מהמקרים שבהם showAxisLines מוגדר כ-False. אם True, יוצגו התוויות של ציר הערך.
title מערך של מחרוזות לא מוצגים פריטים כותרות לשימוש בכל Sparkline.
רוחב number רוחב הקונטיינר רוחב התרשימים בפיקסלים.
פריסה string 'v' פריסה אנכית או אופקית: 'v' לפורמט אנכי, 'h' לרוחב.

שיטות

שיטה סוג הערך המוחזר תיאור
draw(data, options) אין מצייר את התרשים.
getSelection() מערך של רכיבי בחירה מחזירה את האינדקסים של התרשימים שנבחרו כמערך אובייקטים. לכל אובייקט יש מאפיין עמודה שמכיל את מספר העמודה של עקומת תרשים שנבחרה. המערכת יכולה להחזיר יותר מעמודה אחת שנבחרה.
setSelection(selection) אין בחירת ה-Sparklines שצוינו וביטול הבחירה של כל תרשים קו ללא צירים שלא צוין. הבחירה היא מערך של אובייקטים, שלכל אחד מהם יש מאפיין column מספרי, שהוא האינדקס של עקומת התרשים שנבחרה. מידע נוסף זמין ב-setSelection().

אירועים

שם תיאור תכונות
בחירה אירוע רגיל של בחירה. אין

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

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