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

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

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

סקירה כללית

קווים גימור יחידים מרובים, או כאלה, שמוצגים עם תמונות באמצעות Google התרשימים 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 לא נכון אם True, ימלא את האזור שמתחת לקו הצבע.
גובה number גובה הקונטיינר גובה התמונות, בפיקסלים.
תווית מיקום string ללא מיקום התוויות. הערכים הנתמכים הם 'none' , 'left' , 'right'.
מקסימלי מערך של מספרים הערך המרבי של הנתונים בכל עקומת תרשים הערך הגבוה ביותר עבור טווח ערכי הנתונים של כל עקומת תרשים. האינדקס שבמערך חייב להיות תואם לאינדקס העמודות ב-DataTable. אם כל הערכים הם null, יהיה זה הערך המקסימלי בסדרה.
דק' מערך של מספרים הערך המינימלי של הנתונים של כל עקומת תרשים הערך הנמוך ביותר עבור טווח ערכי הנתונים של כל עקומת תרשים. האינדקס שבמערך חייב להיות תואם לאינדקס העמודות ב-DataTable. אם כל הערכים הם null, יהיה זה הערך המינימלי בסדרה.
ShowAxisLines boolean נכון אם True, מוצגים קווי ציר. אם FALSE, הן לא, וברירת המחדל עבור setValueLabel היא false.
תוויות של ValueValue boolean True, אלא אם ערך ה-showAxisLines לא נכון. אם True, מוצגות התוויות של ציר הערכים.
שם פריט מערך מחרוזות לא מוצגות כותרות כותרות לשימוש בכל תרשים קו ללא צירים.
רוחב number רוחב הקונטיינר רוחב התרשימים בפיקסלים.
פריסה string 'v' פריסה אנכית או אופקית: 'v' אנכי, 'h' לרוחב.

שיטות

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

אירועים

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

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

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