סקירה כללית
תרשים עוגה שעבר רינדור בדפדפן באמצעות 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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
יצירת תרשים עוגה תלת-ממדי
אם תגדירו את האפשרות is3D
לאפשרות true
, תרשים העוגה ישורטט כאילו יש לו שלושה מימדים:
is3D
הוא false
כברירת מחדל, ולכן כאן נגדיר אותו במפורש כ-
true
:
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
יצירת תרשים טבעת
תרשים בייגל הוא תרשים עוגה עם חור במרכז. אפשר ליצור תרשימי טבעת באמצעות האפשרות pieHole
:
האפשרות pieHole
צריכה להיות מוגדרת למספר בין 0 ל-1, בהתאם ליחס שבין רדיוס בין החור לתרשים. מספרי 0.6 עד 0.6 ייראו בצורה הטובה ביותר ברוב התרשימים.
המערכת תתעלם מערכים שווים לערך אחד או יותר מ-1, וערך 0 יסגור לחלוטין את ה-Piepoint.
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
לא ניתן לשלב את האפשרויות pieHole
ו-is3D
. אחרת, המערכת תתעלם מ-pieHole
.
שימו לב שהתרשימים של Google מנסים למקם את התווית קרוב ככל האפשר למרכז הפרוסה. אם יש לכם תרשים טבעת עם פרוסה אחת בלבד, מרכז הפרוסה עלול להיכנס לחור. במקרה כזה, משנים את הצבע של התווית:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<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([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
סיבוב של תרשים עוגה
כברירת מחדל, תרשימי עוגה מתחילים בקצה השמאלי של הפרוסה הראשונה שמצביעה למעלה. תוכלו לשנות את ההגדרה הזו באמצעות האפשרות pieStartAngle
:
אנחנו מסובבים את התרשים ב-100 מעלות בכיוון השעון עם אפשרות של pieStartAngle: 100
. (לכן נבחר כי הזווית הספציפית הזו
מאפשרת להתאים את התווית "איטלקית" לחלק).
<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([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
פיצוץ פרוסה
אפשר להפריד פרוסות עוגה משאר התרשים באמצעות המאפיין offset
של האפשרות slices
:
כדי להפריד בין פרוסות, צריך ליצור אובייקט slices
ולהקצות את מספר הפרוסה המתאים offset
בין 0 ל-1. בהמשך, אנחנו משייכים קיזוזים הולכים וגדלים לפלחים 4
(גוג'ראטית), 12 (מראטהית), 14 (אוריה) ו-15 (פונג'אבי):
<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([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
הסרת פרוסות
כדי להשמיט פרוסה, משנים את הצבע ל-'transparent'
:
השתמשנו גם ב-pieStartAngle
כדי לסובב את התרשים ב-135 מעלות, ב-pieSliceText
כדי להסיר את הטקסט מהפרוסות, וב-tooltip.trigger
כדי להשבית את ההסברים הקצרים:
<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([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
סף החשיפה של פלחים
אפשר להגדיר ערך בתור הסף לפרוסת עוגה בנפרד. הערך הזה תואם לחלק מתרשים (כל התרשים מייצג את ערך 1). כדי להגדיר את הסף הזה כאחוז מתוך השלם, יש לחלק את האחוז הרצוי ב-100 (עבור סף של 20%, הערך יהיה 0.2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
כל פרוסות קטנות מהסף הזה ישולבו לפרוסה "אחרת" אחת, והערך הכולל של כל הפרוסות יהיה נמוך מהסף.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
בטעינה
שם החבילה של google.charts.load
הוא "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
שם הכיתה הוא google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
פורמט נתונים
שורות: כל שורה בטבלה מייצגת פרוסה.
עמודות:
עמודה 0 | עמודה 1 | ... | עמודה N (אופציונלי) | |
---|---|---|---|---|
מטרה: | תוויות של פלח | ערכי פרוסה | ... | תפקידים אופציונליים |
סוג הנתונים: | string | number | ... | |
תפקיד: | דומיין | נתונים | ... | |
תפקידי עמודות אופציונליים: | ללא | ללא | ... |
אפשרויות הגדרה
שם | |
---|---|
צבע רקע |
צבע הרקע של האזור הראשי בתרשים. הוא יכול להיות מחרוזת צבע פשוטה ב-HTML, לדוגמה: Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
הפעלה ברקע |
צבע הגבול של התרשים, כמחרוזת צבע של HTML. סוג: מחרוזת
ברירת מחדל: '#666'
|
colorColor.stringWidth |
רוחב הגבול, בפיקסלים. סוג: מספר
ברירת מחדל: 0
|
backgroundColor.fill |
צבע המילוי של התרשים, כמחרוזת צבע של HTML. סוג: מחרוזת
ברירת מחדל: 'לבן'
|
תרשים גבולות |
אובייקט עם חברי קבוצה כדי להגדיר את המיקום והגודל של אזור התרשים (שבו התרשים
עצמו משורטט, מלבד הציר והאגדות). ניתן להשתמש בשני פורמטים: מספר, או
מספר ואחריו %. מספר פשוט הוא ערך בפיקסלים; מספר ואחריו % הוא אחוז. לדוגמה: Type: אובייקט
ברירת מחדל: null
|
ChartArea.backgroundColor |
צבע הרקע של אזור התרשים. כשמשתמשים במחרוזת, היא יכולה להיות מחרוזת הקסדצימלית (למשל, ' #fdc') או בשם של צבע אנגלי. כשאובייקט נמצא בשימוש, אפשר לספק את המאפיינים הבאים:
Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
ChartArea.left |
מה המרחק מהתרשים מהגבול השמאלי? סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
התרשיםArea.top |
מה המרחק מהתרשים מהגבול העליון? סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
ChartArea.width |
רוחב האזור בתרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
ChartArea.height |
גובה שטח התרשים. סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
|
צבעים |
הצבעים שיש להשתמש בהם ברכיבי התרשים. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
|
enableInteractive |
האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמש. אם ההעדפה מקבלת את הערך False, התרשים לא יציג אירועי 'select' או אירועים אחרים מבוססי-אינטראקציות (אבל יגרום לתיעוד של אירועי הכנה או שגיאות), ולא יציג טקסט מרחף או ישתנה בדרך אחרת בהתאם לקלט של המשתמשים. סוג: בוליאני
ברירת מחדל: נכון
|
גודל גופן |
גודל הגופן המוגדר כברירת מחדל, בפיקסלים, של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים. סוג: מספר
ברירת מחדל: אוטומטי
|
שם גופן |
תצוגת ברירת המחדל של הגופן של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים. סוג: מחרוזת
ברירת מחדל: 'xls'
|
forceIFrame |
משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames). סוג: בוליאני
ברירת מחדל: False
|
גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הגובה של הרכיב שמכיל את הסרטון
|
שווה ל-3 י' |
אם True, מוצג תרשים תלת-מימדי. סוג: בוליאני
ברירת מחדל: False
|
מקרא |
אובייקט עם חברים כדי להגדיר היבטים שונים של המקרא. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: אובייקט
ברירת מחדל: null
|
האגדה |
היישור של המקרא. יכול להיות אחת מהאפשרויות הבאות:
ההתחלה, המרכז והסוף הם יחסיים לסגנון של המקרא - אנכי או אופקי. לדוגמה, במקרא 'right', 'start' ו-'end' נמצאים בחלק העליון ובחלק התחתון בהתאמה, עבור המקרא 'top', 'start' ו-'end' יופיעו בפינה הימנית ובפינה השמאלית של האזור, בהתאמה. ערך ברירת המחדל תלוי במיקום המקרא. עבור אגדות 'תחתיות', ברירת המחדל היא 'center', ואילו אגדות אחרות מוגדרות כברירת מחדל ל-'start'. סוג: מחרוזת
ברירת מחדל: אוטומטי
|
אגדה |
מיקום המקרא. יכול להיות אחת מהאפשרויות הבאות:
סוג: מחרוזת
ברירת מחדל: 'ימין'
|
האגדה.maxLines |
מספר השורות המרבי במקרא. אפשר להגדיר את המספר למספר גדול יותר כדי להוסיף קווים למקרא. הערה: הלוגיקה המדויקת ששימשה לקביעת מספר הקווים שעברו עיבוד עדיין עדיין משתנה. האפשרות הזו פועלת כרגע רק כש-אגד.position הוא 'top' (למעלה). סוג: מספר
ברירת מחדל: 1
|
style.textStyle |
אובייקט שמציין את סגנון הטקסט של המקרא. לאובייקט יש את הפורמט הבא: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
פאיול |
אם המספר בין 0 ל-1, מוצג תרשים טבעת. החור עם רדיוס שווה ל- סוג: מספר
ברירת מחדל: 0
|
עוגה צבעונית |
צבע הגבולות של הפלח. רלוונטי רק כשהתרשים הוא דו-מימדי. סוג: מחרוזת
ברירת מחדל: 'לבן'
|
עוגת פאי |
תוכן הטקסט המוצג בפרוסה. יכול להיות אחת מהאפשרויות הבאות:
סוג: מחרוזת
ברירת מחדל: 'אחוזים'
|
סגנון עוגה |
אובייקט שמציין את סגנון הטקסט של הפלח. לאובייקט יש את הפורמט הבא: {color: <string>, fontName: <string>, fontSize: <number>}
השדה Type: אובייקט
ברירת מחדל:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
עוגת פאי |
הזווית, במעלות, כדי לסובב את התרשים. הגדרת ברירת המחדל של סוג: מספר
ברירת מחדל:
0 |
הפוך קטגוריות |
אם כן, משרטטת פרוסות נגד כיוון השעון. ברירת המחדל היא ציור בכיוון השעון. סוג: בוליאני
ברירת מחדל: False
|
pieResidueSliceColor |
הצבע של הפלח המשולב שמכיל את כל הפרוסות מתחת פרוסת הניראות. סוג: מחרוזת
Default: '#ccc'
|
תווית עוגה |
תווית לפלח השילוב שמכיל את כל הפרוסות מתחת ל-slicevisibleThreshold. סוג: מחרוזת
ברירת מחדל: 'אחר'
|
פרוסות |
מערך אובייקטים, כאשר כל אחד מהם מתאר את הפורמט של הפרוסה המתאימה בעוגה. כדי להשתמש בערכי ברירת מחדל לפלח, צריך לציין אובייקט ריק (למשל
אפשר לציין מערך של אובייקטים, כשכל אחד מהם יחול על הפלח לפי הסדר הנתון. לחלופין, אפשר לציין אובייקט שבו לכל ילד יש מפתח מספרי שמציין על איזה פלח הוא חל. לדוגמה, שתי ההצהרות הבאות זהות, ומצהירות על הפלח הראשון כשחור ועל הרביעית כאדום: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} Type: מערך של אובייקטים, או אובייקט עם אובייקטים בתוך רכיב
ברירת מחדל: {}
|
סף חשיפה |
הערך השבר של העוגה, שמתחתיו לא תוצג פרוסה בנפרד. כל הפרוסות שלא עברו את הסף הזה ישולבו לפרוסה "אחרת", שהגודל שלה הוא הסכום הכולל של כל הגדלים שלהן. ברירת המחדל היא לא להציג בנפרד מקטעים שגודלם קטן מחצי מעלות. // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 סוג: מספר
ברירת מחדל: חצי מעלה (0.5/360 או 1/720 או .0014)
|
שם פריט |
טקסט להצגה מעל לתרשים. סוג: מחרוזת
ברירת מחדל: ללא שם
|
סגנון טקסט |
אובייקט שמציין את סגנון הטקסט של הכותרת. לאובייקט יש את הפורמט הבא: { 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
|
Description.text |
איזה מידע צריך להופיע כשהמשתמש מעביר את העכבר מעל פרוסת עוגה. יש תמיכה בערכים הבאים:
סוג: מחרוזת
ברירת מחדל: 'שניהם'
|
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 |
האינטראקציה של המשתמש שגרמה להצגת ההסבר הקצר:
סוג: מחרוזת
ברירת מחדל: 'התמקדות'
|
רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הרוחב של הרכיב שמכיל
|
שיטות
שיטה | |
---|---|
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() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: אין
|
אירועים
מידע נוסף על השימוש באירועים האלה מפורט במאמרים אינטראקטיביות בסיסית, אירועי טיפול ואירועי הפעלה.
שם | |
---|---|
click |
מופעל כשהמשתמש לוחץ על התרשים. ניתן להשתמש בו כדי לזהות את הלחיצות על הכותרת, רכיבי הנתונים, הערכים במקרא, הציר, קווי הרשת או התוויות. נכסים: targetID
|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות חזותית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. פילוח של רשומה או מקרא מוגדר מתואם לשורה בטבלת הנתונים (אינדקס העמודה הוא null). מאפיינים: שורה, עמודה
|
onmouseout |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות ויזואלית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. פילוח של רשומה או מקרא מוגדר מתואם לשורה בטבלת הנתונים (אינדקס העמודה הוא null). מאפיינים: שורה, עמודה
|
ready |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם
שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני שמתקשרים אל השיטה מאפיינים: ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר מאפיינים: ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.