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