חשוב: החלק של 'תרשימי התמונות' בכלי התרשימים של Google הוצא משימוש באופן רשמי החל מ-20 באפריל 2012. הוא ימשיך לפעול בהתאם למדיניות שלנו בנושא הוצאה משימוש.
סקירה כללית
קווים גימור יחידים מרובים, או כאלה, שמוצגים עם תמונות באמצעות 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.