סקירה כללית
תרשים בועות שמעובד בתוך הדפדפן באמצעות SVG או VML. הצגת טיפים בעת העברת העכבר מעל לבועות.
תרשים בועות משמש להצגת מערך נתונים שמכיל שניים עד ארבעה מאפיינים. שני המאפיינים הראשונים מומחשים כקואורדינטות, השלישי מוצג כצבע והשלישי כגודל.
דוגמה
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawSeriesChart); function drawSeriesChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 11}} }; var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="series_chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
צבע לפי מספרים
ניתן להשתמש באפשרות colorAxis
כדי לצבוע את הבועות ביחס לערך, כפי שאפשר לראות בדוגמה הבאה.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'X', 'Y', 'Temperature'], ['', 80, 167, 120], ['', 79, 136, 130], ['', 78, 184, 50], ['', 72, 278, 230], ['', 81, 200, 210], ['', 72, 170, 100], ['', 68, 477, 80] ]); var options = { colorAxis: {colors: ['yellow', 'red']} }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
התאמה אישית של תוויות
אפשר לשלוט בגופן הבועה, בגופן ובצבע באמצעות האפשרות bubble.textStyle
:
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } };
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } }; var chart = new google.visualization.BubbleChart(document.getElementById('textstyle')); chart.draw(data, options); } </script> </head> <body> <div id="textstyle" style="width: 900px; height: 500px;"></div> </body> </html>
קשה יותר לקרוא את התוויות בתרשים שלמעלה, ואחת הסיבות לכך היא השטח הלבן שמסביב. פעולה זו נקראת aura. אם אתם מעדיפים להשתמש בתרשימים ללא הקישורים, תוכלו להגדיר את bubble.textStyle.auraColor
לערך 'none'
.
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none' } } };
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none', } } }; var chart = new google.visualization.BubbleChart(document.getElementById('noAura')); chart.draw(data, options); } </script> </head> <body> <div id="noAura" style="width: 900px; height: 500px;"></div> </body> </html>
בטעינה
שם החבילה של google.charts.load
הוא "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
שם הכיתה הוא google.visualization.BubbleChart
.
var visualization = new google.visualization.BubbleChart(container);
פורמט נתונים
שורות: כל שורה בטבלה מייצגת בועה אחת.
עמודות:
עמודה 0 | עמודה 1 | עמודה 2 | עמודה 3 (אופציונלי) | עמודה 4 (אופציונלי) | |
---|---|---|---|---|---|
מטרה: | מזהה (שם) של הבועה | קואורדינטת X | קואורדינטת Y | מזהה סדרה או ערך שמייצג צבע בסולם צבעים הדרגתי,
בהתאם לסוג העמודה:
|
גודל. הערכים בעמודה הזו ממופים לערכי פיקסלים בפועל באמצעות האפשרות sizeAxis . |
סוג הנתונים: | string | number | number | מחרוזת או מספר | number |
אפשרויות הגדרה
שם | |
---|---|
אנימציה.משך |
משך האנימציה, באלפיות השנייה. פרטים נוספים זמינים במסמכי האנימציה. סוג: מספר
ברירת מחדל: 0
|
אנימציה. |
פונקציית ההתאמה לצפייה על האנימציה. אלו האפשרויות הזמינות:
סוג: מחרוזת
ברירת מחדל: 'לינארי'
|
אנימציה.התחלה |
קובע אם התרשים יונפש בהגרלה הראשונית. אם הערך סוג: בוליאני
ברירת המחדל לא
|
ציר_כותרת |
איפה למקם את כותרות הציר, בהשוואה לאזור התרשים. ערכים נתמכים:
סוג: מחרוזת
ברירת מחדל: 'מחוץ'
|
צבע רקע |
צבע הרקע של האזור הראשי בתרשים. הוא יכול להיות מחרוזת צבע פשוטה ב-HTML, לדוגמה: Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
הפעלה ברקע |
צבע הגבול של התרשים, כמחרוזת צבע של HTML. סוג: מחרוזת
ברירת מחדל: '#666'
|
colorColor.stringWidth |
רוחב הגבול, בפיקסלים. סוג: מספר
ברירת מחדל: 0
|
backgroundColor.fill |
צבע המילוי של התרשים, כמחרוזת צבע של HTML. סוג: מחרוזת
ברירת מחדל: 'לבן'
|
בועה |
אובייקט עם חברים כדי להגדיר את המאפיינים החזותיים של הבועות. Type: אובייקט
ברירת מחדל: null
|
Bubble.opacity |
השקיפות של הבועות, כאשר 0 שקוף לחלוטין ו-1 אטום לחלוטין. סוג: מספר בין 0.0 ל-1.0
ברירת מחדל: 0.8
|
בועת בועות |
צבע הקפיצה של הבועות. סוג: מחרוזת
Default: '#ccc'
|
Bubble.textStyle |
אובייקט שמציין את סגנון הטקסט של הבועה. לאובייקט יש את הפורמט הבא: {color: <string>, fontName: <string>, fontSize: <number>}
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
תרשים גבולות |
אובייקט עם חברי קבוצה כדי להגדיר את המיקום והגודל של אזור התרשים (שבו התרשים
עצמו משורטט, מלבד הציר והאגדות). ניתן להשתמש בשני פורמטים: מספר, או
מספר ואחריו %. מספר פשוט הוא ערך בפיקסלים; מספר ואחריו % הוא אחוז. לדוגמה: Type: אובייקט
ברירת מחדל: null
|
ChartArea.backgroundColor |
צבע הרקע של אזור התרשים. כשמשתמשים במחרוזת, היא יכולה להיות מחרוזת הקסדצימלית (למשל, ' #fdc') או בשם של צבע אנגלי. כשאובייקט נמצא בשימוש, אפשר לספק את המאפיינים הבאים:
Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
ChartArea.left |
מה המרחק מהתרשים מהגבול השמאלי? סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
התרשיםArea.top |
מה המרחק מהתרשים מהגבול העליון? סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
ChartArea.width |
רוחב האזור בתרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
ChartArea.height |
גובה שטח התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
צבעים |
הצבעים שיש להשתמש בהם ברכיבי התרשים. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
|
צבע ציר |
אובייקט שמציין מיפוי בין ערכים וצבעים של עמודת צבע או סולם הדרגתי. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type: אובייקט
ברירת מחדל: null
|
colorAxis.minValue |
אם השדה הזה קיים, מציין ערך מינימלי לנתוני צבע של תרשים. הערכים של נתוני צבעים מהערך הזה
ונמוכים יותר יוצגו כצבע הראשון בטווח של סוג: מספר
ברירת מחדל: הערך המינימלי של עמודת הצבע בנתוני התרשים
|
colorAxis.maxValue |
אם השדה הזה קיים, הוא מציין ערך מקסימלי לנתוני צבע של תרשים. הערכים של נתוני צבעים מהערך הזה
ומעלה יוצגו כצבע האחרון בטווח סוג: מספר
ברירת מחדל: הערך המקסימלי של עמודת הצבע בנתוני התרשים
|
צבעAxis.values |
אם השדה הזה קיים, שולט באופן שבו הערכים משויכים לצבעים. כל ערך משויך לצבע שתואם במערך Type: מערך של מספרים
ברירת מחדל: null
|
צבעAxis.colors |
הצבעים שרוצים להקצות לערכים בתצוגה החזותית. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: סוג: מערך של מחרוזות צבע
ברירת מחדל: null
|
colorAxis.legend |
אובייקט שמציין את הסגנון של מקרא צבעים הדרגתי. Type: אובייקט
ברירת מחדל: null
|
colorAxis.legend.position |
מיקום המקרא. יכול להיות אחת מהאפשרויות הבאות:
Type: אובייקט
ברירת מחדל: 'למעלה'
|
colorAxis.legend.textStyle |
אובייקט שמציין את סגנון הטקסט של המקרא. לאובייקט יש את הפורמט הבא: {color: <string>, fontName: <string>, fontSize: <number>}
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
colorAxis.legend.numberFormat |
מחרוזת פורמט עבור תוויות מספריות. זו קבוצת משנה של
קבוצת דפוסי ICU
.
למשל, הערכים "10.66", "10.6" ו-"10.0" יוצגו על ידי סוג: מחרוזת
ברירת מחדל: אוטומטי
|
enableInteractive |
האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמש. אם ההעדפה מקבלת את הערך False, התרשים לא יציג אירועי 'select' או אירועים אחרים מבוססי-אינטראקציות (אבל יגרום לתיעוד של אירועי הכנה או שגיאות), ולא יציג טקסט מרחף או ישתנה בדרך אחרת בהתאם לקלט של המשתמשים. סוג: בוליאני
ברירת מחדל: נכון
|
explorer, אקספלורר |
האפשרות זו תכונה ניסיונית שעשויה להשתנות בגרסאות עתידיות. הערה: כלי המחקר פועל רק עם צירים רציפים (כמו מספרים או תאריכים). Type: אובייקט
ברירת מחדל: null
|
explorer.actions |
סייר Google התרשימים תומך בשלוש פעולות:
סוג: מערך של מחרוזות
ברירת מחדל: ['dragToPan', 'rightClickToReset']
|
explorer.ציר |
כברירת מחדל, משתמשים יכולים להזיז אופקית ואנכית גם כשמשתמשים באפשרות סוג: מחרוזת
ברירת מחדל: הזזה אופקית ואנכית
|
explorer.keepInBounds |
כברירת מחדל, משתמשים יכולים לנוע בכל מקום, בלי קשר למיקום הנתונים. כדי לוודא שהמשתמשים לא זזים מעבר לתרשים המקורי, יש להשתמש ב- סוג: בוליאני
ברירת מחדל: False
|
explorer.maxZoomIn |
הערך המקסימלי שהסייר יכול להגדיל. כברירת מחדל, המשתמשים יוכלו להתקרב מספיק
כך שהם יראו רק 25% מהתצוגה המקורית. ההגדרה
סוג: מספר
ברירת מחדל: 0.25
|
explorer.maxZoomOut |
הערך המקסימלי שהסייר יכול להקטין. כברירת מחדל, המשתמשים יוכלו להתרחק מהמקום
מספיק כדי שהתרשים יתפוס רק שליש מהשטח הזמין. הגדרה של
סוג: מספר
ברירת מחדל: 4
|
explorer.ZoomDelta |
כשמשתמשים מגדילים או מקטינים את המרחק מהתצוגה, סוג: מספר
ברירת מחדל: 1.5
|
גודל גופן |
גודל הגופן המוגדר כברירת מחדל, בפיקסלים, של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים. סוג: מספר
ברירת מחדל: אוטומטי
|
שם גופן |
תצוגת ברירת המחדל של הגופן של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים. סוג: מחרוזת
ברירת מחדל: 'xls'
|
forceIFrame |
משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames). סוג: בוליאני
ברירת מחדל: False
|
ציר |
אובייקט עם חברים כדי להגדיר אלמנטים שונים של הציר האופקי. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type: אובייקט
ברירת מחדל: null
|
צירים הקסדצימליים |
הבסיס לציר האופקי. סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.BasedColor |
צבע הבסיס של הציר האופקי. ניתן להשתמש בכל מחרוזת צבע בפורמט HTML, לדוגמה: סוג: מספר
ברירת מחדל: 'שחור'
|
hAxis.direction |
הכיוון שבו גדלים הערכים לאורך הציר האופקי. אפשר לציין סוג: 1- או
ברירת מחדל: 1
|
hAxis.format |
מחרוזת פורמט עבור תוויות ציר מספרי. זו קבוצת משנה של
קבוצת דפוסי ICU
. למשל, הערכים "1,000%",
"750%" ו-"50%" יוצגו עבור
העיצוב בפועל שהוחלו על התווית נגזר מהלוקאל שבו ה-API נטען. לפרטים נוספים, אפשר לקרוא את המאמר טעינת תרשימים עם שפה או אזור ספציפיים .
כשהמערכת קובעת את ערכי הסימון ואת קווי הרשת, מביאים בחשבון כמה שילובים
חלופיים של כל האפשרויות הרלוונטיות.
כך שאפשר לציין את הערך סוג: מחרוזת
ברירת מחדל: אוטומטי
|
hAxis.gridlines |
אובייקט עם מאפיינים להגדרת קווי הרשת בציר האופקי. שימו לב שהקווי הרשת של הציר האופקי משורטטים באופן אנכי. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {color: '#333', minSpacing: 20} Type: אובייקט
ברירת מחדל: null
|
hAxis.gridlines.color |
צבע קווי הרשת האופקיים בתוך שטח התרשים. יש לציין מחרוזת חוקית של צבע HTML. סוג: מחרוזת
ברירת מחדל: ' #CCC'
|
hAxis.gridlines.count |
המספר המשוער של קווי רשת אופקיים בתוך האזור בתרשים.
אם מציינים מספר חיובי לציון סוג: מספר
ברירת מחדל: -1
|
hAxis.gridlines.unit |
המדיניות הזו עוקפת את פורמט ברירת המחדל של היבטים שונים של סוגי נתונים לפי תאריך/תאריך ושעה/שעה של היום, כי היא בשימוש עם קווי רשת מחושבים בתרשים. עיצוב לפי שנים, חודשים, ימים, שעות, דקות, שניות ואלפיות שנייה. הפורמט הכללי הוא: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } מידע נוסף זמין בקטע תאריכים ושעות. Type: אובייקט
ברירת מחדל: null
|
hAxis.minorGridlines |
אובייקט עם חברים להגדרת קווי הרשת המשניים בציר האופקי, בדומה לאפשרות hAxis.gridlines. Type: אובייקט
ברירת מחדל: null
|
hAxis.minorGridlines.color |
צבע קווי הרשת המשניים האופקיים בתוך אזור התרשים. יש לציין מחרוזת חוקית של צבע HTML. סוג: מחרוזת
ברירת מחדל: שילוב של צבעי הרשת והרקע
|
hAxis.minorGridlines.count |
האפשרות סוג: מספר
ברירת מחדל: 1
|
hAxis.minorGridlines.units |
מדיניות זו עוקפת את פורמט ברירת המחדל של היבטים שונים של סוגי נתונים של תאריך/תאריך/שעה ביום, כשמשתמשים בה בקווי מידע משניים מחושבים בתרשים. עיצוב לפי שנים, חודשים, ימים, שעות, דקות, שניות ואלפיות שנייה. הפורמט הכללי הוא: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } מידע נוסף זמין בקטע תאריכים ושעות. Type: אובייקט
ברירת מחדל: null
|
hAxis.logScale |
מאפיין סוג: בוליאני
ברירת מחדל: False
|
hAxis.scaleType |
מאפיין
סוג: מחרוזת
ברירת מחדל: null
|
hAxis.textPosition |
המיקום של טקסט הציר האופקי, ביחס לאזור התרשים. ערכים נתמכים: 'out', 'in', 'none'. סוג: מחרוזת
ברירת מחדל: 'מחוץ'
|
hAxis.textStyle |
אובייקט שמציין את סגנון הטקסט של הציר האופקי. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
מחליף את הסימונים של ציר ה-X שנוצר באופן אוטומטי במערך שצוין. כל רכיב במערך צריך להיות ערך שנתן חוקי (למשל מספר, תאריך, תאריך ושעה או שעה) או אובייקט. אם זהו אובייקט, הוא צריך לכלול מאפיין
ה-viewWindow יורחב באופן אוטומטי כדי לכלול את ערכי המינימום והמקסימום, אלא אם יצוינו דוגמאות:
סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
|
hAxis.title |
מאפיין סוג: מחרוזת
ברירת מחדל: null
|
hAxis.titleTextStyle |
אובייקט שמציין את סגנון הטקסט של כותרת הציר האופקי. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
הפונקציה הזו מעבירה את הערך המקסימלי של הציר האופקי לערך שצוין, כי הוא יופיע בצד ימין ברוב
התרשימים. המערכת מתעלמת מהפרמטר הזה אם הוא מוגדר לערך קטן יותר מערך ה-x המקסימלי של הנתונים.
הנכס סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.minValue |
הפונקציה הזו מעבירה את הערך המינימלי של הציר האופקי לערך שצוין, וברוב התרשימים נשארת משמאל. המערכת מתעלמת מהפרמטר הזה אם הוא מוגדר לערך גדול יותר מערך ה-x המינימלי של הנתונים.
הנכס סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.viewWindowMode |
ההגדרה קובעת איך משנים את קנה המידה של הציר האופקי כדי לעבד את הערכים בתוך אזור התרשים. יש תמיכה בערכי המחרוזת הבאים:
סוג: מחרוזת
ברירת מחדל:
שווה ערך ל-'יפה', אבל
haxis.viewWindow.min ו-haxis.viewWindow.max מקבלים עדיפות.
|
hAxis.viewWindow |
קביעת טווח החיתוך של הציר האופקי. Type: אובייקט
ברירת מחדל: null
|
hAxis.viewWindow.max |
הערך המקסימלי של נתונים אופקי לעיבוד. המערכת מתעלמת מהמאפיין הזה כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.viewWindow.min |
הערך המינימלי של נתונים אופקי לעיבוד. המערכת מתעלמת מהמאפיין הזה כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הגובה של הרכיב שמכיל את הסרטון
|
מקרא |
אובייקט עם חברים כדי להגדיר היבטים שונים של המקרא. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: אובייקט
ברירת מחדל: null
|
האגדה |
היישור של המקרא. יכול להיות אחת מהאפשרויות הבאות:
ההתחלה, המרכז והסוף הם יחסיים לסגנון של המקרא - אנכי או אופקי. לדוגמה, במקרא 'right', 'start' ו-'end' נמצאים בחלק העליון ובחלק התחתון בהתאמה, עבור המקרא 'top', 'start' ו-'end' יופיעו בפינה הימנית ובפינה השמאלית של האזור, בהתאמה. ערך ברירת המחדל תלוי במיקום המקרא. עבור אגדות 'תחתיות', ברירת המחדל היא 'center', ואילו אגדות אחרות מוגדרות כברירת מחדל ל-'start'. סוג: מחרוזת
ברירת מחדל: אוטומטי
|
האגדה.maxLines |
מספר השורות המרבי במקרא. אפשר להגדיר את המספר למספר גדול יותר כדי להוסיף קווים למקרא. הערה: הלוגיקה המדויקת ששימשה לקביעת מספר הקווים שעברו עיבוד עדיין עדיין משתנה. האפשרות הזו פועלת כרגע רק כש-אגד.position הוא 'top' (למעלה). סוג: מספר
ברירת מחדל: 1
|
Index.pageIndex |
אינדקס הדף הראשון שנבחר מבוסס אפס. סוג: מספר
ברירת מחדל: 0
|
אגדה |
מיקום המקרא. יכול להיות אחת מהאפשרויות הבאות:
סוג: מחרוזת
ברירת מחדל: 'ימין'
|
style.textStyle |
אובייקט שמציין את סגנון הטקסט של המקרא. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
אפשרויות בחירה |
אם הערך של סוג: מחרוזת
ברירת מחדל: 'סינגל'
|
סדרה |
אובייקט של אובייקטים, כאשר המפתחות הם שמות סדרות (הערכים בעמודה 'צבע') וכל אובייקט שמתאר את הפורמט של הסדרה המתאימה בתרשים. אם לא מציינים ערך של סדרה או ערך, המערכת תשתמש בערך הגלובלי. כל אובייקט תומך במאפיינים הבאים:
series: {'Europe': {color: 'green'}} סוג: אובייקט עם אובייקטים מקוננים
ברירת מחדל: {}
|
גודלציר |
אובייקט עם חברים כדי להגדיר איך הערכים ישויכו לגודל הבועה. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {minValue: 0, maxSize: 20} Type: אובייקט
ברירת מחדל: null
|
גודלAxis.maxSize |
הרדיוס המקסימלי של הבועה הכי גדולה שאפשר, בפיקסלים. סוג: מספר
ברירת מחדל: 30
|
sizeAxis.maxValue |
ערך הגודל (כפי שמופיע בנתוני התרשים) למיפוי אל סוג: מספר
ברירת מחדל: הערך המקסימלי של עמודת הגודל בנתוני התרשים
|
sizeAxis.minSize |
רדיוס מינימלי של הבועה הקטנה ביותר האפשרית, בפיקסלים. סוג: מספר
ברירת מחדל: 5
|
sizeAxis.minValue |
ערך הגודל (כפי שמופיע בנתוני התרשים) למיפוי אל סוג: מספר
ברירת מחדל: הערך המינימלי של עמודת הגודל בנתוני התרשים
|
מיון בועה גודל |
אם True, המיון של הבועות מתבצע לפי גודל כך שהבועות הקטנות יותר יופיעו מעל לבועות הגדולות יותר. אם False, הבועות ממוינות לפי הסדר שלהן בטבלת הנתונים. סוג: בוליאני
ברירת מחדל: נכון
|
עיצוב |
עיצוב הוא קבוצה של ערכי אפשרויות שהוגדרו מראש, והם פועלים יחד כדי להשיג התנהגות ספציפית בתרשים או אפקט חזותי. נכון לעכשיו, אפשר להשתמש רק בעיצוב אחד:
סוג: מחרוזת
ברירת מחדל: null
|
שם פריט |
טקסט להצגה מעל לתרשים. סוג: מחרוזת
ברירת מחדל: ללא שם
|
כותרת |
איפה למקם את כותרת התרשים, בהשוואה לאזור התרשים. ערכים נתמכים:
סוג: מחרוזת
ברירת מחדל: 'מחוץ'
|
סגנון טקסט |
אובייקט שמציין את סגנון הטקסט של הכותרת. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
הסבר קצר |
אובייקט עם חברים להגדרת אלמנטים שונים של הסבר קצר. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמתואר כאן: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: אובייקט
ברירת מחדל: null
|
overview.isHtml |
אם היא מוגדרת כ-true, משתמשים בהסברים קצרים על HTML (ולא ברינדור SVG) פרטים נוספים זמינים במאמר התאמה אישית של תוכן של הסברים קצרים. הערה: ההתאמה האישית של תוכן ההסבר הקצר ב-HTML באמצעות תפקיד נתוני העמודה של ההסבר הקצר לא נתמכת על ידי התצוגה החזותית תרשים בועות. סוג: בוליאני
ברירת מחדל: False
|
overview.textStyle |
אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
overview.trigger |
האינטראקציה של המשתמש שגרמה להצגת ההסבר הקצר:
סוג: מחרוזת
ברירת מחדל: 'התמקדות'
|
צירים |
אובייקט עם חברים כדי להגדיר רכיבים שונים בציר האנכי. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type: אובייקט
ברירת מחדל: null
|
0 |
מאפיין סוג: מספר
ברירת מחדל: אוטומטי
|
vAxis.webkitColor |
קביעת צבע הבסיס של הציר האנכי. ניתן להשתמש בכל מחרוזת צבע בפורמט HTML, לדוגמה: סוג: מספר
ברירת מחדל: 'שחור'
|
vAxis.direction |
הכיוון שבו גדלים הערכים לאורך הציר האנכי. כברירת מחדל, הערכים הנמוכים נמצאים בתחתית התרשים. אפשר לציין סוג: 1- או
ברירת מחדל: 1
|
vAxis.format |
מחרוזת פורמט עבור תוויות ציר מספרי. זו קבוצת משנה של
קבוצת דפוסי ICU
.
למשל, הערכים "1,000%",
"750%" ו-"50%" יוצגו עבור
העיצוב בפועל שהוחלו על התווית נגזר מהלוקאל שבו ה-API נטען. לפרטים נוספים, אפשר לקרוא את המאמר טעינת תרשימים עם שפה או אזור ספציפיים .
כשהמערכת קובעת את ערכי הסימון ואת קווי הרשת, מביאים בחשבון כמה שילובים
חלופיים של כל האפשרויות הרלוונטיות.
כך שאפשר לציין את הערך סוג: מחרוזת
ברירת מחדל: אוטומטי
|
vAxis.gridlines |
אובייקט עם חברים להגדרת קווי הרשת בציר האנכי. שימו לב שקווי הרשת של הציר האנכי משורטטים אופקית. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {color: '#333', minSpacing: 20} Type: אובייקט
ברירת מחדל: null
|
vAxis.gridlines.color |
הצבע של קווי הרשת האנכיים בתוך אזור התרשים. יש לציין מחרוזת חוקית של צבע HTML. סוג: מחרוזת
ברירת מחדל: ' #CCC'
|
vAxis.gridlines.count |
המספר המשוער של קווי רשת אופקיים בתוך האזור בתרשים.
אם מציינים מספר חיובי לציון סוג: מספר
ברירת מחדל: -1
|
vAxis.gridlines.units |
המדיניות הזו עוקפת את פורמט ברירת המחדל של היבטים שונים של סוגי נתונים לפי תאריך/תאריך ושעה/שעה של היום, כי היא בשימוש עם קווי רשת מחושבים בתרשים. עיצוב לפי שנים, חודשים, ימים, שעות, דקות, שניות ואלפיות שנייה. הפורמט הכללי הוא: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } מידע נוסף זמין בקטע תאריכים ושעות. Type: אובייקט
ברירת מחדל: null
|
vAxis.minorGridlines |
אובייקט עם חברים להגדרת קווי הרשת המשניים בציר האנכי, באופן דומה לאפשרות vAxis.gridlines. Type: אובייקט
ברירת מחדל: null
|
vAxis.minorGridlines.color |
הצבע של קווי הרשת המשניים האנכיים בתוך אזור התרשים. יש לציין מחרוזת חוקית של צבע HTML. סוג: מחרוזת
ברירת מחדל: שילוב של צבעי הרשת והרקע
|
vAxis.minorGridlines.count |
האפשרות minGridlines.count הוצאה משימוש ברובה, מלבד השבתה של קווי רשת משניים על ידי הגדרת הספירה כ-0. מספר קווי הרשת המזעריים תלוי במרווחי הזמן של קווי רשת ראשיים (כדאי לעיין בקטע vAxis.gridlines.interval) וברווח המינימלי הנדרש (מידע נוסף זמין בקטע vAxis.minorGridlines.minSpacing). סוג: מספר
ברירת מחדל: 1
|
vAxis.minorGridlines.units |
מדיניות זו עוקפת את פורמט ברירת המחדל של היבטים שונים של סוגי נתונים של תאריך/תאריך/שעה ביום, כשמשתמשים בה בקווי מידע משניים מחושבים בתרשים. עיצוב לפי שנים, חודשים, ימים, שעות, דקות, שניות ואלפיות שנייה. הפורמט הכללי הוא: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } מידע נוסף זמין בקטע תאריכים ושעות. Type: אובייקט
ברירת מחדל: null
|
vAxis.logScale |
אם True, הציר האנכי מוגדר בקנה מידה לוגריתמי. הערה: כל הערכים צריכים להיות חיוביים. סוג: בוליאני
ברירת מחדל: False
|
vAxis.scaleType |
מאפיין
סוג: מחרוזת
ברירת מחדל: null
|
vAxis.textPosition |
המיקום של טקסט הציר האנכי, ביחס לאזור התרשים. ערכים נתמכים: 'out', 'in', 'none'. סוג: מחרוזת
ברירת מחדל: 'מחוץ'
|
vAxis.textStyle |
אובייקט שמציין את סגנון הטקסט של הציר האנכי. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
מחליף את הסימונים של ציר ה-Y שנוצר באופן אוטומטי במערך שצוין. כל רכיב במערך צריך להיות ערך שנתן חוקי (למשל מספר, תאריך, תאריך ושעה או שעה) או אובייקט. אם זהו אובייקט, הוא צריך לכלול מאפיין
ה-viewWindow יורחב באופן אוטומטי כדי לכלול את ערכי המינימום והמקסימום, אלא אם יצוינו דוגמאות:
סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
|
vAxis.title |
מאפיין סוג: מחרוזת
ברירת מחדל: ללא שם
|
vAxis.titleTextStyle |
אובייקט שמציין את סגנון הטקסט של הכותרת של הציר האנכי. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
הפונקציה מעבירה את הערך המקסימלי של הציר האנכי לערך שצוין, והוא יהיה למעלה
ברוב התרשימים. המערכת מתעלמת מהשדה אם הוא מוגדר לערך קטן מערך ה-y המקסימלי של הנתונים.
הנכס סוג: מספר
ברירת מחדל: אוטומטי
|
vAxis.minValue |
הפונקציה מעבירה את הערך המינימלי של הציר האנכי לערך שצוין, והוא יהיה למטה ברוב התרשימים. המערכת מתעלמת מהמאפיין הזה אם הוא מוגדר לערך גדול מערך ה-y המינימלי של הנתונים.
הנכס סוג: מספר
ברירת מחדל: null
|
vAxis.viewWindowMode |
מפרט את קנה המידה של הציר האנכי כדי לעבד את הערכים בתוך אזור התרשים. יש תמיכה בערכי המחרוזת הבאים:
סוג: מחרוזת
ברירת מחדל:
שווה ערך ל-'יפה', אבל
vaxis.viewWindow.min ו-vaxis.viewWindow.max מקבלים עדיפות.
|
vAxis.viewWindow |
קביעת טווח החיתוך של הציר האנכי. Type: אובייקט
ברירת מחדל: null
|
vAxis.viewWindow.max |
הערך המקסימלי של נתונים אנכיים לעיבוד. המערכת מתעלמת מהמאפיין הזה כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
vAxis.viewWindow.min |
הערך המינימלי של נתונים אנכיים לעיבוד. המערכת מתעלמת מהמאפיין הזה כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הרוחב של הרכיב שמכיל
|
שיטות
שיטה | |
---|---|
draw(data, options) |
משרטט את התרשים. התרשים מקבל קריאות נוספות לשיטה רק אחרי
האירוע סוג החזרה: אין
|
getAction(actionID) |
מחזירה את אובייקט הפעולה של ההסבר הקצר עם סוג החזרה: אובייקט
|
getBoundingBox(id) |
מחזירה אובייקט שמכיל את החלק השמאלי, העליון, הרוחב והגובה של רכיב התרשים
הערכים יחסיים למאגר של התרשים. כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: אובייקט
|
getChartAreaBoundingBox() |
החזרת אובייקט שמכיל את תוכן התרשים, החלק השמאלי, העליון, הרוחב והגובה שלו (כלומר, לא כולל תוויות ומקרא):
הערכים יחסיים למאגר של התרשים. כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: אובייקט
|
getChartLayoutInterface() |
מחזירה אובייקט שמכיל מידע על המיקום של התרשים ועל הרכיבים שלו. אפשר לקרוא לשיטות הבאות על האובייקט שהוחזר:
כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: אובייקט
|
getHAxisValue(xPosition, optional_axis_index) |
מחזירה את הערך של הנתונים האופקיים ב- דוגמה: כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: מספר
|
getImageURI() |
מחזירה את התרשים בהמשכים כ-URI של תמונה. כדאי לקרוא לזה אחרי שהתרשים משורטט. מידע נוסף זמין במאמר הדפסה של תרשימי PNG. סוג החזרה: מחרוזת
|
getSelection() |
היא מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שאפשר לבחור הן בועות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של רכיבי בחירה
|
getVAxisValue(yPosition, optional_axis_index) |
הפונקציה מחזירה את ערך הנתונים האנכיים ב- דוגמה: כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: מספר
|
getXLocation(dataValue, optional_axis_index) |
מחזירה את קואורדינטת ה-x של הפיקסל ( דוגמה: כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: מספר
|
getYLocation(dataValue, optional_axis_index) |
מחזירה את קואורדינטת ה-y הפיקסל של דוגמה: כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: מספר
|
removeAction(actionID) |
פעולה זו תסיר מהתרשים את פעולת ההסבר הקצר עם סוג החזרה:
none |
setAction(action) |
מגדירה פעולת הסבר קצר שהמשתמש יבצע לאחר לחיצה על טקסט הפעולה.
השיטה
צריך להגדיר את כל הפעולות בהסבר הקצר לפני הקריאה לשיטה סוג החזרה:
none |
setSelection() |
בחירת ישויות התרשים שצוינו. ביטול כל בחירה קודמת.
ישויות שאפשר לבחור הן בועות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל פעם.
סוג החזרה: אין
|
clearChart() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: אין
|
אירועים
מידע נוסף על השימוש באירועים האלה מפורט במאמרים אינטראקטיביות בסיסית, אירועי טיפול ואירועי הפעלה.
שם | |
---|---|
animationfinish |
מופעל כשהאנימציה של המעבר מסתיימת. מאפיינים: ללא
|
click |
מופעל כשהמשתמש לוחץ על התרשים. ניתן להשתמש בו כדי לזהות את הלחיצות על הכותרת, רכיבי הנתונים, הערכים במקרא, הציר, קווי הרשת או התוויות. נכסים: targetID
|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
legendpagination |
מופעל כשהמשתמש לוחץ על מקשי העימוד של האגדות. מחזיר את האינדקס הנוכחי של הדפים המבוססים על אפסים ואת המספר הכולל של הדפים. נכסים: currentPageIndex, totalPages
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות חזותית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. בועה מיושרת לשורה בטבלת הנתונים (אינדקס העמודה הוא ריק). מאפיינים: שורה, עמודה
|
onmouseout |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות ויזואלית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. בועה מיושרת לשורה בטבלת הנתונים (אינדקס העמודה הוא ריק). מאפיינים: שורה, עמודה
|
ready |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם
שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני שמתקשרים אל השיטה מאפיינים: ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר מאפיינים: ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.