סקירה כללית
לוחות בקרה הם דרך פשוטה לארגון ולניהול של כמה תרשימים שחולקים את אותם נתונים בסיסיים. השימוש בממשקי ה-API שמתוארים בדף הזה ישחרר אותך מהנטל של החיבור הקווי, ותיאום כל התרשימים שהם חלק ממרכז שליטה.
מרכזי הבקרה מוגדרים באמצעות המחלקות google.visualization.Dashboard
.
Dashboard
מופעים מקבלים DataTable
שמכיל את הנתונים
כדי להמחיש את הנתונים ולהפיץ אותם לכל התרשימים שהם חלק מלוח הבקרה.
פקדים הם ווידג'טים של ממשק משתמש (כמו בוחרי קטגוריות, מחוונים של טווחים, השלמה אוטומטית...) שאיתם יש לך אינטראקציה עם הנתונים בלוחות בקרה ובתרשימים שהם חלק מהם.
אמצעי הבקרה מוגדרים באמצעות המחלקות google.visualization.ControlWrapper
.
אפשר להוסיף ControlWrapper
מכונות למרכז בקרה, שבהן הן מתנהגות כמו צינורות ושסתומים
במערכת צנרת. הם אוספים נתונים של משתמשים ומשתמשים במידע כדי להחליט אילו
נתונים במרכז השליטה יהיו זמינים בתרשימים שהם חלק ממנו.
ריכזנו כאן דוגמה שבה המערכת משתמשת בבורר קטגוריות ובמחוון טווח כדי להציג את הנתונים בצורה חזותית באמצעות תרשים עוגה.
הערה: מרכז הבקרה הוא אינטראקטיבי. כדאי לנסות להפעיל את הפקדים ולראות את השינוי בתרשים בזמן אמת.
שימוש בפקדים ובלוחות בקרה
אלו הם השלבים העיקריים ליצירת מרכז בקרה ולהטמעה בדף. למטה מופיע קטע קוד שמדגים את כל השלבים האלה, ולאחר מכן מידע מפורט על כל שלב.
- יצירת שלד HTML ללוח הבקרה. הדף צריך להכיל כמה רכיבי HTML שצריך כדי לכלול כל חבר במרכז שליטה. הם כוללים את מרכז השליטה עצמו ואת כל הפקדים והתרשימים שהוא חלק ממנו. בדרך כלל יש להשתמש בתג <div> לכל אחד.
-
טוענים את הספריות. כדי לכלול לוח בקרה בדף, צריך
לכלול או לטעון רק שתי ספריות: ממשק ה-API של AJAX של Google וחבילת
controls
תצוגה חזותית של Google. - מכינים את הנתונים. עליך להכין את הנתונים להצגה חזותית. לשם כך, עליך לציין את הנתונים בעצמך בקוד או לשלוח שאילתה לגבי אתר מרוחק לצורך חיפוש נתונים.
- יצירת מופע של לוח בקרה. כדי ליצור את מרכז השליטה, עליך להתקשר ליוצר שלו ולהעביר הפניה לאלמנט <div> שמחזיק אותו.
-
אפשר ליצור כמה פקדים ותרשימים שרוצים,.
צריך ליצור
google.visualization.ChartWrapper
ו-google.visualization.ControlWrapper
מופעים כדי לתאר כל תרשים ולשלוט במרכז הבקרה. -
הגדרת יחסי תלות. אפשר להתקשר אל
bind()
במרכז הבקרה שלך ולהעביר את מכונות הבקרה והתרשימים כדי שמרכז הבקרה יוכל לדעת מה לנהל. אחרי שאמצעי הבקרה והתרשים יאוחדו, לוח הבקרה יעדכן את התרשים כך שיתאים לאילוצים שנשלטים על הנתונים. -
מציירים את מרכז הבקרה. ניתן להתקשר אל
draw()
בלוח הבקרה שלך ולהזין את הנתונים כדי לשרטט את מרכז הבקרה המלא בדף. - שינויים פרוגרמטיים לאחר שרטוט. אחרי שהשרטוט יהיה גלוי לך, תהיה לך אפשרות להניע את התוכניות שמשמשות כמרכז השליטה ולהגדיר את לוח הבקרה בהתאם.
הנה דוגמה פשוטה לדף שיוצר מרכז בקרה פשוט עם מחוון טווח שממחיש תרשים עוגה. מרכז השליטה שנוצר מוצג מתחת לקטע הקוד.
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, pieChart); // Draw the dashboard. dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div> </body> </html>
זהו מרכז הבקרה שנוצר באמצעות הקוד הזה.
1. יצירת שלד HTML עבור מרכז הבקרה
הדף צריך לכלול כמות רבה של רכיבי HTML (בדרך כלל <div>s) כך שיכלול את מרכז הבקרה עצמו ואת כל הבקרות והתרשימים שיש בו. כשיוצרים מופעים של לוח בקרה, בקרה ותרשימים, צריך להפנות לקובץ עזר שלהם. לכן, צריך להקצות מזהה לכל רכיב HTML.
<!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div>
אתם יכולים למקם כל רכיב HTML בכל דרך שתרצו, כדי שמרכז הבקרה שלכם ייראה בבירור.
2. טעינת הספריות שלכם
כדי לכלול לוח בקרה בדף, צריך לכלול או לטעון רק שתי ספריות בדף: ממשק ה-API של Google AJAX
והחבילה controls
של Google Visualization. ממשק ה-API (בפרט,
google.visualization.ChartWrapper
) מזהה באופן אוטומטי את החבילות האחרות
הדרושות (לדוגמה, gauge
אם בחרת להשתמש בתרשים 'לוח מחוונים') וטוען אותן בזמן אמת
מבלי להתערבות נוספת.
עליך להשתמש ב-google.charts.load()
כדי לאחזר את ספריית הבקרה.
<!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. // Packages for all the other charts you need will be loaded // automatically by the system. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); function drawDashboard() { // Everything is loaded. Assemble your dashboard... } </script>
3. מכינים את הנתונים
לאחר טעינת ממשק ה-API להצגה חזותית, google.charts.setOnLoadCallback()
יקרא לפונקציית ה-handler שלך, כדי לוודא שכל השיטות והמחלקות המסייעות יהיו מוכנות כדי להתחיל להכין את הנתונים.
מרכז בקרה מקבל נתונים ב-DataTable, בדומה לנתונים בתרשימים.
4. יצירת מופע של לוח בקרה
לאחר יצירת הנתונים, ניתן ליצור אובייקט של מרכז השליטה. בנאי של מרכז בקרה מקבל פרמטר אחד: הפניה לרכיב DOM שבו יש לשרטט את מרכז הבקרה.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
מרכזי הבקרה נחשפים לכיתת JavaScript. אחרי שיוצרים דשבורד, אפשר לבצע כמה שלבים אופציונליים, כמו הוספת פונקציות מסוג listener של אירוע (לדוגמה, קבלת התראה כשמרכז הבקרה מוכן). מרכזי שליטה מטפלים באירועים באותו אופן שבו תרשימים מטפלים בהם. מידע נוסף זמין בקטע טיפול באירועי תצוגה חזותית או הצגת שגיאות באופן שגוי בקטע התרשים.
5. יצירת מכונות של בקרה ותרשים
אפשר להגדיר כמה מופעים צריך לכל פקד ותרשים שיהיו חלק ממרכז השליטה.
שימוש ב-
google.visualization.ChartWrapper
וב-
google.visualization.ControlWrapper
להגדרת תרשימים ובקרות בהתאמה.
// Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'label' } });
כשיוצרים מופעים ChartWrapper
ו-ControlWrapper
, אין לציין את הפרמטר dataTable
או את הפרמטר dataSourceUrl
. מרכז הבקרה
מאכיל את כל הנתונים לפי הנתונים המתאימים. עם זאת, חשוב לציין את הפרמטרים הנדרשים: chartType
ואת containerId
לתרשימים, controlType
ו-containerId
לפקדים.
כמה טיפים להגדרת פקדים ותרשימים:
-
עליך לתת לכל הפקדים
filterColumnIndex
(אוfilterColumnLabel
) כדי לציין את העמודה שבהgoogle.visualization.DataTable
הבקרה פועלת (בדוגמה שלמעלה, הפקד פועל בעמודה עם התווית בייגלים), -
ניתן להשתמש באפשרות ההגדרה
state
בפקדים כדי להפעיל אותם עם מצב מפורש כשהם משורטטים לראשונה. לדוגמה, אפשר להשתמש בהגדרה הזו כדי לתקן את המיקומים הראשוניים של הפקד של האגודל בטווח.var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'minValue': 1, 'maxValue': 10 }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 3, 'highValue': 8} });
-
לכל התרשימים במרכז הבקרה יש נתונים זהים לאלה שנוצרו בטבלאות שהכנתם בשלב הכנת הנתונים. עם זאת, לעיתים קרובות תרשימים דורשים סידור ספציפי של עמודות כדי שיוצגו באופן תקין: לדוגמה, תרשים עוגה מחייב עמודת מחרוזת עבור התווית, ואחריהן עמודת עמודות של הערך.
יש להשתמש באפשרות
view
במהלך ההגדרה של כל מופע שלChartWrapper
כדי להצהיר אילו עמודות רלוונטיות לתרשים, כמו בדוגמה הבאה.var data = google.visualization.arrayToDataTable([ ['Name', 'Gender', 'Age', 'Donuts eaten'], ['Michael' , 'Male', 12, 5], ['Elisa', 'Female', 20, 7], ['Robert', 'Male', 7, 3], ['John', 'Male', 54, 2], ['Jessica', 'Female', 22, 6], ['Aaron', 'Male', 3, 1], ['Margareth', 'Female', 42, 8] ]); var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'title': 'Donuts eaten per person' }, // The pie chart will use the columns 'Name' and 'Donuts eaten' // out of all the available ones. 'view': {'columns': [0, 3]} }); // The rest of dashboard configuration follows // ...
6. הגדרת יחסי תלות
אחרי יצירת הפקד הן של לוח הבקרה והן של כל הפקדים והתרשימים שיהיו חלק ממנו, אפשר להשתמש בשיטת bind()
כדי לספר למרכז השליטה על התלות שיש בין הפקדים והתרשימים.
אחרי שאמצעי הבקרה והתרשים יאוחדו, מרכז הבקרה יעדכן את התרשים כך שיתאים לאילוצים שנשלטים על הנתונים. במרכז השליטה לדוגמה שאתה בונה, מחוון הטווח ותרשים העוגה קשורים זה לזה, כך שבכל פעם שתהיה לך אינטראקציה עם הפריט הקודם, הערכים האחרונים יתעדכנו כדי להציג רק את הנתונים שתואמים לטווח שנבחר.
// 'pieChart' will update whenever you interact with 'donutRangeSlider' // to match the selected range. dashboard.bind(donutRangeSlider, pieChart);
אפשר לקשר את אמצעי הבקרה והתרשימים להרבה הגדרות שונות: אחד לאחד, אחד לרבים, אחד לאחד ורבים לרבים. בכל פעם שכמה פקדים קשורים לתרשים, לוח הבקרה
מעדכן את התרשים כך שיתאים לאילוצים המשולבים שנאכפים על ידי כל אמצעי הבקרה. בו-זמנית, הפקד יכול להפעיל כמה תרשימים בו-זמנית. כדי לציין כמה שיוכים בו-זמנית, צריך להעביר מערכים לשיטה bind()
במקום למופעים בודדים. אפשר גם לקבץ יחד מספר שיחות bind()
. הנה מספר דוגמאות.
// Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes. dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot); // One-to-many binding where 'ageSelector' drives two charts. dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]); // bind() chaining where each control drives its own chart. dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);
לשימושים מתקדמים, אפשר גם לקשור פקדים לאמצעי בקרה אחרים כדי ליצור רשתות של יחסי תלות .
dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);
7. ציור של מרכז השליטה
צריך להפעיל את השיטה draw()
במופע של לוח הבקרה כדי לעבד את לוח הבקרה כולו.
שיטת draw()
משתמשת רק בפרמטר אחד: DataTable
(או DataView
) שמפעיל את מרכז השליטה.
צריך לקרוא לפונקציה draw()
בכל פעם שמבצעים שינויים בהרכב של מרכז הבקרה (לדוגמה, על ידי הוספת פקדים או תרשימים חדשים), או לשנות את DataTable
הכולל שמפעיל אותו.
המופע של מרכז הבקרה מתחיל אירוע ready
בכל פעם ש-draw()
מסתיים, ומשקף את כל הפקדים והתרשימים שהוא חלק ממנו. אירוע error
מופעל אם אחד מהפקדים או התרשים המנוהלים לא מוצגים. מידע נוסף על טיפול באירועים זמין במאמר טיפול באירועים.
הערה: כדאי להאזין לאירוע ready
לפני שמנסים לשנות את היצירה של מרכז הבקרה או לצייר אותו שוב.
8. שינויים פרוגרמטיים לאחר הגרלה
אחרי שלוח הבקרה יסיים את draw()
הראשוני, הוא יהיה חי ויגיבו באופן אוטומטי לכל פעולה שתבוצע בו (למשל, שינוי הטווח שנבחר בפס הזזה לבקרה, שהוא חלק ממרכז הבקרה).
אם צריך לשנות באופן פרוגרמטי את מצב מרכז הבקרה, אפשר לעשות זאת ישירות במכונות עם ControlWrapper
וב-ChartWrapper
שהן חלק ממנו.
הכלל המנחה הוא לבצע את השינויים הדרושים ישירות במכונה הספציפית ControlWrapper
(או ChartWrapper
): לדוגמה, יש לשנות את אפשרות הבקרה או המצב באמצעות setOption()
וגם setState()
בהתאמה, ולתת קריאה לשיטה draw()
לאחר מכן. לאחר מכן, מרכז הבקרה יתעדכן בהתאם לשינויים שביקשת.
הדוגמה הבאה מציגה מקרה כזה.
<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', 'controls']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // We omit "var" so that programmaticSlider is visible to changeRange. var programmaticSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'programmatic_control_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'ui': {'labelStacking': 'vertical'} } }); var programmaticChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value' } }); var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); dashboard.bind(programmaticSlider, programmaticChart); dashboard.draw(data); changeRange = function() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); }; changeOptions = function() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); }; } </script> </head> <body> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> <div> <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button><br /> <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> </div> </td> <td> <div id="programmatic_chart_div"></div> </td> </tr> </table> </div> </body> </html>
הפניית API
בקטע הזה מפורטים האובייקטים שנחשפו על ידי ממשק ה-API של לוחות הבקרה ולוח הבקרה, והשיטות הרגילות שמוצגות על ידי כל אמצעי הבקרה.
מרכז שליטה
מייצג אוסף של פקדים ותרשימים משתפים פעולה שחולקים את אותם נתונים בסיסיים.
יצרן
Dashboard(containerRef)
- containerRef
- הפניה לרכיב מאגר תקין בדף שמכיל את התוכן של מרכז הבקרה.
שיטות
במרכז השליטה מוצגים השיטות הבאות:
שיטה | סוג הערך המוחזר | תיאור |
---|---|---|
bind(controls, charts) |
google.visualization.Dashboard |
קישור של אמצעי בקרה אחד או יותר למשתתפים אחרים בלוח הבקרה (בתרשימים או באמצעי בקרה אחרים), כך שכל אחד מהם יעוצב מחדש בכל פעם שיתבצע איסוף של אינטראקציה פרוגרמטית או אינטראקציה עם משתמש שתשפיע על הנתונים שמנוהלים על ידי מרכז הבקרה. הפונקציה הזו מחזירה את מופע מרכז הבקרה עצמו לשרשור של כמה קריאות ל-
|
draw(dataTable) |
ללא | משרטט את לוח הבקרה.
|
getSelection() |
מערך אובייקטים |
היא מחזירה מערך של הישויות החזותיות הנבחרות של התרשימים במרכז השליטה. כשמפעילים את השיטה הערה: עדיין צריך לצרף מאזיני אירוע לאירוע שנבחר לכל תרשים שאליו רוצים להאזין. |
אירועים
האובייקט של מרכז הבקרה משליך את האירועים הבאים. חשוב לשים לב שצריך להתקשר אל
Dashboard.draw()
לפני שאירועים יידחו.
שם | תיאור | נכסים |
---|---|---|
error |
מופעל כשמתרחשת שגיאה במהלך העיבוד של מרכז הבקרה. לפחות אחד מהפקדים והתרשימים שנכללים בלוח הבקרה נכשל. | מזהה, הודעה |
ready |
השרטוט הושלם וזהו אישור לאשר את השינויים. כל אמצעי הבקרה והתרשימים
שהם חלק ממרכז השליטה מוכנים לשיטה חיצונית ולאינטראקציה של המשתמש. אם ברצונך לשנות את מרכז הבקרה (או את הנתונים שהוא מציג) לאחר שציירת אותו, כדאי להגדיר מאזין לאירוע הזה לפני הקריאה לשיטה האירוע
|
ללא |
מעטפת גלישה
אובייקט ControlWrapper הוא wrapper סביב ייצוג JSON של פקד בקרה מוגדר. הכיתה חושפת שיטות נוחות להגדרת אמצעי בקרה בלוח הבקרה, לציור ולשינוי פרוגרמטי של המצב.
יצרן
ControlWrapper(opt_spec)
- opt_spec
- [אופציונלי] – אובייקט JSON מגדיר את הפקד, או גרסת מחרוזת טורית של אותו אובייקט. המאפיינים הנתמכים של אובייקט JSON מוצגים בטבלה הבאה. אם לא בחרת אחרת, עליך להגדיר את כל המאפיינים המתאימים בשיטות set... שנחשפו על ידי ControlWrapper.
מאפיין (property) | סוג | נדרש | ברירת מחדל | תיאור |
---|---|---|---|---|
סוג בקרה | String | נדרש | ללא |
שם הסיווג של הפקד. ניתן להשמיט את שם החבילה של google.visualization
עבור אמצעי הבקרה של Google. דוגמאות: CategoryFilter ,
NumberRangeFilter .
|
מזהה מאגר | String | נדרש | ללא | המזהה של רכיב ה-DOM בדף שמארח את הפקד. |
אפשרויות | התנגדות | אופציונלי | ללא |
אובייקט שמתאר את האפשרויות של הפקד. אפשר להשתמש בסימון מילולי של
JavaScript, או לתת לו כינוי. דוגמה:
"options": {"filterColumnLabel": "Age",
"minValue": 10, "maxValue": 80}
|
מדינה | התנגדות | אופציונלי | ללא |
אובייקט שמתאר את מצב הבקרה. המדינה אוספת את כל המשתנים שהמשתמש
שיכול להפעיל את הבקרה יכול להשפיע עליהם. לדוגמה, אפשר לתאר מצב של מחוון טווח
במיקומים של האגודל התחתון והגבוה של פס ההזזה. אפשר להשתמש בסימון מילולי של JavaScript או לספק כינוי לאובייקט.לדוגמה:
"state": {"lowValue": 20, "highValue": 50}
|
שיטות
ב-ControlWrapper נחשפות השיטות הנוספות הבאות:
שיטה | סוג הערך המוחזר | תיאור |
---|---|---|
draw() |
ללא |
מצייר את הבקרה. בדרך כלל מרכז הבקרה שמכיל את הפקד מטפל בשרטוט שלו.
עליך לקרוא ל- |
toJSON() |
String | מחזירה גרסת מחרוזת של ייצוג ה-JSON של הפקד. |
clone() |
wrapper | מחזירה עותק עמוק של Wrapper של בקרה. |
getControlType() |
String |
שם הסיווג של הפקד. אם מדובר באמצעי בקרה של Google, השם לא יאושר
אצל google.visualization . לדוגמה, אם זה היה אמצעי בקרה של קטגוריה,
הוא יחזיר את הערך "CategoryFilter" ולא
"google.visualization.CategoryFilter".
|
getControlName() |
String | מחזירה את שם הבקרה שהוקצה על ידי setControlName() . |
getControl() |
בקרת אובייקט באובייקט |
מחזירה הפניה לבקרה שנוצרה על ידי ControlWrapper זה. הפונקציה הזו תחזיר את הערך null עד קריאה לפונקציה draw() באובייקט ControlWrapper (או בלוח הבקרה שבו היא נמצאת), והיא תחזיר אירוע מוכן. האובייקט המוחזר מציג רק שיטה אחת: resetControl() , שמשחזרת את מצב הבקרה למצב שבו
הוא הופעל (למשל, איפוס רכיב טופס HTML).
|
getContainerId() |
String | המזהה של רכיב מאגר ה-DOM של הפקד. |
getOption(key, opt_default_val) |
כל סוג | החזרת הערך של אפשרות הבקרה שצוינה
|
getOptions() |
התנגדות | מחזירה את האובייקט של אפשרויות עבור הפקד הזה. |
getState() |
התנגדות | מחזירה את מצב הבקרה. |
setControlType(type) |
ללא |
הגדרת סוג הבקרה. מעבירים את שם המחלקה של הפקד כדי ליצור אובייקט. אם אמצעי הבקרה הזה
של Google לא עומד בדרישות, אין לתת לו את ההרשאה google.visualization .
למשל, כדי להציג מחוון טווח מעל עמודה מספרית, צריך להעביר את הערך
NumberRangeFilter".
|
setControlName(name) |
ללא | המדיניות מגדירה שם שרירותי של הפקד. הקטע הזה לא מוצג בשום מקום בבקרה, אבל הוא מיועד לך בלבד. |
setContainerId(id) |
ללא | מגדירה את המזהה של רכיב ה-DOM שמכיל את הפקד. |
setOption(key, value) |
ללא |
המדיניות מגדירה ערך של אפשרות בקרה יחידה, כאשר key הוא שם האפשרות ו-value הוא הערך. כדי לבטל את האפשרות, מזינים null כערך. לתשומת ליבך: מפתח יכול להיות שם שעומד בדרישות, כמו 'vAxis.title' .
|
setOptions(options_obj) |
ללא | הגדרה של אובייקט עם אפשרויות מלאות בשביל פקד. |
setState(state_obj) |
ללא | הגדרת מצב הבקרה. המדינה אוספת את כל המשתנים שהמשתמש הפעיל את הבקרה עליהם. לדוגמה, אפשר לתאר מצב של מחוון טווח בתור המיקומים שבהם נמצא האגודל התחתון והגבוה של פס ההזזה. |
אירועים
אובייקט ControlWrapper זורק את האירועים הבאים. חשוב לשים לב שצריך להתקשר אל ControlWrapper.draw()
(או לצייר את לוח הבקרה שמכיל את הבקרה) כדי שאירועים יושלכו.
שם | תיאור | נכסים |
---|---|---|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את הפקד. | מזהה, הודעה |
ready |
אמצעי הבקרה מוכן לקבלת אינטראקציות של משתמשים ולקריאות חיצוניות לשיטות. אם רוצים ליצור אינטראקציה עם אמצעי הבקרה ועם שיטות השיחה אחרי שמסיימים לשרטט אותו, צריך להגדיר למאזינים אירוע לפני שמתקשרים לשיטת draw ולהתקשר אליהם רק אחרי שהאירוע הופעל. לחלופין, אפשר להאזין לאירוע של ready
בלוח הבקרה בלחיצה על אמצעי הבקרה ופקדי השיחה רק אחרי שהאירוע הופעל.
|
ללא |
statechange |
מופעל כשהמשתמש יוצר אינטראקציה עם הבקרה ומשפיע על המצב שלו. לדוגמה, אירוע statechange יופעל בכל פעם שתזיזו את הפקד של פס ההזזה של הטווח. כדי לאחזר מצב בקרה מעודכן לאחר שהאירוע הופעל, יש להתקשר אל
ControlWrapper.getState() .
|
ללא |
גלישת תרשים
מעיינים במסמכי התיעוד בנושא
google.visualization.ChartWrapper
בקטע ה-API של הרכיבים החזותיים.
ההערות הבאות חלות בעת השימוש ב-ChartWrapper
כחלק ממרכז שליטה:
-
אין להגדיר באופן מפורש את המאפיינים
dataTable
,query
,dataSourceUrl
וגםrefreshInterval
. מרכז השליטה שמכיל את התרשים מטפל בפיד הנתונים שהוא צריך. -
יש להגדיר את המאפיין
view
כדי להצהיר אילו עמודות, מתוך כל העמודות המוצגות ב-dataTable
שסופקו למרכז הבקרה, הן רלוונטיות לתרשים, כפי שמתואר בקטע יצירת מכונות של בקרה ותרשימים.
גלריית הבקרה
מסננים הם רכיבים גרפיים שבאמצעותם אנשים יכולים לבחור באופן אינטראקטיבי אילו נתונים יוצגו בתרשים. בקטע הזה מתוארים המסננים של Google Chart : CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter ו-StringFilter.
אפשר להשתמש בכל אחד מהפרמטרים בתור פרמטר ל-ControlWrapper.setControlType()
.
הערה: בתיאור האפשרויות, נעשה שימוש בסימון הנקודות לתיאור מאפייני אובייקט מקוננים. לדוגמה, יש להצהיר על אפשרות בשם 'ui.label'
באובייקט אפשרויות כ-var options = {"ui": {"label": "someLabelValue"} };
סינון תוכן
כלי לבחירת אחד או יותר מקבוצה של ערכים מוגדרים.
מדינה
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
הערכים שנבחרו | מערך של אובייקטים או סוגים מהדור הישן | ללא |
קבוצת הערכים שנבחרה. הערכים שנבחרו צריכים להיות קבוצה של
הערכים שאפשר לבחור באמצעות ההגדרה values (המערכת תתעלם מערכים מיותרים). אם ה-CategoryFilter לא מאפשר בחירה מרובה, יישמר רק הערך הראשון של המערך.
|
אפשרויות
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
FilterColumnIndex | number | ללא |
העמודה בטבלת הנתונים שעליה המסנן צריך לפעול. חובה לספק אפשרות זו או filterColumnLabel . אם יש שני סוגים, האפשרות הזו מקבלת עדיפות.
|
תווית של עמודה | string | ללא |
התווית של העמודה שהמסנן צריך לפעול לפיה. חובה לספק אפשרות זו או filterColumnIndex . אם יש שני סוגים,
הפרמטר filterColumnIndex מקבל עדיפות.
|
ערכים | מערך | אוטומטי |
רשימת ערכים לבחירה. אם נעשה שימוש במערך אובייקטים, צריכה להיות להם ייצוג
toString() מתאים להצגה למשתמש. אם הערך של null או לא מוגדר, רשימת הערכים תחושב באופן אוטומטי מהערכים הקיימים בעמודה DataTable
שעליה פועלת פקד זה.
|
useFormattedValue | boolean | לא נכון | כשמאכלסים את רשימת הערכים שניתן לבחור באופן אוטומטי מהעמודה DataTable, המסנן הזה פועל – אם להשתמש בערכי התא עצמם או בערכים המפורמטים שלהם. |
ממשק משתמש | התנגדות | null |
אובייקט עם חברים להגדרת היבטים שונים בממשק המשתמש של הפקד.
כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן:
{label: 'Metric', labelSeparator: ':'} |
ui.caption | string | 'בחירת ערך...' | הכיתוב שיוצג בתוך הווידג'ט של בוחר הערכים כאשר לא נבחר פריט. |
ui.sortValues | boolean | נכון | האם למיין את הערכים שמהם יש לבחור. |
ui.SelectedValuesLayout | string | 'לצד' | איך להציג את הערכים שנבחרו אם אפשר לבחור כמה אפשרויות. הערכים האפשריים הם:
|
ui.allowNone | boolean | נכון |
האם לאפשר למשתמש לא לבחור ערך כלשהו. אם הערך הוא false , המשתמש צריך לבחור לפחות ערך אחד מהערכים הזמינים. במהלך אתחול הבקרה, אם האפשרות מוגדרת ל-false ולא מצוין מצב selectedValues , הערך הראשון מתוך הערכים הזמינים יוחלף באופן אוטומטי.
|
ui.allowMultiple | boolean | נכון | אם ניתן לבחור מספר ערכים במקום רק אחד בלבד. |
ui.allowTyping | boolean | נכון | אם המשתמש יכול להקליד בשדה טקסט כדי לצמצם את רשימת האפשרויות הזמינות (באמצעות השלמה אוטומטית), או לא. |
ui.label | string | אוטומטי | התווית שתוצג לצד בוחר הקטגוריות. אם לא בחרת תווית, המערכת תשתמש בתווית של העמודה שעליה הפקד פועל. |
ui.labelמפריד | string | ללא | מחרוזת מפרידה מצורפת לתווית, כדי להפריד בין התווית באופן חזותי באמצעות בוחר הקטגוריות. |
ui.labelStacking | string | 'אופקי' |
האם התווית צריכה להופיע מעל (ערימה אנכית) או ליד (ערימה אופקית)
לבחירת הקטגוריות. יש להשתמש ב-'vertical' או ב-'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-categoryfilter' | מחלקת ה-CSS שאותה מקצים לפקד, לעיצוב מותאם אישית. |
FilterRangeFilter
מחוון עם שתי אצבעות על גבי תרשים, כדי לבחור טווח ערכים מתוך הציר הרציף בתרשים.
מדינה
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
range.start | מספר, תאריך, תאריך ושעה או שעה | ערך ההתחלה של הטווח | ההתחלה של הטווח שנבחר, כולל. |
range.end | מספר, תאריך, תאריך ושעה או שעה | ערך סיום של טווח | סוף הטווח שנבחר, כולל. |
אפשרויות
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
FilterColumnIndex | number | ללא |
האינדקס של העמודה בטבלת הנתונים שעליה המסנן פועל.
חובה לספק את האפשרות הזו או את הערך filterColumnLabel . אם שני הסוגים
קיימים, האפשרות הזו מקבלת עדיפות.
יש היגיון לציין רק אינדקס של עמודת דומיין שמוטמעת בציר הרציף של התרשים המצויר במסגרת הבקרה. |
תווית של עמודה | string | ללא |
התווית של עמודת טבלת הנתונים שעליה המסנן פועל. חובה לספק אפשרות זו או filterColumnIndex . אם מתקיימים שני תנאים,
הפרמטר filterColumnIndex מקבל עדיפות.
לתשומת ליבך, הגיוני לציין רק תווית של עמודת דומיין שמוטמעת בציר הרציף של התרשים המצויר במסגרת הבקרה. |
ממשק משתמש | התנגדות | null |
אובייקט עם חברים להגדרת היבטים שונים בממשק המשתמש של הפקד.
כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}} |
ui.chartType | string | 'ComboChart' |
סוג התרשים שמשורטט בתוך הפקד. הוא יכול להיות אחת מהאפשרויות הבאות: 'AreaChart', 'LineChart', 'ComboChart' או 'ScatterChart'. |
ui.chartOption | התנגדות |
{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } } |
אפשרויות ההגדרה של התרשים בתוך הפקד.
מאפשר אותה רמת תצורה כמו כל תרשים בלוח הבקרה,
והוא תואם לאותו פורמט המקובל
ב-ChartWrapper.setOption() .
ניתן לציין אפשרויות נוספות או לשנות את ברירת המחדל. עם זאת, חשוב לזכור שברירות המחדל נבחרו בקפידה כדי לספק מראה מיטבי. |
ui.chartView | אובייקט או מחרוזת (אובייקט טורי) | null |
מפרט התצוגה שרוצים להחיל על טבלת הנתונים שמשמשת לשרטוט התרשים בתוך
קבוצת הבקרה. מאפשר אותה רמת תצורה כמו כל תרשים בלוח הבקרה,
והוא תואם לפורמט המקובל ב-ChartWrapper.setView() .
אם לא מצוין אחרת, טבלת הנתונים עצמה תשמש לשרטוט התרשים.
חשוב לשים לב שהציר האופקי של התרשים המשורטט צריך להיות מתמשך, אז כדאי לשים לב ולציין אם הוא |
ui.minRangeSize | number | הפרש בערך הנתונים מפוענח כפיקסל אחד |
הגודל המינימלי של הטווח שאפשר לבחור (range.end - range.start ), צוין ביחידות של ערך נתונים. עבור ציר מספרי, זהו מספר (לא בהכרח מספר שלם).
עבור תאריך, ציר זמן או ציר זמן, זהו מספר שלם שמציין את ההבדל
באלפיות השנייה.
|
ui.snapToData | boolean | לא נכון |
אם True, ההצמדה של אסימוני טווח מתבצעת לנקודות הנתונים הקרובות ביותר.
במקרה הזה, נקודות הקצה של הטווח שמוחזר על ידי getState() הן בהכרח ערכים בטבלת הנתונים.
|
אירועים
תוספות לאירועים של ControlWrapper:
שם | תיאור | נכסים |
---|---|---|
statechange |
זהה לתיעוד של כל ControlWrapper, יש רק מאפיין בוליאני נוסף, inProgress , שמציין אם המצב משתנה כרגע (כל אחת מהאגודלים מתבצעת או שהטווח עצמו נגרר).
|
נכנסת לקצב |
מסנן טווח תאריכים
פס הזזה בעלת ערך כפול לבחירת טווחי תאריכים.
נסו להזיז את פס ההזזה כדי לשנות את השורות שמוצגות בטבלה שלמטה.
מדינה
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
ערך נמוך | number | ללא | הטווח התחתון של הטווח שנבחר, כולל. |
ערך גבוה | number | ללא | ההיקף הגבוה יותר של הטווח שנבחר, כולל. |
המינימום הנדרש | boolean | ללא |
אם האגודל התחתון של פס ההזזה נעול בטווח המינימלי המותר. אם המדיניות מוגדרת, היא מבטלת את lowValue .
|
highThumbAtMax | boolean | ללא |
אם האגודל העליון של פס ההזזה נעול בטווח המקסימלי המותר. אם המדיניות מוגדרת, היא מבטלת את highValue .
|
אפשרויות
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
FilterColumnIndex | number | ללא |
העמודה בטבלת הנתונים שעליה המסנן צריך לפעול. חובה לספק אפשרות זו או filterColumnLabel . אם יש שני סוגים, האפשרות הזו מקבלת עדיפות.
הערך חייב להפנות לעמודה עם סוג number .
|
תווית של עמודה | string | ללא |
התווית של העמודה שהמסנן צריך לפעול לפיה. חובה לספק אפשרות זו או filterColumnIndex . אם יש שני סוגים,
הפרמטר filterColumnIndex מקבל עדיפות. הערך חייב להפנות לעמודה עם הסוג number .
|
minValue | תאריך | אוטומטי | הערך המינימלי המותר לטווח התחתון. אם המדיניות לא מוגדרת, המערכת תסיק את הערך לפי התוכן של ה-DataTable המנוהל על ידי הפקד. |
ערך מקסימלי | תאריך | אוטומטי | הערך המקסימלי המותר לטווח הגבוה יותר. אם המדיניות לא מוגדרת, המערכת תסיק את הערך לפי התוכן של ה-DataTable המנוהל על ידי הפקד. |
ממשק משתמש | התנגדות | null |
אובייקט עם חברים להגדרת היבטים שונים בממשק המשתמש של הפקד.
כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן:
{label: 'Age', labelSeparator: ':'} |
ui.format | התנגדות | ללא | איך לייצג את התאריך כמחרוזת. ניתן להזין כל פורמט תאריך חוקי. |
ui.step | string | יום | השינוי המינימלי האפשרי כאשר גוררים את האגודל: אפשר להגדיר כל יחידת זמן עד "יום". ('חודש' ו'שנה' עדיין לא נתמכים). |
ui.ticks | number | אוטומטי | מספר המקקים (מיקומים קבועים בסרגל הטווח) שהאגודל יכול לתפוס. |
ui.unitIncrement | string | '1' | הסכום שיש להגדיל בו-זמנית ביחידות של היקפי טווח. אפשר להגדיל את היחידה באופן שווה באמצעות מקשי החיצים כדי להזיז את האגודל. |
ui.blockIncrement | number | 10 | הסכום שיש להוסיף למרווחי חסימה של היקפי הטווח. אפשר להוסיף בלוק חסימה מקביל לשימוש בלחצנים pgUp ו-pgDown כדי להעביר את האגודל לפס ההזזה. |
ui.showRangeValues | boolean | נכון | בחירה אם אפשר להציג תוויות לצד פס ההזזה שמציג את ההיקפים של הטווח שנבחר. |
ui.orientation | string | 'אופקי' | כיוון פס ההזזה. 'horizontal' או 'vertical' . |
ui.label | string | אוטומטי | התווית שתוצג ליד פס ההזזה. אם לא בחרת תווית, המערכת תשתמש בתווית של העמודה שעליה הפקד פועל. |
ui.labelמפריד | string | ללא | נוספת תווית מפרידה לתווית, כדי להפריד בין התווית לפס ההזזה. |
ui.labelStacking | string | 'אופקי' |
האם התווית צריכה להופיע מעל (ערימה אנכית) או לצד המחוון (בערימה אופקית). יש להשתמש ב-'vertical' או ב-'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-rangefilter' | מחלקת ה-CSS שאותה מקצים לפקד, לעיצוב מותאם אישית. |
מספר מסנן
פס הזזה בעלת ערך כפול לבחירת טווחים של ערכים מספריים.
מדינה
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
ערך נמוך | number | ללא | הטווח התחתון של הטווח שנבחר, כולל. |
ערך גבוה | number | ללא | ההיקף הגבוה יותר של הטווח שנבחר, כולל. |
המינימום הנדרש | boolean | ללא |
אם האגודל התחתון של פס ההזזה נעול בטווח המינימלי המותר. אם המדיניות מוגדרת, היא מבטלת את lowValue .
|
highThumbAtMax | boolean | ללא |
אם האגודל העליון של פס ההזזה נעול בטווח המקסימלי המותר. אם המדיניות מוגדרת, היא מבטלת את highValue .
|
אפשרויות
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
FilterColumnIndex | number | ללא |
העמודה בטבלת הנתונים שעליה המסנן צריך לפעול. חובה לספק אפשרות זו או filterColumnLabel . אם יש שני סוגים, האפשרות הזו מקבלת עדיפות.
הערך חייב להפנות לעמודה עם סוג number .
|
תווית של עמודה | string | ללא |
התווית של העמודה שהמסנן צריך לפעול לפיה. חובה לספק אפשרות זו או filterColumnIndex . אם יש שני סוגים,
הפרמטר filterColumnIndex מקבל עדיפות. הערך חייב להפנות לעמודה עם הסוג number .
|
minValue | number | אוטומטי | הערך המינימלי המותר לטווח התחתון. אם המדיניות לא מוגדרת, המערכת תסיק את הערך לפי התוכן של ה-DataTable המנוהל על ידי הפקד. |
ערך מקסימלי | number | אוטומטי | הערך המקסימלי המותר לטווח הגבוה יותר. אם המדיניות לא מוגדרת, המערכת תסיק את הערך לפי התוכן של ה-DataTable המנוהל על ידי הפקד. |
ממשק משתמש | התנגדות | null |
אובייקט עם חברים להגדרת היבטים שונים בממשק המשתמש של הפקד.
כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן:
{label: 'Age', labelSeparator: ':'} |
ui.format | התנגדות | ללא | איך לייצג את המספר כמחרוזת. ניתן להשתמש בכל פורמט מספר חוקי. |
ui.step | number | 1, או מחושב מ-ticks אם הוגדר |
השינוי המינימלי האפשרי כאשר גוררים את האגודל. |
ui.ticks | number | אוטומטי | מספר המקקים (מיקומים קבועים בסרגל הטווח) שהאגודל יכול לתפוס. |
ui.unitIncrement | number | 1 | הסכום שיש להגדיל בו-זמנית ביחידות של היקפי טווח. אפשר להגדיל את היחידה באופן שווה באמצעות מקשי החיצים כדי להזיז את האגודל. |
ui.blockIncrement | number | 10 | הסכום שיש להוסיף למרווחי חסימה של היקפי הטווח. אפשר להוסיף בלוק חסימה מקביל לשימוש בלחצנים pgUp ו-pgDown כדי להעביר את האגודל לפס ההזזה. |
ui.showRangeValues | boolean | נכון | בחירה אם אפשר להציג תוויות לצד פס ההזזה שמציג את ההיקפים של הטווח שנבחר. |
ui.orientation | string | 'אופקי' | כיוון פס ההזזה. 'horizontal' או 'vertical' . |
ui.label | string | אוטומטי | התווית שתוצג ליד פס ההזזה. אם לא בחרת תווית, המערכת תשתמש בתווית של העמודה שעליה הפקד פועל. |
ui.labelמפריד | string | ללא | נוספת תווית מפרידה לתווית, כדי להפריד בין התווית לפס ההזזה. |
ui.labelStacking | string | 'אופקי' |
האם התווית צריכה להופיע מעל (ערימה אנכית) או לצד המחוון (בערימה אופקית). יש להשתמש ב-'vertical' או ב-'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-rangefilter' | מחלקת ה-CSS שאותה מקצים לפקד, לעיצוב מותאם אישית. |
StringFilter
שדה פשוט להזנת טקסט שמאפשר לכם לסנן נתונים באמצעות התאמת מחרוזות. היא מתעדכנת אחרי כל הקשה על מקש: כדאי לנסות להקליד j
כדי לצמצם את הטבלה לג'ון וג'סיקה.
מדינה
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
value | מחרוזת או אובייקט | ללא | הטקסט שהוזן כרגע בשדה להזנת הפקד. |
אפשרויות
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
FilterColumnIndex | number | ללא |
העמודה בטבלת הנתונים שעליה המסנן צריך לפעול. חובה לספק אפשרות זו או filterColumnLabel . אם יש שני סוגים, האפשרות הזו מקבלת עדיפות.
|
תווית של עמודה | string | ללא |
התווית של העמודה שהמסנן צריך לפעול לפיה. חובה לספק אפשרות זו או filterColumnIndex . אם יש שני סוגים,
הפרמטר filterColumnIndex מקבל עדיפות.
|
סוג התאמה | string | 'קידומת' |
האם הפקד צריך להתאים לערכים המדויקים בלבד ('exact' ), קידומות שמתחילות מתחילת הערך ('prefix' ) או כל מחרוזת משנה ('any' ).
|
תלוי אותיות רישיות | boolean | לא נכון | ההתאמה צריכה להיות תלוית אותיות רישיות (או לא). |
useFormattedValue | boolean | לא נכון | האם הפקד צריך להיות תואם לערכים מעוצבים בתא או לשייך שוב את הערכים בפועל. |
ממשק משתמש | התנגדות | null |
אובייקט עם חברים להגדרת היבטים שונים בממשק המשתמש של הפקד.
כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן:
{label: 'Name', labelSeparator: ':'} |
ui.RealtimeTrigger | boolean | נכון | האם הפקד צריך להתאים בכל פעם שלוחצים על מקש או רק כאשר שדה הקלט 'משתנה' (הפסד המיקוד או הקשה על מקש Enter). |
ui.label | string | אוטומטי | התווית שתוצג ליד שדה הקלט. אם לא בחרת תווית, המערכת תשתמש בתווית של העמודה שעליה הפקד פועל. |
ui.labelמפריד | string | ללא | מחרוזת מפרידה מצורפת לתווית, כדי להפריד בין התווית מבחינה חזותית לבין שדה הקלט. |
ui.labelStacking | string | 'אופקי' |
בחירה אם התווית תוצג מעל (ערימה אנכית) או לצד שדה הקלט (ערימה אופקית). יש להשתמש ב-'vertical' או ב-'horizontal' .
|
ui.cssClass | string | 'google-visualization-controls-stringfilter' | מחלקת ה-CSS שאותה מקצים לפקד, לעיצוב מותאם אישית. |