סקירה כללית
תרשימי פיזור של נקודות בתרשים. כשהמשתמש מעביר את העכבר מעל הנקודות, מוצגים הסברים קצרים עם מידע נוסף.
העיבוד של תרשימי פיזור של 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). אנו נספק גרסאות 'חומר' של כל תרשימי הליבה שלנו. אתה מוזמן להשתמש בהן גם אם הן נראות לך.
היצירה של 'תרשים פיזור חומרים' דומה לתהליך היצירה של תרשים פיזור 'קלאסי'. טוענים את GoogleVisual API (אבל משתמשים בחבילה 'scatter'
במקום בחבילה 'corechart'
), מגדירים את טבלת הנתונים ואז יוצרים אובייקט (אבל במחלקה google.charts.Scatter
במקום ב-google.visualization.ScatterChart
).
הערה: תרשימי חומרים לא יפעלו בגרסאות ישנות של Internet Explorer. (IE8 וגרסאות קודמות לא תומכות ב-SVG, שנדרש ל-Material Charts).
ב-Material Scatter Charts בוצעו שיפורים קלים רבים בתרשימי פיזור קלאסיים, כולל שקיפות משתנה שמאפשרת קריאה של נקודות חופפות, לוח צבעים משופר, עיצוב ברור יותר של תוויות, ריווח ברירת מחדל קצר יותר, קווי רשת וכותרות רכים יותר (והוספת כתוביות).
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));
תרשימי Dual-Y
לפעמים רוצים להציג שתי סדרות בתרשים פיזור עם שני צירי Y בלתי תלויים: ציר שמאלי לסדרה אחת וציר ימני לאחר אחר:
לתשומת ליבכם, לא רק ששני צירי ה-Y מסומנים בצורה שונה ('ציון בחינה אחרונה' לעומת
'שעות לימודים') אלא שלכל אחד מהם יש סולמות וקווי רשת נפרדים. אם רוצים
להתאים אישית את ההתנהגות הזו, אפשר להשתמש באפשרויות של vAxis.gridlines
.
בקוד שבהמשך, האפשרויות axes
ו-series
מציינות יחד את מראה ה-Y של התרשים. האפשרות series
מציינת באיזה ציר להשתמש בכל אחד מהצירים ('final grade'
ו-'hours studied'
; הם לא צריכים להיות קשורים לשמות העמודות שבטבלת הנתונים). האפשרות axes
הופכת את התרשים הזה לתרשים כפול 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) זמינים רק לתרשימי Material (כלומר, כאלה עם החבילה
scatter
).
אם רוצים לשים את התוויות והכותרת של ציר ה-X בחלק העליון של התרשים ולא בחלק התחתון,
אפשר לעשות זאת בתרשימי Material באמצעות האפשרות 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);
ב-Material Scatter Charts, שם החבילה google.charts.load
הוא "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 |
סוג הנתונים: | מחרוזת, מספר או תאריך/תאריך/שעה/שעהofday | מחרוזת, מספר או תאריך/תאריך/שעה/שעהofday | ... | מחרוזת, מספר או תאריך/תאריך/שעה/שעהofday |
תפקיד: | נתונים | נתונים | ... | נתונים |
תפקידים אופציונליים בעמודות: | ללא |
... |
כדי לציין כמה סדרות, צריך לציין שתי עמודות או יותר בציר ה-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 |
איך כמה אפשרויות בחירה של נתונים מסוכמות להסבר קצר:
בדרך כלל משתמשים ב-
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', }; סוג: מחרוזת
ברירת מחדל: 'אוטומטי'
|
animation.duration |
משך האנימציה, באלפיות השנייה. למידע נוסף, אפשר לעיין במשאבי העזרה בנושא אנימציה. סוג: מספר
ברירת מחדל: 0
|
animation.easing |
פונקציית ההתאמה לצפייה שמוחלת על האנימציה. אלו האפשרויות הזמינות:
סוג: מחרוזת
ברירת מחדל: 'לינארי'
|
animation.startup |
המדיניות קובעת אם התרשים יכלול אנימציה בשרטוט הראשוני. אם הערך שלו הוא סוג: בוליאני
ברירת מחדל – False
|
annotations.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: object (סוג אובייקט)
ברירת מחדל: null
|
annotations.datum |
בתרשימים שתומכים בהערות, האובייקט
annotations.datum מאפשר לשנות את הבחירה של Google Charts בהערות שצוינו ברכיבי נתונים נפרדים (למשל, הערכים שמוצגים בכל עמודה בתרשים עמודות). אפשר לקבוע את הצבע באמצעות annotations.datum.stem.color , את אורך הקנה באמצעות annotations.datum.stem.length ואת הסגנון באמצעות annotations.datum.style .
Type: object (סוג אובייקט)
ברירת מחדל: הצבע הוא 'שחור', האורך הוא 12; הסגנון הוא 'נקודה'.
|
annotations.domain |
בתרשימים שתומכים בהערות, האובייקט
annotations.domain מאפשר לבטל את הבחירה של Google Charts בהערות שצוינו בדומיין (הציר הראשי בתרשים, למשל ציר ה-X בתרשים קו אופייני). אפשר לקבוע את הצבע באמצעות annotations.domain.stem.color , את אורך הקנה באמצעות annotations.domain.stem.length ואת הסגנון באמצעות annotations.domain.style .
Type: object (סוג אובייקט)
ברירת מחדל: הצבע הוא 'שחור', האורך הוא 5, הסגנון הוא 'נקודה'.
|
annotations.highContrast |
בתרשימים שתומכים
בהערות,
הערך הבוליאני
annotations.highContrast מאפשר לבטל את הבחירה
של Google Charts בצבע ההערה. כברירת מחדל, הערך annotations.highContrast הוא True, וכתוצאה מכך
בתרשימים בוחרים צבע הערות עם ניגודיות טובה: צבעים בהירים על רקעים כהים
וצבעים כהים על רקע בהיר. אם תגדירו את annotations.highContrast כ-False ולא תציינו
את צבע ההערה שלכם, ב-Google Charts ייעשה שימוש בצבע ברירת המחדל של הסדרה עבור ההערה:
סוג: בוליאני
ברירת מחדל: True
|
annotations.stem |
בתרשימים שתומכים בהערות, האובייקט
annotations.stem מאפשר לשנות את הבחירה של Google Charts לסגנון הגזע. אפשר לקבוע את הצבע באמצעות annotations.stem.color ואת אורך הקנה באמצעות annotations.stem.length . שימו לב שהאפשרות של אורך שרשרת לא משפיעה על הערות עם סגנון 'line' : בהערות עם
'line' , אורך השורש תמיד זהה לטקסט.
בהערות דומיין של 'line' , השורש מתפרש על פני כל התרשים.
Type: object (סוג אובייקט)
ברירת מחדל: הצבע הוא 'שחור'. האורך הוא 5 להערות דומיין ו-12 להערות פרטים.
|
annotations.style |
בתרשימים שתומכים
בהערות,
האפשרות
annotations.style מאפשרת לשנות את
בחירת סוג ההערה ב-Google Charts. הוא יכול להיות 'line' או 'point' .
סוג: מחרוזת
ברירת מחדל: 'point'
|
annotations.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: object (סוג אובייקט)
ברירת מחדל: null
|
axisTitlesPosition |
המיקום של כותרות הצירים בהשוואה לאזור התרשים. ערכים נתמכים:
סוג: מחרוזת
ברירת מחדל: 'out'
|
backgroundColor |
צבע הרקע של האזור הראשי בתרשים. יכולה להיות מחרוזת צבע פשוטה של HTML, לדוגמה: סוג: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
backgroundColor.stroke |
הצבע של גבול התרשים, כמחרוזת של צבע HTML. סוג: מחרוזת
ברירת מחדל: '#666'
|
backgroundColor.strokeWidth |
רוחב הגבול, בפיקסלים. סוג: מספר
ברירת מחדל: 0
|
backgroundColor.fill |
צבע המילוי של התרשים, כמחרוזת של צבע HTML. סוג: מחרוזת
ברירת מחדל: 'לבן'
|
chart.title |
בתרשימי Material, האפשרות הזו מציינת את שם הפריט. סוג: מחרוזת
ברירת מחדל: null
|
chart.subtitle |
בתרשימי חומרה, האפשרות הזו מציינת את כותרת המשנה. אפשר להציג כתוביות רק ב-Material Charts. סוג: מחרוזת
ברירת מחדל: null
|
chartArea |
אובייקט עם חברים להגדרת המיקום והגודל של האזור בתרשים (שבו התרשים עצמו משורטט, לא כולל צירים ומקראים). יש שני פורמטים נתמכים: מספר או מספר ואחריו %. מספר פשוט הוא ערך בפיקסלים, ומספר ואחריו % הוא אחוז. דוגמה: Type: object (סוג אובייקט)
ברירת מחדל: null
|
chartArea.backgroundColor |
צבע רקע של אזור התרשים. כשמשתמשים במחרוזת, היא יכולה להיות מחרוזת הקסדצימלית (למשל, '#fdc') או שם של צבע באנגלית. כשמשתמשים באובייקט, אפשר לספק את המאפיינים
הבאים:
סוג: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
chartArea.left |
המרחק מהגבול השמאלי לשרטוט התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
chartArea.top |
המרחק מהגבול העליון לשרטוט התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
chartArea.width |
רוחב שטח התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
chartArea.height |
גובה השטח של התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
צבעים |
הצבעים של הרכיבים בתרשים. מערך מחרוזות, כאשר כל רכיב הוא מחרוזת של צבע HTML, לדוגמה: סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
|
צלב |
אובייקט שמכיל את מאפייני הצלב של התרשים. Type: object (סוג אובייקט)
ברירת מחדל: null
|
crosshair.color |
צבע הצלב, מבוטא כשם של צבע (למשל, 'blue' או ערך RGB (למשל, ' #adf'). סוג: מחרוזת
סוג: ברירת מחדל
|
crosshair.focused |
אובייקט שמכיל את מאפייני הצלב בזמן המיקוד. Type: object (סוג אובייקט)
ברירת מחדל: ברירת מחדל
|
crosshair.opacity |
אטימות של הצלב, כש- סוג: מספר
ברירת מחדל: 1.0
|
crosshair.orientation |
כיוון הצלב, שיכול להיות 'אנכי' לשיער אנכי בלבד, 'אופקי' לשיער אופקי בלבד או 'שניהם' לשיער מסורתי. סוג: מחרוזת
ברירת מחדל: 'שניהם'
|
crosshair.selected |
אובייקט שמכיל את מאפייני הצלב בזמן הבחירה. Type: object (סוג אובייקט)
ברירת מחדל: ברירת מחדל
|
crosshair.trigger |
מתי להציג צלבים אנכיים: ב- סוג: מחרוזת
ברירת מחדל: 'שניהם'
|
curveType |
המדיניות קובעת את עקומת הקווים כאשר רוחב הקו אינו אפס. יכול להיות אחת מהאפשרויות הבאות:
סוג: מחרוזת
ברירת מחדל: 'none'
|
dataOpacity |
השקיפות של נקודות נתונים, כאשר 1.0 הוא אטום לחלוטין ו-0.0 שקוף לחלוטין. בתרשימי פיזור, בהיסטוגרמה, בעמודות ובתרשימי עמודות זהו הנתונים הגלויים: נקודות בתרשים הפיזור ומלבנים בשאר. בתרשימים שבהם בחירת נתונים יוצרת נקודה, כמו תרשימי קו ושטח, העיגולים מופיעים כשמציבים את סמן העכבר מעל העיגול או אחרי הבחירה. בתרשים המשולב מוצגות שתי ההתנהגויות, ולאפשרות הזו אין השפעה על תרשימים אחרים. (כדי לשנות את האטימות של קו מגמה, אפשר לעיין ב שקיפות קו המגמה ). סוג: מספר
ברירת מחדל: 1.0
|
enableInteractivity |
האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמשים? אם הערך הוא False, התרשים לא יציג אירועים מסוג 'בחירה' או אירועים אחרים המבוססים על אינטראקציה (אלא יגרום להצגה של אירועי שגיאה או אירועים מוכנים) ולא יציג טקסט מרחף או שינוי אחר בהתאם לקלט של המשתמשים. סוג: בוליאני
ברירת מחדל: True
|
explorer, אקספלורר |
האפשרות התכונה הזו ניסיונית ועשויה להשתנות בגרסאות עתידיות. הערה: הסייר פועל רק עם צירים רציפים (כמו מספרים או תאריכים). Type: object (סוג אובייקט)
ברירת מחדל: null
|
explorer.actions |
הכלי Google Charts Explorer תומך בשלוש פעולות:
סוג: מערך של מחרוזות
ברירת מחדל: ['dragToPan', 'rightClickToReset']
|
explorer.axis |
כברירת מחדל, משתמשים יכולים להזיז גם אופקי וגם אנכי כשמשתמשים באפשרות סוג: מחרוזת
ברירת מחדל: הזזה אופקית וגם אנכית
|
explorer.keepInBounds |
כברירת מחדל, המשתמשים יכולים להזיז את המפה לכל מקום, בלי קשר למיקום של הנתונים. כדי לוודא שהמשתמשים לא יזיזו את התצוגה אל מעבר לתרשים המקורי, צריך להשתמש ב- סוג: בוליאני
ברירת מחדל: false
|
explorer.maxZoomIn |
המספר המקסימלי שבו החוקר יכול להגדיל את התצוגה. כברירת מחדל, המשתמשים יוכלו להתקרב מספיק
כדי שיראו רק 25% מהתצוגה המקורית. הגדרה של
סוג: מספר
ברירת מחדל: 0.25
|
explorer.maxZoomOut |
המספר המקסימלי שבו הסייר יכול להקטין את התצוגה. כברירת מחדל, המשתמשים יוכלו להתרחק
מספיק כך שהתרשים ימלא רק 1/4 מהשטח הזמין. הגדרה של
סוג: מספר
ברירת מחדל: 4
|
explorer.zoomDelta |
כשמשתמשים מגדילים או מקטינים את התצוגה, סוג: מספר
ברירת מחדל: 1.5
|
fontSize |
גודל ברירת המחדל של הגופן, בפיקסלים, של כל הטקסט בתרשים. אפשר לשנות את זה באמצעות מאפיינים לרכיבים ספציפיים בתרשים. סוג: מספר
ברירת מחדל: אוטומטי
|
fontName |
גופן ברירת המחדל של כל הטקסט בתרשים. אפשר לשנות את זה באמצעות מאפיינים לרכיבים ספציפיים בתרשים. סוג: מחרוזת
ברירת מחדל: 'CPRA'
|
forceIFrame |
משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames). סוג: בוליאני
ברירת מחדל: false
|
hAxis |
אובייקט עם חברים להגדיר רכיבים שונים של ציר אופקי. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type: object (סוג אובייקט)
ברירת מחדל: null
|
hAxis.baseline |
ערך הבסיס של הציר האופקי. סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.baselineColor |
הצבע של קו הבסיס של הציר האופקי. הוא יכול להיות כל מחרוזת של צבע HTML, לדוגמה: סוג: מספר
ברירת מחדל: 'שחור'
|
hAxis.direction |
כיוון הצמיחה של הערכים לאורך הציר האופקי. מציינים סוג: 1 או 1-
ברירת מחדל: 1
|
hAxis.format |
מחרוזת עיצוב לתוויות של צירים מספריים. זו קבוצת משנה של
קבוצת דפוסי ה-ICU
. לדוגמה,
הפורמט בפועל שהוחל על התווית נגזר מהמיקום שבו ה-API נטען. למידע נוסף, ראו טעינת תרשימים עם לוקאל ספציפי .
בחישוב של ערכי שנתות וקווי רשת, המערכת תתייחס לכמה שילובים חלופיים של כל האפשרויות הרלוונטיות של קווי הרשת, והחלופות יידחו אם התוויות המעוצבות יהיו כפולות או חופפות.
לכן אפשר לציין את הערך סוג: מחרוזת
ברירת מחדל: אוטומטי
|
hAxis.gridlines |
אובייקט עם מאפיינים להגדרת קווי הרשת בציר האופקי. שימו לב שקווי הרשת של הציר האופקי משורטטים לאורך. כדי לציין מאפיינים של האובייקט, אפשר להשתמש בסימון מילולי של האובייקטים, כפי שמוצג כאן: {color: '#333', minSpacing: 20} Type: object (סוג אובייקט)
ברירת מחדל: null
|
hAxis.gridlines.color |
הצבע של קווי הרשת האופקיים בתוך שטח התרשים. מציינים מחרוזת חוקית של צבע HTML. סוג: מחרוזת
ברירת מחדל: '#CCC'
|
hAxis.gridlines.count |
המספר המשוער של קווי רשת אופקיים בתוך אזור התרשים.
אם מציינים מספר חיובי ל- סוג: מספר
ברירת המחדל: 1-
|
hAxis.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: object (סוג אובייקט)
ברירת מחדל: null
|
hAxis.minorGridlines |
אובייקט עם חברים להגדרת קווי הרשת המשניים בציר האופקי, בדומה לאפשרות hAxis.gridlines. Type: object (סוג אובייקט)
ברירת מחדל: 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: object (סוג אובייקט)
ברירת מחדל: null
|
hAxis.logScale |
המאפיין סוג: בוליאני
ברירת מחדל: false
|
hAxis.scaleType |
המאפיין
סוג: מחרוזת
ברירת מחדל: null
|
hAxis.textPosition |
מיקום הטקסט של הציר האופקי, ביחס לשטח התרשים. ערכים נתמכים: 'out', 'in', 'none'. סוג: מחרוזת
ברירת מחדל: 'out'
|
hAxis.textStyle |
אובייקט שמציין את סגנון הטקסט של הציר האופקי. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
מחליפה את הסימנים הנובעים מציר ה-X שנוצרו באופן אוטומטי במערך שצוין. כל רכיב במערך צריך להיות ערך סימון תקין (כמו מספר, תאריך, תאריך ושעה או שעה ביום), או אובייקט. אם מדובר באובייקט, צריך להיות לו המאפיין
התצוגה המקדימה תורחב אוטומטית כך שתכלול את סימני המינימום והמקסימום, אלא אם מציינים
דוגמאות:
סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
|
hAxis.title |
מאפיין סוג: מחרוזת
ברירת מחדל: null
|
hAxis.titleTextStyle |
אובייקט שמציין את סגנון הטקסט של כותרת הציר האופקי. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
מעביר את הערך המקסימלי של הציר האופקי לערך שצוין. ברוב התרשימים הערך יהיה ימינה. המערכת תתעלם מערך זה אם הוא מוגדר לערך הקטן מערך ה-x המקסימלי של הנתונים.
המאפיין סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.minValue |
מעביר את הערך המינימלי של הציר האופקי לערך שצוין. ברוב התרשימים הוא יופנה שמאלה. המערכת תתעלם ממנו אם מוגדר ערך שגדול מערך ה-x המינימלי של הנתונים.
המאפיין סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.viewWindowMode |
מציינת איך לשנות את קנה המידה של הציר האופקי כדי לעבד את הערכים שנמצאים בשטח התרשים. ערכי המחרוזת הבאים נתמכים:
סוג: מחרוזת
ברירת מחדל:
זהה ל-'pretty', אבל
haxis.viewWindow.min ו-haxis.viewWindow.max מקבלים עדיפות אם משתמשים בה.
|
hAxis.viewWindow |
מציינת את טווח החיתוך של הציר האופקי. Type: object (סוג אובייקט)
ברירת מחדל: null
|
hAxis.viewWindow.max |
הערך המקסימלי של נתונים אופקיים שיש לעבד. המערכת מתעלמת ממנו כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
hAxis.viewWindow.min |
הערך המינימלי של נתונים אופקיים לעיבוד. המערכת מתעלמת ממנו כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: גובה הרכיב שמכיל
|
מקרא |
אובייקט עם חברים להגדיר אספקטים שונים של המקרא. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: object (סוג אובייקט)
ברירת מחדל: null
|
legend.alignment |
יישור המקרא. יכול להיות אחת מהאפשרויות הבאות:
התחלה, מרכז וסיום יחסיים לסגנון – האנכי או האופקי – של המקרא. לדוגמה, במקרא 'ימין', 'התחלה' ו 'סוף' מופיעים בחלק העליון ובחלק התחתון, בהתאמה. במקרא 'ראש הדף', הערכים 'התחלה' ו-'end' מופיעים משמאל ו-ימין של האזור, בהתאמה. ערך ברירת המחדל תלוי במיקום של המקרא. במקראים 'תחתונים', ברירת המחדל היא 'מרכז'. מקראים אחרים הם 'התחלה' כברירת מחדל. סוג: מחרוזת
ברירת מחדל: אוטומטי
|
legend.maxLines |
מספר השורות המקסימלי במקרא. כדי להוסיף שורות למקרא, צריך להגדיר אותו למספר גדול מ-1. הערה: הלוגיקה המדויקת שמשמשת לקביעת מספר השורות בפועל שעבר רינדור עדיין קיימת. האפשרות הזו פועלת כרגע רק כשה- {1/}G.position הוא 'top'. סוג: מספר
ברירת מחדל: 1
|
legend.pageIndex |
אינדקס הדפים הראשון שנבחר מבוסס אפס של המקרא. סוג: מספר
ברירת מחדל: 0
|
legend.position |
המיקום של המקרא. יכול להיות אחת מהאפשרויות הבאות:
סוג: מחרוזת
ברירת מחדל: 'right'
|
legend.textStyle |
אובייקט שמציין את סגנון הטקסט של המקרא. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
lineWidth |
רוחב הקו בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הקווים ולהציג רק את הנקודות. סוג: מספר
ברירת מחדל: 0
|
כיוון |
כיוון התרשים. אם המדיניות מוגדרת לערך סוג: מחרוזת
ברירת המחדל: 'אופקי'
|
pointShape |
הצורה של רכיבי נתונים בודדים: 'עיגול', 'משולש', 'ריבוע', 'יהלום', 'כוכב' או 'פוליגון'. לדוגמאות, אפשר לעיין במסמכי התיעוד בנושא נקודות . סוג: מחרוזת
ברירת מחדל: 'circle'
|
pointSize |
קוטר של נקודות נתונים, בפיקסלים. יש להשתמש באפס כדי להסתיר את כל הנקודות. אפשר לשנות את הערכים של סדרות ספציפיות באמצעות המאפיין סוג: מספר
ברירת מחדל: 7
|
pointsVisible |
ההגדרה הזו קובעת אם הנקודות יוצגו. צריך להגדיר לערך
אפשר לשנות את זה גם באמצעות
תפקיד הסגנון בצורת סוג: בוליאני
ברירת מחדל: True
|
selectionMode |
אם הערך של סוג: מחרוזת
ברירת מחדל: 'single'
|
סדרה |
מערך של אובייקטים, שכל אחד מהם מתאר את הפורמט של הסדרה המתאימה בתרשים. כדי להשתמש בערכי ברירת מחדל לסדרה, צריך לציין אובייקט ריק {}. אם לא מציינים סדרה או ערך, המערכת תשתמש בערך הגלובלי. כל אובייקט תומך במאפיינים הבאים:
ניתן לציין מערך של אובייקטים שכל אחד מהם חל על הסדרה לפי הסדר הנתון, או לציין אובייקט שבו לכל צאצא יש מפתח מספרי שמציין לאיזו סדרה הוא חל. לדוגמה, שתי ההצהרות הבאות זהות, ומצהירים שהסדרה הראשונה שחורה ונעדרת מהמקרא, והרביעית היא אדומה וחסרה במקרא: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } סוג: מערך של אובייקטים או אובייקטים עם אובייקטים בתצוגת עץ
ברירת מחדל: {}
|
עיצוב |
עיצוב הוא קבוצה של ערכי אפשרויות מוגדרים מראש, שפועלים יחד כדי ליצור התנהגות ספציפית או אפקט חזותי ספציפי בתרשים. כרגע רק עיצוב אחד זמין:
סוג: מחרוזת
ברירת מחדל: null
|
title |
טקסט להצגה מעל התרשים. סוג: מחרוזת
ברירת מחדל: ללא שם
|
titlePosition |
המיקום של כותרת התרשים, בהשוואה לאזור התרשים. ערכים נתמכים:
סוג: מחרוזת
ברירת מחדל: 'out'
|
titleTextStyle |
אובייקט שמציין את סגנון טקסט הכותרת. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
הסבר קצר |
אובייקט עם חברים להגדיר רכיבים שונים של הסבר קצר. כדי לציין את המאפיינים של האובייקט אפשר להשתמש בסימון מילולי של האובייקטים, כפי שמוצג כאן: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: object (סוג אובייקט)
ברירת מחדל: null
|
tooltip.ignoreBounds |
אם המדיניות מוגדרת לערך הערה: ההוראות האלה רלוונטיות רק להסברים קצרים ב-HTML. אם האפשרות הזו מופעלת עם הסברים קצרים ב-SVG, ייחתכו כל גלישת טקסט מחוץ לגבולות התרשים. למידע נוסף, אפשר לקרוא את המאמר התאמה אישית של תוכן הסבר קצר. סוג: בוליאני
ברירת מחדל: false
|
tooltip.isHtml |
אם המדיניות מוגדרת כ-True, צריך להשתמש בהסבר קצר על עיבוד HTML (ולא ב-SVG). למידע נוסף, אפשר לקרוא את המאמר התאמה אישית של תוכן הסבר קצר. הערה: התאמה אישית של התוכן בהסבר הקצר ב-HTML דרך תפקיד הנתונים בעמודה של הסבר קצר לא נתמכת בהמחשה החזותית של תרשים הבועות. סוג: בוליאני
ברירת מחדל: false
|
tooltip.showColorCode |
אם הערך הוא True, יוצגו ריבועים צבעוניים לצד פרטי הסדרה בהסבר הקצר. סוג: בוליאני
ברירת מחדל: false
|
tooltip.textStyle |
אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
האינטראקציה של המשתמש שגורמת להצגת ההסבר הקצר:
סוג: מחרוזת
ברירת מחדל: 'focus'
|
קווי מגמה |
הצגת
קווי מגמות
בתרשימים שתומכים בהם. כברירת מחדל נעשה שימוש בקווי מגמה לינאריים
, אבל אפשר להתאים אותם אישית באמצעות האפשרות
קווי המגמה מפורטים לכל סדרה, כך שברוב המקרים האפשרויות ייראו כך: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Type: object (סוג אובייקט)
ברירת מחדל: null
|
trendlines.n.color |
הצבע של קו המגמה , שמבוטא כשם צבע באנגלית או כמחרוזת הקסדצימלית. סוג: מחרוזת
ברירת מחדל: צבע ברירת המחדל של הסדרה
|
trendlines.n.degree |
עבור
קווי מגמה
של סוג: מספר
ברירת מחדל: 3
|
trendlines.n.labelInLegend |
אם ההגדרה מוגדרת, קו המגמה יופיע במקרא בתור המחרוזת הזו. סוג: מחרוזת
ברירת מחדל: null
|
trendlines.n.lineWidth |
רוחב הקו של קו המגמה , בפיקסלים. סוג: מספר
ברירת מחדל: 2
|
trendlines.n.opacity |
השקיפות של קו המגמה , מ-0.0 (שקוף) ל-1.0 (אטום). סוג: מספר
ברירת מחדל: 1.0
|
trendlines.n.pointSize |
קווי מגמות
מתווספים על ידי הוספת כמה נקודות בתרשים. האפשרות הזו, שנחוצה רק לפעמים, מאפשרת להתאים אישית את גודל הנקודות. בדרך כלל האפשרות סוג: מספר
ברירת מחדל: 1
|
trendlines.n.pointsVisible |
קווי מגמה
מוטבעים על ידי הוספה של כמה נקודות בתרשים. האפשרות סוג: בוליאני
ברירת מחדל: True
|
trendlines.n.showR2 |
הגדרה שקובעת אם להציג את מקדם הקביעה במקרא או בהסבר הקצר של קו המגמה. סוג: בוליאני
ברירת מחדל: false
|
trendlines.n.type |
אם
קווי המגמה
הם סוג: מחרוזת
ברירת מחדל: לינארי
|
trendlines.n.visibleInLegend |
אם המשוואה קו מגמה מופיעה במקרא. (השם יופיע בהסבר הקצר של קו המגמה). סוג: בוליאני
ברירת מחדל: false
|
vAxis |
אובייקט עם חברים להגדיר רכיבים שונים של ציר אנכי. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type: object (סוג אובייקט)
ברירת מחדל: null
|
vAxis.baseline |
מאפיין סוג: מספר
ברירת מחדל: אוטומטי
|
vAxis.baselineColor |
קובעים את הצבע של קו הבסיס של הציר האנכי. הוא יכול להיות כל מחרוזת של צבע HTML, לדוגמה: סוג: מספר
ברירת מחדל: 'שחור'
|
vAxis.direction |
הכיוון שבו הערכים לאורך הציר האנכי. כברירת מחדל, ערכים נמוכים
מופיעים בתחתית התרשים. מציינים סוג: 1 או 1-
ברירת מחדל: 1
|
vAxis.format |
מחרוזת עיצוב לתוויות של צירים מספריים. זו קבוצת משנה של
קבוצת דפוסי ה-ICU
.
לדוגמה,
הפורמט בפועל שהוחל על התווית נגזר מהמיקום שבו ה-API נטען. למידע נוסף, ראו טעינת תרשימים עם לוקאל ספציפי .
בחישוב של ערכי שנתות וקווי רשת, המערכת תתייחס לכמה שילובים חלופיים של כל האפשרויות הרלוונטיות של קווי הרשת, והחלופות יידחו אם התוויות המעוצבות יהיו כפולות או חופפות.
לכן אפשר לציין את הערך סוג: מחרוזת
ברירת מחדל: אוטומטי
|
vAxis.gridlines |
אובייקט עם חברים להגדרת קווי הרשת בציר האנכי. שימו לב שקווי הרשת של הציר האנכי משורטטים לרוחב. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: {color: '#333', minSpacing: 20} Type: object (סוג אובייקט)
ברירת מחדל: 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: object (סוג אובייקט)
ברירת מחדל: null
|
vAxis.minorGridlines |
אובייקט עם חברים להגדרת קווי הרשת המשניים בציר האנכי, בדומה לאפשרות vAxis.gridlines. Type: object (סוג אובייקט)
ברירת מחדל: 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: object (סוג אובייקט)
ברירת מחדל: null
|
vAxis.logScale |
אם True, הציר האנכי הוא קנה מידה לוגריתמי. הערה: כל הערכים חייבים להיות חיוביים. סוג: בוליאני
ברירת מחדל: false
|
vAxis.scaleType |
המאפיין
סוג: מחרוזת
ברירת מחדל: null
|
vAxis.textPosition |
מיקום הטקסט של הציר האנכי, ביחס לשטח התרשים. ערכים נתמכים: 'out', 'in', 'none'. סוג: מחרוזת
ברירת מחדל: 'out'
|
vAxis.textStyle |
אובייקט שמציין את סגנון הטקסט של הציר האנכי. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
מחליפה את סימונים של ציר ה-Y שנוצרו באופן אוטומטי במערך שצוין. כל רכיב במערך צריך להיות ערך סימון תקין (כמו מספר, תאריך, תאריך ושעה או שעה ביום), או אובייקט. אם מדובר באובייקט, צריך להיות לו המאפיין
התצוגה המקדימה תורחב אוטומטית כך שתכלול את סימני המינימום והמקסימום, אלא אם מציינים
דוגמאות:
סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
|
vAxis.title |
מאפיין סוג: מחרוזת
ברירת מחדל: ללא שם
|
vAxis.titleTextStyle |
אובייקט שמציין את סגנון הטקסט של כותרת הציר האנכי. זהו הפורמט של האובייקט: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
הערך Type: object (סוג אובייקט)
ברירת המחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
מעביר את הערך המקסימלי של הציר האנכי לערך שצוין. ברוב התרשימים הערך יהיה כלפי מעלה. המערכת תתעלם מערך זה אם מוגדר לערך הקטן מערך ה-y המקסימלי של הנתונים.
המאפיין סוג: מספר
ברירת מחדל: אוטומטי
|
vAxis.minValue |
מעביר את הערך המינימלי של הציר האנכי לערך שצוין. הוא יהיה ירידה ברוב התרשימים. המערכת תתעלם ממנו אם הערך הזה מוגדר לערך שגדול מערך ה-y המינימלי של הנתונים.
המאפיין סוג: מספר
ברירת מחדל: null
|
vAxis.viewWindowMode |
מציינת איך לשנות את קנה המידה של הציר האנכי כדי להציג את הערכים שנמצאים בשטח התרשים. ערכי המחרוזת הבאים נתמכים:
סוג: מחרוזת
ברירת מחדל:
זהה ל-'pretty', אבל
vaxis.viewWindow.min ו-vaxis.viewWindow.max מקבלים עדיפות אם משתמשים בה.
|
vAxis.viewWindow |
מציין את טווח החיתוך של הציר האנכי. Type: object (סוג אובייקט)
ברירת מחדל: null
|
vAxis.viewWindow.max |
הערך המקסימלי של נתונים אנכיים שיש לעבד. המערכת מתעלמת ממנו כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
vAxis.viewWindow.min |
הערך המינימלי של נתונים אנכיים לעיבוד. המערכת מתעלמת ממנו כאשר הערך של סוג: מספר
ברירת מחדל: אוטומטי
|
רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: רוחב הרכיב שמכיל
|
שיטות
שיטה | |
---|---|
draw(data, options) |
מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע סוג החזרה: ללא
|
getAction(actionID) |
הפונקציה מחזירה את אובייקט הפעולה של ההסבר הקצר עם Return Type (סוג החזרה): אובייקט
|
getBoundingBox(id) |
מחזירה אובייקט שמכיל את הרכיבים השמאליים, החלק העליון, הרוחב והגובה של רכיב התרשים
הערכים הם יחסיים למאגר התגים של התרשים. קוראים לפונקציה אחרי הצגת התרשים. Return Type (סוג החזרה): אובייקט
|
getChartAreaBoundingBox() |
מחזירה אובייקט שמכיל את השדות השמאליים, החלק העליון, הרוחב והגובה של תוכן התרשים (כלומר, לא כולל תוויות ומקרא):
הערכים הם יחסיים למאגר התגים של התרשים. קוראים לפונקציה אחרי הצגת התרשים. Return Type (סוג החזרה): אובייקט
|
getChartLayoutInterface() |
מחזירה אובייקט שמכיל מידע על המיקום של התרשים והרכיבים שלו. אפשר לקרוא ל-methods הבאות באובייקט שמוחזר:
קוראים לפונקציה אחרי הצגת התרשים. Return Type (סוג החזרה): אובייקט
|
getHAxisValue(xPosition, optional_axis_index) |
הפונקציה מחזירה את ערך הנתונים האופקי ב- דוגמה: קוראים לפונקציה אחרי הצגת התרשים. סוג החזרה: מספר
|
getImageURI() |
מחזירה את התרשים שעבר סריאליזציה ל-URI של תמונה. קוראים לפונקציה אחרי הצגת התרשים. ראו הדפסת תרשימי PNG. סוג החזרה: מחרוזת
|
getSelection() |
מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שניתן לבחור הן נקודות ורשומות המקרא.
הנקודה תואמת לתא בטבלת הנתונים, והערך של המקרא לעמודה (אינדקס השורות הוא null).
עבור התרשים הזה, ניתן לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של רכיבי בחירה
|
getVAxisValue(yPosition, optional_axis_index) |
מחזירה את ערך הנתונים האנכיים ב- דוגמה: קוראים לפונקציה אחרי הצגת התרשים. סוג החזרה: מספר
|
getXLocation(dataValue, optional_axis_index) |
הפונקציה מחזירה את קואורדינטת ה-x של דוגמה: קוראים לפונקציה אחרי הצגת התרשים. סוג החזרה: מספר
|
getYLocation(dataValue, optional_axis_index) |
הפונקציה מחזירה את קואורדינטת ה-y של דוגמה: קוראים לפונקציה אחרי הצגת התרשים. סוג החזרה: מספר
|
removeAction(actionID) |
הסרה של פעולת ההסבר הקצר עם ה- סוג החזרה:
none |
setAction(action) |
הגדרת פעולת הסבר קצר שתבוצע כשהמשתמש ילחץ על הטקסט של הפעולה.
ה-method
צריך להגדיר את כל הפעולות של ההסבר הקצר לפני קריאה ל-method של סוג החזרה:
none |
setSelection() |
בחירת ישויות התרשים שצוינו. ביטול הבחירה הקודמת.
ישויות שניתן לבחור הן נקודות ורשומות המקרא.
הנקודה תואמת לתא בטבלת הנתונים, והערך של המקרא לעמודה (אינדקס השורות הוא null).
בתרשים הזה ניתן לבחור רק ישות אחת בכל פעם.
סוג החזרה: ללא
|
clearChart() |
ניקוי התרשים וכל המשאבים שהוקצו לו. סוג החזרה: ללא
|
אירועים
מידע נוסף על אופן השימוש באירועים האלה זמין במאמרים אינטראקטיביות בסיסית, טיפול באירועים והפעלת אירועים.
שם | |
---|---|
animationfinish |
מופעל כשאנימציית המעבר מסתיימת. מאפיינים:ללא
|
click |
מופעל כשהמשתמש לוחץ על התרשים. יכול לשמש כדי לזהות מתי לוחצים על הכותרת, רכיבי הנתונים, רשומות המקרא, הצירים, קווי הרשת או התוויות. נכסים: targetID
|
error |
מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
legendpagination |
מופעל כשהמשתמש לוחץ על חיצי העימוד של המקרא. מחזיר את אינדקס הדפים הנוכחי המבוסס על אפס ואת מספר הדפים הכולל. מאפיינים: currentPageIndex, total Pages
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. מאפיינים: שורה, עמודה
|
onmouseout |
מופעל כשהמשתמש מזיז את העכבר מישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. מאפיינים: שורה, עמודה
|
ready |
התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ושל שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני
שמפעילים את ה-method מאפיינים:ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר
מאפיינים:ללא
|
המדיניות בנושא נתונים
כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.