סקירה כללית
תרשים פיזור מציג נקודות על גרף. כשהמשתמש מעביר את העכבר מעל הנקודות, ההסברים מוצגים עם מידע נוסף.
העיבוד של תרשימי פיזור של Google מתבצע באמצעות 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(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
שינוי ואנימציה של צורות
כברירת מחדל, תרשימי פיזור מייצגים את האלמנטים של מערך הנתונים עם מעגלים. ניתן לציין צורות אחרות באמצעות האפשרות של pointShape
, שרשומה במסמכי התיעוד בנושא התאמה אישית של נקודות.
כמו ברוב התרשימים האחרים של Google, אפשר ליצור אנימציות באמצעות
אירועים. אפשר להוסיף
event listener לאירוע הראשון ready
ולשרטט מחדש את התרשים
אחרי ביצוע השינויים הרצויים. אחרי האירוע הראשון (ready
), אפשר להאזין לאירוע animationfinish
כדי לחזור על התהליך, ואז ליצור אנימציה רציפה. האפשרות animation
קובעת את אופן השרטוט מחדש באופן מיידי: (ללא אנימציה) או ללא תקלה, ואם היא פועלת במהירות ובקלות,
var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); ... function randomWalk() { ... }
<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 = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html>
יצירת תרשימי פיזור של חומר
בשנת 2014, Google הכריזה על הנחיות שנועדו לתמוך במראה ובתחושה נפוצים בכל הנכסים והאפליקציות שלה (כמו אפליקציות ל-Android) שפועלות בפלטפורמות של Google. התהליך הזה נקרא Material Design. אנו נספק גרסאות "חומר" של כל תרשימי הליבה שלנו. ניתן להשתמש בהן אם רוצים שהן ייראו.
יצירת תרשים פיזור מהותי יכולה להיות דומה ליצירת תרשים פיזור 'קלאסי'. ה-API של Google Vision טעון (למרות חבילת החבילה 'scatter'
, במקום באמצעות החבילה של 'corechart'
), מגדירים את טבלת הנתונים ואז יוצרים אובייקט (אבל לא את המחלקה google.charts.Scatter
במקום google.visualization.ScatterChart
).
הערה: תרשימי טקסט לא יפעלו בגרסאות ישנות של Internet Explorer. (IE8 וגרסאות קודמות אינן תומכות ב-SVG, ומחייבות שימוש בתרשימי עיצוב).
לתרשימי פיזור חומרים יש שיפורים קטנים רבים בתרשימי פיזור קלאסיים, כולל שקיפות משתנה לקריאות של נקודות חופפות, לוח צבעים משופר, עיצוב ברור יותר של תוויות, ריווח ברירת מחדל חזק יותר, קווי רשת וכותרות רכים יותר (והוספת כתוביות).
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
תרשימי החומר נמצאים בגרסת בטא. המראה
והאינטראקטיביות הם סופיים ברובם, אבל הרבה מהאפשרויות הזמינות בתרשימים הקלאסיים
עדיין לא זמינות בהם. אפשר למצוא רשימה של אפשרויות שעדיין לא נתמכות בבעיה זו.
כמו כן, האופן שבו האפשרויות מוצהרות אינו סופי, כך שאם בחרת להשתמש באחת
מהאפשרויות הקלאסיות, עליך להמיר אותן לאפשרויות מהותיות על ידי החלפת השורה הזו:
chart.draw(data, options);
...באמצעות:
chart.draw(data, google.charts.Scatter.convertOptions(options));
תרשימי Y
לפעמים תרצו להציג שתי סדרות בתרשים פיזור עם שני צירי Y עצמאיים: ציר שמאלי לסדרה אחת וציר ימני לסדרה אחרת:
שימו לב: לא רק שני צירי y מוצגים בצורה שונה ('ציון סופי בבחינה'
או 'שעות שנלמדו'), אלא שכל אחד מהם מיועד לסולמות ולקווי רשת עצמאיים משלהם. אם ברצונך
להתאים אישית את ההתנהגות הזו, עליך להשתמש באפשרויות של vAxis.gridlines
.
בקוד שלמטה, האפשרויות axes
ו-series
יחד מציינות את
המראה הכפול של התרשים. האפשרות series
מציינת באיזה ציר יש להשתמש בכל ('final grade'
ו-'hours studied'
. לא צריך להיות להם קשר
לשמות העמודות בטבלת הנתונים). לאחר מכן, האפשרות axes
הופכת את התרשים הזה לתרשים {0/}-Y, המציב את הציר 'Final Exam Grade'
משמאל ואת ציר 'Hours Studied'
שבצד שמאל.
google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };
תרשימי X מובילים
הערה: הצירים באמצעות X-X זמינים רק לתרשימי Material (כלומר, צירים עם חבילה
scatter
).
כדי שהתוויות והכותרת של ציר ה-X יופיעו בחלק העליון של התרשים במקום בחלק התחתון שלו,
אפשר לעשות זאת בתרשימים מהותיים באמצעות האפשרות axes.x
:
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
בטעינה
google.charts.load
שם החבילה הוא "corechart"
, ושם הסיווג של ההצגה הוא google.visualization.ScatterChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ScatterChart(container);
השם של חבילת google.charts.load
של תרשימי פיזור Material הוא "scatter"
, ושם המחלקה להצגה הוא google.charts.Scatter
.
google.charts.load("current", {packages: ["scatter"]});
var visualization = new google.charts.Scatter(container);
פורמט נתונים
שורות: כל שורה בטבלה מייצגת קבוצה של נקודות נתונים עם אותו ערך בציר ה-X.
עמודות:
עמודה 0 | עמודה 1 | ... | עמודה N | |
---|---|---|---|---|
מטרה: | ערכי נקודת נתונים X | ערכי סדרה 1 Y | ... | ערכי סדרה N Y |
סוג הנתונים: | מחרוזת, מספר או תאריך/שעה/שעה ביום | מחרוזת, מספר או תאריך/שעה/שעה ביום | ... | מחרוזת, מספר או תאריך/שעה/שעה ביום |
תפקיד: | נתונים | נתונים | ... | נתונים |
תפקידי עמודות אופציונליים: | ללא |
... |
כדי לציין כמה סדרות, מציינים שתי עמודות או יותר של ציר Y ומציינים ערכי Y בעמודה Y אחת בלבד:
ערכי X | ערכי סדרה 1 Y | ערכי סדרה 2 Y |
---|---|---|
10 | null | 75 |
20 | null | 18 |
33 | null | 22 |
55 | 16 | null |
14 | 61 | null |
48 | 3 | null |
אפשרויות הגדרה
שם | |
---|---|
יעד צבירה |
איך בחירות מרובות של נתונים משולבות בהסברים קצרים:
הרבה פעמים משתמשים ב-
aggregationTarget במקביל ל-selectionMode ול-tooltip.trigger , למשל:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; סוג: מחרוזת
ברירת מחדל: 'אוטומטי'
|
אנימציה.משך |
משך האנימציה, באלפיות השנייה. פרטים נוספים זמינים במסמכי האנימציה. סוג: מספר
ברירת מחדל: 0
|
אנימציה. |
פונקציית ההתאמה לצפייה על האנימציה. אלו האפשרויות הזמינות:
סוג: מחרוזת
ברירת מחדל: 'לינארי'
|
אנימציה.התחלה |
קובע אם התרשים יונפש בהגרלה הראשונית. אם הערך סוג: בוליאני
ברירת המחדל לא
|
notes.boxStyle |
עבור תרשימים שתומכים בהערות, האובייקט var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; האפשרות הזו נתמכת בשלב זה עבור תרשימי שטח, עמודות אופקי, עמודות משולבות, קווים ופיזור. היא לא נתמכת בתרשים ההערות. Type: אובייקט
ברירת מחדל: null
|
notes.datum |
עבור תרשימים שתומכים בהערות, האובייקט
annotations.datum מאפשר לבטל את הבחירה של Google Insights בהערות המסופקות לאלמנטים בודדים בנתונים (כמו ערכים המוצגים בכל עמודה בתרשים עמודות). אפשר לשלוט בצבע
באמצעות annotations.datum.stem.color , אורך השורש
עם annotations.datum.stem.length והסגנון באמצעות annotations.datum.style .
Type: אובייקט
ברירת מחדל: הצבע הוא "שחור", האורך הוא 12, הצבע הוא "נקודה".
|
הערות. |
עבור תרשימים שתומכים
בהערות,
האובייקט
annotations.domain מאפשר לשנות את
הבחירה ב-Google charts עבור הערות שסופקו לדומיין (הציר הראשי של התרשים, למשל ציר ה-X
בתרשים אופייני). אפשר לשלוט בצבע
באמצעות annotations.domain.stem.color , אורך השורש
עם annotations.domain.stem.length והסגנון באמצעות annotations.domain.style .
Type: אובייקט
ברירת מחדל: הצבע הוא "שחור", האורך הוא 5, הסגנון הוא "נקודה".
|
הערות.highContrast |
בתרשימים שתומכים
בהערות,
הערך הבוליאני של
annotations.highContrast מאפשר לשנות את בחירת
ההערות ב-Google התרשימים. כברירת מחדל, annotations.highContrast מקבל את הסימון 'נכון', וכתוצאה מכך
התרשימים בוחרים צבע רישום עם ניגודיות טובה: צבעים בהירים על רקעים כהים, ו'כהה' באור. אם מגדירים את המאפיין annotations.highContrast כ-False ולא מציינים צבע של הערה משלכם, בתרשימים של Google ייעשה שימוש בצבע ברירת המחדל של ההערה:
סוג: בוליאני
ברירת מחדל: נכון
|
notes.stem |
עבור תרשימים שתומכים
בהערות,
האובייקט
annotations.stem מאפשר לבטל את בחירת
התרשימים של Google בסגנון שורש. אפשר לשלוט בצבע
באמצעות annotations.stem.color ובאורך שורש
באמצעות annotations.stem.length . יש לשים לב שאפשרות אורך השורש לא משפיעה על הערות עם הסגנון 'line' : עבור הערות בדאטום 'line' , אורך השורש תמיד יהיה זהה לזה של הטקסט, וב הערות של דומיינים מסוג 'line' , השורש מורחב לאורך כל התרשים.
Type: אובייקט
ברירת מחדל: הצבע הוא "שחור"; האורך של ההערה הוא 5 עבור הערות הדומיין ו-12 עבור הערות דאטום.
|
הערות.style |
לתרשימים שתומכים
בהערות,
האפשרות
annotations.style מאפשרת לבטל את בחירת
סוג ההערות ב-Google התרשימים. הוא יכול להיות 'line' או 'point' .
סוג: מחרוזת
ברירת מחדל: 'נקודה'
|
notes.textStyle |
עבור תרשימים שתומכים
בהערות,
האובייקט
annotations.textStyle קובע את המראה של הטקסט
של ההערה:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; האפשרות הזו נתמכת בשלב זה עבור תרשימי שטח, עמודות אופקי, עמודות משולבות, קווים ופיזור. היא לא נתמכת על ידי תרשים ההערות. Type: אובייקט
ברירת מחדל: null
|
ציר_כותרת |
איפה למקם את כותרות הציר, בהשוואה לאזור התרשים. ערכים נתמכים:
סוג: מחרוזת
ברירת מחדל: 'מחוץ'
|
צבע רקע |
צבע הרקע של האזור הראשי בתרשים. הוא יכול להיות מחרוזת צבע פשוטה ב-HTML, לדוגמה: Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
הפעלה ברקע |
צבע הגבול של התרשים, כמחרוזת צבע של HTML. סוג: מחרוזת
ברירת מחדל: '#666'
|
colorColor.stringWidth |
רוחב הגבול, בפיקסלים. סוג: מספר
ברירת מחדל: 0
|
backgroundColor.fill |
צבע המילוי של התרשים, כמחרוזת צבע של HTML. סוג: מחרוזת
ברירת מחדל: 'לבן'
|
תרשים.כותרת |
עבור תרשימים של חומר, האפשרות הזו מציינת את הכותרת. סוג: מחרוזת
ברירת מחדל: null
|
תרשים.כותרת משנה |
במצעדים של חומר, האפשרות הזו מציינת את כותרת המשנה. רק תרשימים של Material תומכים בכתוביות. סוג: מחרוזת
ברירת מחדל: null
|
תרשים גבולות |
אובייקט עם חברי קבוצה כדי להגדיר את המיקום והגודל של אזור התרשים (שבו התרשים
עצמו משורטט, מלבד הציר והאגדות). ניתן להשתמש בשני פורמטים: מספר, או
מספר ואחריו %. מספר פשוט הוא ערך בפיקסלים; מספר ואחריו % הוא אחוז. לדוגמה: Type: אובייקט
ברירת מחדל: null
|
ChartArea.backgroundColor |
צבע הרקע של אזור התרשים. כשמשתמשים במחרוזת, היא יכולה להיות מחרוזת הקסדצימלית (למשל, ' #fdc') או בשם של צבע אנגלי. כשאובייקט נמצא בשימוש, אפשר לספק את המאפיינים הבאים:
Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
ChartArea.left |
מה המרחק מהתרשים מהגבול השמאלי? סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
התרשיםArea.top |
מה המרחק מהתרשים מהגבול העליון? סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
ChartArea.width |
רוחב האזור בתרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
ChartArea.height |
גובה שטח התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
צבעים |
הצבעים שיש להשתמש בהם ברכיבי התרשים. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
|
Crosshair |
אובייקט שמכיל את מאפייני הצלב של התרשים. Type: אובייקט
ברירת מחדל: null
|
Crosshair.color |
צבע הצלבת, שמתבטא כשם צבע (למשל, "כחול") או ערך RGB (למשל, " #adf"). סוג: מחרוזת
סוג: ברירת מחדל
|
Crosshair.Focus |
אובייקט שמכיל את מאפייני הצלב כאשר הוא מתמקד. Type: אובייקט
ברירת מחדל: ברירת מחדל
|
Crosshair.opacity |
השקיפות של הצלב, עם סוג: מספר
ברירת מחדל: 1.0
|
crosshair.orientation |
הכיוון של הצלב, שיכול להיות 'אנכי' לשיער אנכי בלבד, 'אופקי' לשיער אופקי בלבד, או 'שניהם' לצלבים מסורתיים. סוג: מחרוזת
ברירת מחדל: 'שניהם'
|
crosshair.נבחר |
אובייקט שמכיל את מאפייני הצלב לאחר הבחירה. Type: אובייקט
ברירת מחדל: ברירת מחדל
|
crosshair.trigger |
מתי להציג צלבים: ב- סוג: מחרוזת
ברירת מחדל: 'שניהם'
|
סוג עקומה |
מגדירה את עקומת הקווים כאשר רוחב הקו לא יהיה אפס. יכול להיות אחת מהאפשרויות הבאות:
סוג:מחרוזת
ברירת מחדל: 'ללא'
|
שקיפות נתונים |
השקיפות של נקודות נתונים, כש-1.0 אטומה לחלוטין ו-0.0 שקופה לחלוטין. בתרשימי פיזור, היסטוגרמה, עמודות ועמודות, כל הנתונים מתייחסים לנתונים הגלויים: נקודות בתרשים הפיזור ומלבנים במבנים האחרים. בתרשימים שבהם בחירת נתונים נוצרת נקודה, כמו תרשימי הקו והשטח, היא מופיעה באמצעות המעגלים שמופיעים כשמעבירים את העכבר מעל או בוחרים אפשרות. התרשים המשולב מציג את שתי ההתנהגויות, ולאפשרות הזו אין השפעה על תרשימים אחרים. (כדי לשנות את השקיפות של קו מגמה, יש לעיין במאמר שקיפות של קו מגמה ). סוג: מספר
ברירת מחדל: 1.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>}
|
קו רוחב |
רוחב השורה בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הקווים ולהציג רק את הנקודות. סוג: מספר
ברירת מחדל: 0
|
כיוון |
כיוון התרשים. אם הערך הוא סוג: מחרוזת
ברירת מחדל: 'אופקית'
|
צורת נקודה |
הצורה של רכיבי נתונים בודדים: 'עיגול', 'משולש', 'ריבוע', 'יהלום', 'כוכב' או 'מצולע'. ניתן לעיין במסמכי התיעוד בנושא נקודות . סוג: מחרוזת
ברירת מחדל: 'עיגול'
|
גודל גודל |
קוטר של נקודות נתונים, בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הנקודות. אפשר לעקוף את הערכים
בסדרה ספציפית באמצעות המאפיין סוג: מספר
ברירת מחדל: 7
|
נקודות גלויות |
קובעת אם הנקודות יוצגו. צריך להגדיר את הערך
אפשר לשנות זאת גם באמצעות
תפקיד הסגנון בצורה
סוג: בוליאני
ברירת מחדל: נכון
|
אפשרויות בחירה |
אם הערך של סוג: מחרוזת
ברירת מחדל: 'סינגל'
|
סדרה |
מערך אובייקטים, כאשר כל אחד מהם מתאר את הפורמט של הסדרה המתאימה בתרשים. כדי להשתמש בערכי ברירת מחדל של סדרה, מציינים אובייקט ריק {}. אם לא מציינים סדרה או ערך, המערכת תשתמש בערך הגלובלי. כל אובייקט תומך במאפיינים הבאים:
ניתן לציין מערך של אובייקטים, כשכל אחד מהם חל על הסדרה לפי הסדר הנתון, או לציין אובייקט כאשר לכל ילד יש מפתח מספרי שמציין באיזו סדרה הוא חל. לדוגמה, שתי ההצהרות הבאות זהות, ומצהירות על הסדרה הראשונה כשחורה וחסרה במקרא, והרביעית כאדום וחסרה במקרא: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Type: מערך של אובייקטים, או אובייקט עם אובייקטים בתוך רכיב
ברירת מחדל: {}
|
עיצוב |
עיצוב הוא קבוצה של ערכי אפשרויות שהוגדרו מראש, והם פועלים יחד כדי להשיג התנהגות ספציפית בתרשים או אפקט חזותי. נכון לעכשיו, אפשר להשתמש רק בעיצוב אחד:
סוג: מחרוזת
ברירת מחדל: 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
|
description.ignoreBounds |
אם המדיניות מוגדרת כ- הערה: האפשרות הזו רלוונטית רק להסברים קצרים ב-HTML. אם אפשרות זו מופעלת עם הסברים בפורמט SVG, גלישת הנתונים מעבר לגבולות התרשים תיחתך. פרטים נוספים זמינים במאמר התאמה אישית של תוכן של הסברים קצרים. סוג: בוליאני
ברירת מחדל: False
|
overview.isHtml |
אם היא מוגדרת כ-true, משתמשים בהסברים קצרים על HTML (ולא ברינדור SVG) פרטים נוספים זמינים במאמר התאמה אישית של תוכן של הסברים קצרים. הערה: ההתאמה האישית של תוכן ההסבר הקצר ב-HTML באמצעות תפקיד נתוני העמודה של ההסבר הקצר לא נתמכת על ידי התצוגה החזותית תרשים בועות. סוג: בוליאני
ברירת מחדל: False
|
Description.showColorCode |
אם True, יש להציג ריבועים צבעוניים ליד פרטי הסדרה בהסבר הקצר. סוג: בוליאני
ברירת מחדל: 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 |
האינטראקציה של המשתמש שגרמה להצגת ההסבר הקצר:
סוג: מחרוזת
ברירת מחדל: 'התמקדות'
|
קווי מגמה |
מוצגים בו
קווי מגמה
בתרשימים שתומכים בהם. כברירת מחדל, נעשה שימוש בקווי מגמה ליניאריים, אבל אפשר להתאים אותם אישית באמצעות האפשרות
קווי הערוצים מצוינים על ידי כל סדרה, כך שברוב המקרים האפשרויות שלך ייראו כך: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Type: אובייקט
ברירת מחדל: null
|
Trendslines.n.color |
הצבע של קו המגמה , מבוטא כשם צבע באנגלית או כמחרוזת הקסדצימלית. סוג: מחרוזת
ברירת מחדל: צבע ברירת המחדל של הסדרה
|
Trendslines.n.degree |
עבור
מגמות
של סוג: מספר
ברירת מחדל: 3
|
Trendslines.n.labelInLegend |
אם היא מוגדרת, המחרוזת קו מגמה תופיע במקרא כמחרוזת. סוג: מחרוזת
ברירת מחדל: null
|
Trendslines.n.lineWidth |
רוחב הקו של קו המגמה , בפיקסלים. סוג: מספר
ברירת מחדל: 2
|
Trendslines.n.opacity |
השקיפות של קו המגמה , מ-0.0 (שקופה) ל-1.0 (אטומה). סוג: מספר
ברירת מחדל: 1.0
|
Trendslines.n.pointSize |
קווי מגמות
נחתמים על ידי חותמת של קבוצת נקודות על התרשים, אבל הרבה פעמים אפשר להתאים אישית את גודל הנקודות. האפשרות של קו המגמה של סוג: מספר
ברירת מחדל: 1
|
Trendslines.n.pointsגלוי |
קווי מגמה
מסומנים על ידי חותמת של קבוצת נקודות בתרשים. האפשרות סוג: בוליאני
ברירת מחדל: נכון
|
Trendslines.n.showR2 |
מציינת אם להציג את המקדם של הקביעה בתיאור הקצר של המקרא או של קו המגמה. סוג: בוליאני
ברירת מחדל: False
|
Trendslines.n.type |
המדיניות הזו קובעת אם
מגמות
הן סוג: מחרוזת
ברירת מחדל: לינארי
|
Trendslines.n.visibleInLegend |
האם המשוואה קו מגמה מופיעה במקרא. (הוא יופיע בהסבר הקצר על קו המגמה). סוג: בוליאני
ברירת מחדל: False
|
צירים |
אובייקט עם חברים כדי להגדיר רכיבים שונים בציר האנכי. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {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 |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר מאפיינים: ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.