חשוב: החלק של 'תרשימי התמונות' בכלי התרשימים של Google הוצא משימוש באופן רשמי החל מ-20 באפריל 2012. הוא ימשיך לפעול בהתאם למדיניות שלנו בנושא הוצאה משימוש.
סקירה כללית
תרשים תמונות כללי הוא wrapper לכל התרשימים שנוצרו על ידי Google Chart API. חשוב לקרוא את התיעוד של Chart API לפני שמנסים להשתמש בו. לתשומת ליבך: ניתן לשלוח עד 16,000 נתונים באמצעות הצגת הנתונים הזו, בשונה מהמגבלה של 2,000 לשיחות ישירות ל-Chart API.
כל הנתונים מועברים לתרשימים באמצעות DataTable או DataView. בנוסף, חלק מהתוויות מועברות כעמודות בטבלת הנתונים.
כל הפרמטרים האחרים של כתובת ה-URL של ה-API של תרשים (מלבד chd) מועברים כאפשרויות.
על ידי: Google
דוגמאות
הנה כמה דוגמאות לסוגים שונים של תרשימים.
תרשים קו
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
תרשים עמודות אנכי
חשוב לשים לב שבתרשימים של סרגל עוטף אין צורך לציין chxt='x', בדיוק כפי שעושים כשקוראים לתרשים בעצמכם. אם לא מציינים ציר, תרשים התמונות הגנרי מנסה להגדיר את התרשים כברירת מחדל.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
בטעינה
שם החבילה google.charts.load הוא 'imagechart'
google.charts.load('current', {'packages': ['imagechart']});
שם הכיתה הוא google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
פורמט נתונים
קיימים שני פורמטים של נתונים גנריים: האחד לתרשימי מפות והשני לכל שאר התרשימים. חשוב לשים לב שהפורמט המספרי היחיד שנתמך עבור נתונים הוא סוג המספר ב-JavaScript.
הערה אין לקודד כתובות URL של ערכי מחרוזת שמועברים כנתונים או כאפשרויות.
תרשימי מפה
תרשים מפה צריך לכלול טבלת נתונים עם שתי עמודות נדרשות:
- העמודה הראשונה - [string] קוד מדינה או מדינה/מחוז.
- עמודה שנייה - [number] הערך של המדינה או המדינה.
מידע נוסף זמין בתיעוד של תרשים המפה.
תרשימים שאינם מפה
תרשימי מפה לא מופיעים בטבלת נתונים עם שתי עמודות אופציונליות (אחת בהתחלה, אחת בסוף) ועמודה אחת או יותר של נתונים בין:
- העמודה הראשונה - [אופציונלי, מחרוזת] כל רשומה מייצגת תווית שנעשה בה שימוש בציר ה-X (שווה ערך לפרמטר
chlאוchxl) לתרשימים שתומכים בה. - העמודות הבאות – מספר כלשהו של עמודות מספריות, שכל אחת מהן מייצגת סדרת נתונים.
- העמודות האחרונות - [אופציונלי, מחרוזת] כל מספר של עמודות מחרוזת אחרי עמודות הנתונים, כאשר כל רשומה מייצגת תווית של נקודת נתונים עבור תרשימים שתומכים בה. אם ברצונך להשתמש בעמודה הזו, עליך לציין את האפשרות
annotationColumns.
הנתונים יוצגו במגוון דרכים, בהתאם לסוג התרשים. צפייה במסמכי התרשים.
הערה לגבי הוספה של עמודות לאינדקס: התצוגה החזותית הגנרית של תרשים התמונות מסירה את העמודות מהמחרוזת מטבלת הנתונים לפני שליחת הטבלה לשירות של תרשים התרשימים. לכן, האינדקסים של העמודות באפשרויות, בשיטות
ובאירועים המוגדרים בדף זה כוללים את עמודות המחרוזת בספירת האינדקסים;
אבל אינדקסים של עמודות בכל האפשרויות שמטופלות על ידי שירות תרשים ה-API (לדוגמה,
האפשרות chm) מתעלמות מעמודות המחרוזת בספירת האינדקסים.
אפשרויות תצורה
אפשר להגדיר את הרכיבים החזותיים האלה. צריך להגדיר אותם באובייקט האפשרויות שהועברו לשיטה draw() של התצוגה החזותית.
חלק מהאפשרויות הבאות אינן נתמכות בכל סוגי התרשימים. יש לעיין במסמכים
לגבי סוג תרשים התמונה הסטטי. ניתן להעביר כל פרמטר של כתובת URL של תרשים Graph כאפשרות. לדוגמה, הפרמטר של כתובת האתר chg=50,50 מתרשים חזותי יופיע כך: options['chg'] = '50,50'.
הערה לגבי צבעים: אפשרויות הצבע, כמו colors, color וגם backgroundColor, מפורטות בפורמט הצבעים של תרשים ה-API.
הפורמט הזה דומה לפורמט #RRGGBB, אלא שהוא כולל מספר הקסדצימלי אופציונלי
רביעי לציון שקיפות. אין תמיכה בצבעים שקריאים לבני אדם,
כמו 'אדום', 'ירוק', 'כחול' וכו'. פורמט הצבעים של תרשים התרשימים
לא כולל את הסמל #, אבל האפשרויות החזותיות של תרשים התמונות
מקבלות קודי צבעים עם או בלי #.
| שם | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| עמודות הערות | מערך<object> | ללא | תוויות של נקודות נתונים לסוגים שונים של תרשימים. זהו מערך של אובייקטים, כאשר כל אחד מהם מקצה תווית מעוצבת לנקודת נתונים אחת בתרשים. האפשרות הזו זמינה רק בתרשימים שתומכים בנקודות נתונים (אפשר לראות את הנושא המקושר כדי ללמוד אילו מהן קיימות). טבלת הנתונים חייבת לכלול לפחות אחת מהעמודות של תוויות המחרוזת. לכל אובייקט במערך יש את המאפיינים הבאים:
דוגמה - קטע הקוד הזה מגדיר תווית טקסט שחורה בגודל 12 פיקסלים, עם טקסט שנלקח מעמודה 0 ומוקצה לנקודת הנתונים בעמודה 2 באותה שורה: |
| צבע רקע | string | ' #FFFFFF' (לבן) | צבע הרקע של התרשים בפורמט צבעים של תרשים API. |
| color [צבע] | string | אוטומטית | מציין צבע בסיס לשימוש עבור כל הסדרות. כל סדרה תשמש לציון הדרגתי של הצבע שצוין. הצבעים מצוינים בפורמט הצבעים של תרשים ה-API.
המערכת תתעלם מהמאפיין אם colors צוין. |
| צבעים | מערך<string> | אוטומטית | אפשר להשתמש בשיטה הזו כדי להקצות צבעים ספציפיים לכל סדרת נתונים. הצבעים מצוינים
בפורמט הצבעים של תרשים ה-API.
הצבע i משמש לעמודה i data, ועוטף את הערך בהתחלה, אם יש יותר עמודות נתונים מאשר צבעים. אם וריאציות של צבע
אחד קבילות בכל הסדרות, יש להשתמש באפשרות color
במקום זאת. |
| enableEvent | boolean | לא נכון | גורם לתרשימים להשליך אירועים שהופעלו על ידי משתמשים, כגון קליק או העברת עכבר. האפשרות נתמכת רק עבור סוגים ספציפיים של תרשימים. עיינו בקטע אירועים בהמשך. |
| מילוי | boolean | לא נכון | אם True, ממלא את האזור מתחת לכל קו. זמין רק לתרשימי קו. |
| העמודה המוסתרת הראשונה | number | ללא | אינדקס של עמודת נתונים. העמודה שצוינה וכל העמודות הבאות לא ישמשו לשרטוט הרכיבים העיקריים של סדרת התרשימים (כמו קווים בתרשים עמודות או עמודות בתרשים עמודות), ובמקום זאת הם ישמשו כנתונים לסמנים ולהערות אחרות. חשוב לשים לב שעמודות מחרוזת נכללות בספירת האינדקס הזו. |
| גובה | number | 200 | גובה התרשים, בפיקסלים. אם חסר או לא נמצא בטווח מקובל, ייעשה שימוש בגובה של הרכיב שמכיל אותו. אם ערך זה נמצא גם מחוץ לטווח המותר, המערכת תשתמש בגובה ברירת המחדל. |
| labels | string | 'ללא' | [תרשים עוגה בלבד]: תווית, אם יש, להצגה עבור כל פרוסה. יש לבחור מהערכים הבאים:
|
| מקרא | string | 'right' | איפה להציג מקרא של תרשים, ביחס לתרשים. צריך לציין אחת מהאפשרויות הבאות: 'top', 'bottom', 'left', 'right', 'none'. התעלמות מתרשימים שלא כוללים מקרא (כמו תרשימי מפה). |
| מקסימלי | number | ערך נתונים מקסימלי | הערך המקסימלי שמוצג בסולם. המערכת התעלמה מתרשימי עוגה. ברירת המחדל היא ערך הנתונים המקסימלי, מלבד תרשימי עמודות, שבהם ערך ברירת המחדל הוא ערך הנתונים המקסימלי. המערכת מתעלמת מהתרשים הזה כאשר לטבלה יש יותר מעמודת נתונים אחת. |
| דק' | number | ערך של נתוני חיקוי | הערך המינימלי המוצג בסולם. המערכת התעלמה מתרשימי עוגה. ערך ברירת המחדל הוא ערך הנתונים המינימלי, פרט לתרשים עמודות, שבו ברירת המחדל היא אפס. המערכת מתעלמת מהתרשים הזה כאשר לטבלה יש יותר מעמודת נתונים אחת. |
| תווית-קטגוריות | boolean | נכון | אם תוויות צריכות להופיע בציר הקטגוריה (כלומר שורה). זמינות רק לתרשימי קו ולתרשימי עמודות. |
| תוויות של ValueValue | boolean | נכון | הערך True מציג תווית על ציר הערך. זמינות רק לתרשימי קו ותרשימי עמודות. |
| SingleColumnDisplay | number | ללא | רינדור רק של עמודת הנתונים שצוינה. המספר הזה הוא מדד מבוסס אפס בטבלה, כאשר אפס הוא עמודת הנתונים הראשונה. הצבע שמוקצה לעמודה יחידה זהה לצבע שמוצג בכל העמודות. אי אפשר להשתמש בו עם תרשימי עוגה או מפות. |
| שם פריט | string | המחרוזת ריקה | כותרת התרשים. אם לא מצוין, לא תוצג כותרת. פרמטר
התרשים המקביל הוא chtt. |
| ValueLabelInterval | number | אוטומטית | המרווח שבו יש להציג תוויות של ציר הערכים. לדוגמה, אם min
הוא 0, max הוא 100 ו-valueLabelsInterval
הוא 20, התרשים יציג את תוויות הציר ב-(0, 20, 40, 60, 80 100). |
| רוחב | number | 400 | רוחב התרשים, בפיקסלים. אם חסר או לא נמצא בטווח מקובל, נעשה שימוש ברוחב של הרכיב שמכיל אותו. אם ערך זה נמצא גם מחוץ לטווח המקובל, ייעשה שימוש ברוחב ברירת המחדל. |
שיטות
| שיטה | סוג הערך המוחזר | תיאור |
|---|---|---|
draw(data, options) |
ללא | משרטט את המפה. |
getImageUrl() |
String | מחזירה את כתובת ה-URL של ה-API של תרשים Google שבו נעשה שימוש לבקשת התרשים. לתשומת ליבך: השם יכול להכיל עד 2,000 תווים. לפרטים נוספים, ניתן לעיין ב-Google Chart API. |
אירועים
אם המאפיין enableEvents מוגדר כ-True, תרשימים תומכים
יגרמו לאירועים של משתמשים המפורטים בטבלה שבהמשך. כל האירועים האלה
מחזירים אובייקט event עם המאפיינים הבאים:
type– מחרוזת המייצגת את סוג האירוע.region– מזהה של האזור המושפע. מוסיפים את הפרמטרchof=jsonלסוג התרשים הגולמי כדי לראות רשימה של שמות זמינים. פרטים נוספים מופיעים כאן:chof=json.
| שם | תיאור | סוג ערך |
|---|---|---|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. | מזהה, הודעה |
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל רכיב בתרשים. | "עכבר" |
onmouseout |
מופעל כשהמשתמש מרחף עם העכבר מעל רכיב תרשים. | "עכבר" |
onclick |
מופעל כשמשתמש לוחץ על רכיב תרשים. | "קליק" |
אילו תרשימים תומכים באירועים?
תרשימים שתומכים בפרמטר chof=json תומכים באירועי המרה (כלומר, בכל התרשימים מלבד תרשימים מיוחדים, כמו
קודי QR).
דוגמה לטיפול באירועים
הנה דוגמה שמראה סרגל שמתעד קליקים על העכבר.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
מדיניות נתונים
הנתונים נשלחים לשירות Google Chart API.
התאמה לשוק המקומי
התצוגה החזותית תומכת בכל התאמה לשוק הנתמכת על ידי שירות Google Chart.