דף זה תורגם על ידי Cloud Translation API.

פקדים ולוחות בקרה

בדף הזה נסביר איך לשלב מספר תרשימים במרכזי בקרה, ולתת למשתמשים אמצעי בקרה כדי להשפיע על הנתונים שהם מציגים.

סקירה כללית

מרכזי בקרה הם דרך פשוטה לארגן ולנהל יחד כמה תרשימים שחולקים את אותם נתונים בסיסיים. השימוש בממשקי ה-API שמתוארים בדף הזה מאפשר לכם להשתחרר מהעומס של החיווט ביחד ובתיאום כל התרשימים שכלולים במרכז הבקרה.

מרכזי בקרה מוגדרים באמצעות מחלקות google.visualization.Dashboard. המכונות של Dashboard מקבלות DataTable שמכיל את הנתונים כדי להציג בצורה חזותית ולטפל בשרטוט ובהפצה של הנתונים לכל התרשימים שכלולים במרכז הבקרה.

אמצעי בקרה הם ווידג'טים של ממשק המשתמש (כמו בוחרי קטגוריות, פסי ההזזה של טווח, השלמה אוטומטית...) שיוצרים איתם אינטראקציה כדי לנהל את הנתונים שמנוהלים על ידי מרכז הבקרה והתרשימים שהם חלק ממנו.

אמצעי הבקרה מוגדרים באמצעות מחלקות google.visualization.ControlWrapper. אפשר להוסיף מכונות ControlWrapper ללוח הבקרה, שם הן פועלות כמו צינורות ושסתומים במערכת אינסטלציה. הם אוספים משוב ממשתמשים ומשתמשים במידע כדי להחליט אילו מהנתונים שמנוהלים על ידי מרכז הבקרה צריכים להיות זמינים לתרשימים שנכללים בהם.

נבחן את הדוגמה הבאה, שבה בורר קטגוריות ופס הזזה טווח משמשים להצגת הנתונים שמוצגים בתרשים עוגה.

הערה: מרכז הבקרה הוא אינטראקטיבי. אפשר להפעיל את הפקדים ולראות את השינוי בתרשים בזמן אמת.

שימוש באמצעי בקרה ובלוחות בקרה

אלה השלבים העיקריים ליצירת מרכז בקרה ולהטמעה שלו בדף. בהמשך יופיע קטע קוד שמדגים את כל השלבים האלה, ואחריו מידע מפורט לגבי כל שלב.

יוצרים שלד HTML למרכז הבקרה. הדף צריך לכלול את מספר רכיבי ה-HTML הדרוש כדי להכיל כל חבר במרכז בקרה. זה כולל את מרכז הבקרה עצמו ואת כל אמצעי הבקרה והתרשימים שכלולים בו. בדרך כלל צריך להשתמש ב-<div> לכל אחד מהם.
טוענים את הספריות. כדי להשתמש במרכז בקרה צריך לכלול בדף רק שתי ספריות: ממשק Google AJAX API וחבילת controls הוויזואליזציה של Google.
מכינים את הנתונים. צריך להכין את הנתונים להצגה חזותית. כלומר, מציינים את הנתונים בעצמכם בקוד או שולחים שאילתה לאתר מרוחק כדי לקבל נתונים.
יצירת מופע של מרכז בקרה. יצירת אובייקט של מרכז השליטה על ידי קריאה ל-constructor שלו והעברת ההפניה אל הרכיב <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. טעינת הספריות

כדי שמרכז בקרה צריך לכלול רק שתי ספריות, צריך לכלול בדף או לטעון אותן: ממשק Google AJAX API וחבילת Google Graphics controls. ה-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. הכנת הנתונים

לאחר טעינת ה-Visual API, google.charts.setOnLoadCallback() יקרא לפונקציית ה-handler, כדי שתדעו שכל השיטות והמחלקות העזרה הנדרשות יהיו מוכנות להתחיל בהכנת הנתונים שלכם.

מרכזי בקרה מקבלים נתונים ב-DataTable, בדיוק כמו תרשימים.

4. יצירת מופע של מרכז בקרה

אחרי יצירת הנתונים, תוכלו ליצור אובייקט במרכז הבקרה. constructor של לוח בקרה משתמש בפרמטר אחד: הפניה לרכיב ה-DOM שבו צריך לשרטט את לוח הבקרה.

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

מרכזי בקרה נחשפים כמחלקה של JavaScript. אחרי שיוצרים את מרכז הבקרה, אפשר לבצע כמה פעולות אופציונליות כמו הוספת פונקציות event 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);

ניתן לקשר פקדים ותרשימים בתצורות שונות ורבות: אחד לאחד, אחד לרבים, רבים לאחד ורבים. בכל פעם שכמה פקדים מקשרים לתרשים, מרכז הבקרה מעדכן את התרשים כך שיתאים למגבלות המשולבות שנאכפות על ידי כל הפקדים הקשורים. בו-זמנית, אמצעי בקרה יכול להציג כמה תרשימים בו-זמנית. כדי לציין כמה קישורים בו-זמנית, צריך להעביר מערכים ל-method 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. צייר את מרכז השליטה שלך

קוראים ל-method draw() במופע של מרכז הבקרה כדי לעבד את כל מרכז הבקרה. ה-method draw() מקבלת רק פרמטר אחד: DataTable (או DataView) שמפעיל את מרכז הבקרה.

צריך לקרוא לפונקציה draw() בכל פעם שמשנים את ההרכב של מרכז הבקרה (למשל, מוסיפים לו אמצעי בקרה או תרשימים חדשים) או כשמשנים את ה-DataTable הכולל שמפעילים אותו.

המופע של מרכז הבקרה מפעיל אירוע ready בכל פעם ש-draw() מסתיים, והם מכווננים את כל אמצעי הבקרה והתרשימים שכלולים בו. אירוע error מופעל אם אחד מהפקדים או התרשים המנוהלים נכשל. למידע נוסף על טיפול באירועים, ראו טיפול באירועים.

הערה: כדאי להאזין לאירוע ready לפני שמנסים לשנות את הרכב בלוח הבקרה או לצייר אותו שוב.

8. שינויים פרוגרמטיים אחרי השרטוט

לאחר שלוח הבקרה יסיים את draw() הראשוני, הוא יהיה פעיל ויגיב אוטומטית לכל פעולה שתבצעו בו (כמו שינוי הטווח שנבחר של פס הזזה שנמצא במרכז הבקרה).

אם צריך לשנות באופן פרוגרמטי את המצב של מרכז הבקרה, אפשר לעשות זאת ישירות על ידי הפעלה ישירות במכונות ControlWrapper ו-ChartWrapper שהן חלק ממנו. כלל האצבע הוא לבצע כל שינוי שצריך ישירות במכונה הספציפית ControlWrapper (או ChartWrapper): לדוגמה, משנים את האפשרות או המצב של הבקרה דרך setOption() ו-setState() בהתאמה, וקוראים ל-method draw() לאחר מכן. לאחר מכן מרכז הבקרה יתעדכן בהתאם לשינויים המבוקשים.

הדוגמה הבאה מציגה מקרה כזה.

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();
        };
      }

דף האינטרנט המלא

<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

בקטע הזה מפורטים האובייקטים שנחשפים על ידי Controls and Dashboards API והשיטות הסטנדרטיות שחשופות כל אמצעי הבקרה.

מרכז הבקרה

מייצג אוסף של אמצעי בקרה ותרשימים שמשתפים את אותם נתוני בסיס.

יצרן

Dashboard(containerRef)

containerRef
: הפניה לרכיב קונטיינר חוקי בדף שיכיל את התוכן של מרכז הבקרה.

שיטות

במרכז הבקרה מוצגות השיטות הבאות:

שיטה סוג הערך המוחזר תיאור

שיטה	סוג הערך המוחזר	תיאור
`bind(controls, charts)`	google.visualization.Dashboard	קישור אמצעי בקרה אחד או יותר למשתתפים אחרים במרכז הבקרה (תרשימים או אמצעי בקרה אחרים), כך שכל אמצעי הבקרה מוצגים מחדש בכל פעם שאמצעי הבקרה הראשון אוסף אינטראקציה פרוגרמטית או אינטראקציה של משתמש שמשפיעה על הנתונים שמנוהלים על ידי מרכז הבקרה. הפונקציה מחזירה את המופע עצמו של מרכז הבקרה כדי ליצור שרשור של מספר קריאות `bind()` יחד. controls – מכונה בודדת או מערך של `google.visualization.ControlWrapper` מכונות המגדירות את הפקדים לקישור. charts – מכונה אחת או מערך של `google.visualization.ChartWrapper` מכונות המגדירים את התרשימים שהפקדים יובילו אליהם.
`draw(dataTable)`	אין	מצייר את מרכז השליטה. dataTable – כל אחד מהתנאים הבאים: אובייקט `DataTable`; אובייקט `DataView`; ייצוג JSON של DataTable או מערך שתואם לתחביר של google.visualization.arrayToDataTable() .
`getSelection()`	מערך של אובייקטים	הפונקציה מחזירה מערך של הישויות החזותיות שנבחרו של התרשימים במרכז הבקרה. כשמתבצעת קריאה בלוח הבקרה באמצעות ה-method `getSelection()`, היא מחזירה צבירה של כל האפשרויות שנבחרו בכל התרשימים שכלולים בה. כך אפשר להשתמש בהפניה אחת כשעובדים עם בחירת תרשימים. הערה: עדיין צריך לצרף Event listener לאירוע שנבחר לכל תרשים שאליו רוצים להאזין. תיאור מורחב

bind(controls, charts)

google.visualization.Dashboard

קישור אמצעי בקרה אחד או יותר למשתתפים אחרים במרכז הבקרה (תרשימים או אמצעי בקרה אחרים), כך שכל אמצעי הבקרה מוצגים מחדש בכל פעם שאמצעי הבקרה הראשון אוסף אינטראקציה פרוגרמטית או אינטראקציה של משתמש שמשפיעה על הנתונים שמנוהלים על ידי מרכז הבקרה. הפונקציה מחזירה את המופע עצמו של מרכז הבקרה כדי ליצור שרשור של מספר קריאות bind() יחד.

controls – מכונה בודדת או מערך של google.visualization.ControlWrapper מכונות המגדירות את הפקדים לקישור.
charts – מכונה אחת או מערך של google.visualization.ChartWrapper מכונות המגדירים את התרשימים שהפקדים יובילו אליהם.

draw(dataTable)

אין

מצייר את מרכז השליטה.

dataTable – כל אחד מהתנאים הבאים: אובייקט DataTable; אובייקט DataView; ייצוג JSON של DataTable או מערך שתואם לתחביר של google.visualization.arrayToDataTable() .

getSelection()

מערך של אובייקטים

הפונקציה מחזירה מערך של הישויות החזותיות שנבחרו של התרשימים במרכז הבקרה. כשמתבצעת קריאה בלוח הבקרה באמצעות ה-method getSelection(), היא מחזירה צבירה של כל האפשרויות שנבחרו בכל התרשימים שכלולים בה. כך אפשר להשתמש בהפניה אחת כשעובדים עם בחירת תרשימים.

הערה: עדיין צריך לצרף Event listener לאירוע שנבחר לכל תרשים שאליו רוצים להאזין.

תיאור מורחב

אירועים

האובייקט Dashboard יזרק את האירועים הבאים. לתשומת ליבך, עליך להתקשר אל Dashboard.draw() לפני שאירועים מוצגים.

שם תיאור תכונות

error מופעל כשמתרחשת שגיאה בניסיון לעבד את לוח הבקרה. יכול להיות שהרינדור של אחד או יותר מהפקדים או מהתרשימים שמופיעים במרכז הבקרה נכשל. מזהה, הודעה

שם	תיאור	תכונות
`error`	מופעל כשמתרחשת שגיאה בניסיון לעבד את לוח הבקרה. יכול להיות שהרינדור של אחד או יותר מהפקדים או מהתרשימים שמופיעים במרכז הבקרה נכשל.	מזהה, הודעה
`ready`	השרטוט של מרכז הבקרה הסתיים והוא מוכן לקבלת שינויים. כל אמצעי הבקרה והתרשימים שנכללים במרכז הבקרה מוכנים לקריאה של שיטה חיצונית ולאינטראקציה של המשתמשים. כדי לשנות את מרכז הבקרה (או את הנתונים שהוא מציג) אחרי שציירת אותו, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את השיטה `draw`, ואז להחיל את השינויים רק אחרי שהאירוע הופעל. גם האירוע `ready` יופעל: אחרי השלמת רענון של מרכז הבקרה שהופעל על ידי משתמש או אינטראקציה פרוגרמטית עם אחד מאמצעי הבקרה, אחרי קריאה פרוגרמטית ל-method `draw()` של כל חלק בתרשים של מרכז הבקרה.	אין

ready

השרטוט של מרכז הבקרה הסתיים והוא מוכן לקבלת שינויים. כל אמצעי הבקרה והתרשימים שנכללים במרכז הבקרה מוכנים לקריאה של שיטה חיצונית ולאינטראקציה של המשתמשים. כדי לשנות את מרכז הבקרה (או את הנתונים שהוא מציג) אחרי שציירת אותו, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את השיטה draw, ואז להחיל את השינויים רק אחרי שהאירוע הופעל.

גם האירוע ready יופעל:

אחרי השלמת רענון של מרכז הבקרה שהופעל על ידי משתמש או אינטראקציה פרוגרמטית עם אחד מאמצעי הבקרה,
אחרי קריאה פרוגרמטית ל-method draw() של כל חלק בתרשים של מרכז הבקרה.

אין

ControlWrapper

אובייקט ControlWrapper הוא wrapper לייצוג JSON של מכונה של בקרה שהוגדרה. הכיתה חושפת שיטות נוחות להגדרת פקד בלוח הבקרה, לשרטט אותו ולשנות את המצב שלו באופן פרוגרמטי.

יצרן

ControlWrapper(opt_spec)

opt_spec: [אופציונלי] - אובייקט JSON שמגדיר את הבקרה, או גרסת מחרוזת טורית של האובייקט. המאפיינים הנתמכים של אובייקט ה-JSON מוצגים בטבלה הבאה. אם לא מציינים זאת, צריך להגדיר את כל המאפיינים המתאימים באמצעות methods של set... שחשופות על ידי ControlWrapper.

מאפיין (property)	סוג	חובה	ברירת המחדל	תיאור
controlType	מחרוזת	חובה	אין	שם הסיווג של אמצעי הבקרה. אפשר להשמיט את שם החבילה `google.visualization` באמצעי הבקרה של Google. דוגמאות: `CategoryFilter`, `NumberRangeFilter`.
containerId	מחרוזת	חובה	אין	המזהה של רכיב ה-DOM בדף שלכם שיארח את הבקרה.
אפשרויות	אובייקט	אופציונלי	אין	אובייקט שמתאר את האפשרויות לאמצעי הבקרה. אפשר להשתמש בסימון מילולי של JavaScript או לספק כינוי לאובייקט. לדוגמה: `"options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}`
state	אובייקט	אופציונלי	אין	אובייקט שמתאר את מצב אמצעי הבקרה. המצב אוסף את כל המשתנים שעליו יכול להשפיע המשתמש שמפעיל את אמצעי הבקרה. לדוגמה, ניתן לתאר מצב של מחוון טווח מבחינת המיקומים שבהם תופסים האגודל הנמוך והגבוה של פס ההזזה. אפשר להשתמש בייצוג מילולי של JavaScript או לספק כינוי לאובייקט.לדוגמה: `"state": {"lowValue": 20, "highValue": 50}`

שיטות

ControlWrapper חושף את השיטות הנוספות הבאות:

שיטה	סוג הערך המוחזר	תיאור
`draw()`	אין	מצייר את הפקד. בדרך כלל, מרכז השליטה שמחזיק את הפקד מטפל בו. צריך לקרוא ל-`draw()` כדי לאלץ ניסיונות חוזרים של הבקרה באופן פרוגרמטי אחרי שינוי של הגדרות אחרות, כמו אפשרויות או מצב.
`toJSON()`	מחרוזת	מחזירה גרסת מחרוזת של ייצוג JSON של הבקרה.
`clone()`	ControlWrapper	מחזירה עותק עמוק של ה-wrapper של הפקד.
`getControlType()`	מחרוזת	שם הסיווג של אמצעי הבקרה. אם מדובר באמצעי בקרה של Google, השם לא יאושר עבור `google.visualization`. לדוגמה, אם היה זה פקד CategoryFilter, הוא היה מחזיר "CategoryFilter" ולא "google.Visualization.CategoryFilter".
`getControlName()`	מחרוזת	הפונקציה מחזירה את שם הבקרה שהוקצה על ידי `setControlName()`.
`getControl()`	שליטה בהפניה לאובייקטים	מחזירה הפניה לפקד שנוצר על ידי ControlWrapper. הפעולה הזו תחזיר את הערך null עד לאחר קריאה ל-`draw()` באובייקט ControlWrapper (או במרכז הבקרה שמחזיקים אותו), והוא יקפיץ אירוע מוכן. האובייקט שמוחזר חושף רק method אחת: `resetControl()`, שמאפסת את מצב הבקרה לזה שבו הוא אותחל (למשל, איפוס של רכיב טופס HTML).
`getContainerId()`	מחרוזת	המזהה של רכיב הקונטיינר DOM של הבקרה.
`getOption(key, opt_default_val)`	כל סוג	פונקציה זו מחזירה את ערך אפשרות הבקרה שצוין key – השם של אפשרות האחזור. יכול להיות שם שעומד בדרישות, כמו `'vAxis.title'`. opt_default_value [Optional] - אם הערך שצוין לא מוגדר או אפס, הערך יוחזר.
`getOptions()`	אובייקט	מחזירה את אובייקט האפשרויות של הפקד הזה.
`getState()`	אובייקט	מחזירה את מצב הבקרה.
`setControlType(type)`	אין	מגדיר את סוג אמצעי הבקרה. מעבירים את שם המחלקה של הפקד כדי ליצור אובייקט. אם מדובר באמצעי בקרה של Google, אין לך אפשרות להשתמש באמצעי הבקרה הזה ב-`google.visualization`. לדוגמה, אם משתמשים בפס הזזה מעל עמודה מספרית, מזינים את הערך 'NumberRangeFilter'.
`setControlName(name)`	אין	מגדיר שם שרירותי לפקד. המידע הזה לא מוצג בשום מקום בפקדים, אבל הוא לשימושך בלבד.
`setContainerId(id)`	אין	מגדיר את המזהה של רכיב ה-DOM שמכיל את הפקד.
`setOption(key, value)`	אין	מגדיר ערך אחד של אפשרות בקרה, כאשר key הוא שם האפשרות ו-value הוא הערך. כדי לבטל את ההגדרה של אפשרות, צריך להעביר את הערך כ-null. שימו לב ש-key יכול להיות שם תקין, כמו `'vAxis.title'`.
`setOptions(options_obj)`	אין	מגדירה אובייקט אפשרויות מלא לפקד.
`setState(state_obj)`	אין	מגדיר את מצב הבקרה. המצב אוסף את כל המשתנים שיכולים להשפיע על המשתמש שמפעיל את אמצעי הבקרה. לדוגמה, ניתן לתאר מצב של מחוון טווח מבחינת המיקומים שבהם תופסים האגודל הנמוך והגבוה של פס ההזזה.

אירועים

האובייקט ControlWrapper זורק את האירועים הבאים. לתשומת ליבך, עליך להפעיל את ControlWrapper.draw() (או לצייר את לוח הבקרה שמחזיק בפקד הבקרה) לפני שאירועים יושלמו.

שם	תיאור	תכונות
`error`	מופעל כשמתרחשת שגיאה בניסיון לעבד את הרכיב האינטראקטיבי.	מזהה, הודעה
`ready`	אמצעי הבקרה מוכן לקבלת אינטראקציות של משתמשים ולשליחת קריאות לשיטה חיצונית. אם רוצים להשתמש באמצעי הבקרה ובשיטות הקריאה אחרי שציירתם אותו, צריך להגדיר האזנה לאירוע הזה לפני קוראים ל-method `draw`, ולקרוא לו רק אחרי שהאירוע הופעל. לחלופין, אפשר להאזין לאירוע `ready` במרכז הבקרה שכולל את שיטות הבקרה והבקרה רק אחרי שהאירוע הופעל.	אין
`statechange`	מופעל כשהמשתמש מקיים אינטראקציה עם אמצעי הבקרה, ומשפיע על המצב שלו. לדוגמה, אירוע `statechange` יופעל בכל פעם שמזיזים את המקשים של מחוון הטווח. כדי לאחזר מצב בקרה מעודכן אחרי הפעלת האירוע, צריך לבצע קריאה אל `ControlWrapper.getState()`.	אין

ChartWrapper

אפשר לעיין במסמכי העזרה בנושא google.visualization.ChartWrapper בסעיף העזרה ל-API של הרכיבים החזותיים.

ההערות הבאות רלוונטיות כשמשתמשים ב-ChartWrapper כחלק ממרכז בקרה:

אל תגדירו את המאפיינים dataTable, query, dataSourceUrl ו-refreshInterval באופן מפורש. בלוח הבקרה שבו מופיע התרשים מזינים את הנתונים שדרושים לו.
צריך להגדיר את המאפיין view כך שיציין אילו עמודות (מתוך כל העמודות שמופיעות ב-dataTable) שזמינות ללוח הבקרה רלוונטיות לתרשים, כפי שמוצג ב-Create Control and Chart Instances.

גלריית אמצעי הבקרה

מסננים הם אלמנטים גרפיים שבעזרתם אפשר לבחור באופן אינטראקטיבי אילו נתונים יוצגו בתרשים. בקטע הזה מתוארים המסננים של Google Chart: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter ו-StringFilter.

אפשר להשתמש בכל אחת מהן כפרמטר בשביל ControlWrapper.setControlType().

הערה: בתיאור אפשרויות, סימון הנקודות משמש לתיאור מאפיינים של אובייקטים בתצוגת עץ. לדוגמה: צריך להצהיר על אפשרות בשם 'ui.label' באובייקט אפשרויות בתור var options = {"ui": {"label": "someLabelValue"} };

בוחר לבחירת ערך אחד או יותר מתוך קבוצת ערכים מוגדרים.

ארץ

שם	סוג	ברירת המחדל	תיאור
selectedValues	מערך של אובייקטים או סוגים פרימיטיביים	אין	קבוצת הערכים שנבחרה. הערכים שנבחרו צריכים להיות קבוצה של הערכים הכוללים שניתן לבחור ומוגדרים על ידי האפשרות `values` (המערכת תתעלם מכל ערך מיותר). אם ה-`CategoryFilter` לא מאפשר בחירה מרובה, רק הערך הראשון של המערך יישמר.

אפשרויות

שם	סוג	ברירת המחדל	תיאור
filterColumnIndex	number	אין	העמודה של טבלת הנתונים שלפיה צריך המסנן לפעול. חובה לספק את האפשרות הזו או `filterColumnLabel`. אם שתי האפשרויות קיימות, האפשרות הזו מקבלת עדיפות.
filterColumnLabel	string	אין	התווית של העמודה שלפיה המסנן צריך לפעול. חובה לספק את האפשרות הזו או `filterColumnIndex`. אם שניהם קיימים, הערך `filterColumnIndex` מקבל עדיפות.
ערכים	Array	אוטומטי	רשימת ערכים לבחירה. אם נעשה שימוש במערך של אובייקטים, צריך להיות להם ייצוג `toString()` מתאים להצגה למשתמש. אם הערך הוא null או לא מוגדר, רשימת הערכים תחושב באופן אוטומטי מהערכים שמופיעים בעמודה DataTable שעליה אמצעי הבקרה הזה פועל.
useFormattedValue	boolean	false	כשמאכלסים את רשימת הערכים שניתן לבחור באופן אוטומטי מהעמודה DataTable המסנן הזה פועל, אם להשתמש בערכי התאים בפועל או בערכים בפורמט שלהם.
ui	אובייקט	null	אובייקט עם חברים להגדיר היבטים שונים בממשק המשתמש של הבקרה. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: {label: 'Metric', labelSeparator: ':'}
ui.caption	string	'בחר ערך...'	הכיתוב להצגה בתוך הווידג'ט של בוחר הערכים כשלא נבחר פריט.
ui.sortValues	boolean	true	האם צריך למיין את הערכים לבחירה.
ui.selectedValuesLayout	string	'בצד'	איך להציג את הערכים שנבחרו, במקרים שבהם אפשר לבחור יותר מערך אחד. הערכים האפשריים הם: `'aside'`: הערכים שנבחרו יוצגו בשורת טקסט יחידה לצד הווידג'ט של בוחר הערכים, `'below'`: הערכים שנבחרו יוצגו בשורת טקסט אחת מתחת לווידג'ט, `'belowWrapping'`: דומה ל-`below`, אבל ערכים שלא יכולים להתאים לבורר יגלשו לשורה חדשה, `'belowStacked'`: הערכים שנבחרו יוצגו בעמודה מתחת לווידג'ט.
ui.allowNone	boolean	true	האם המשתמש לא מורשה לבחור ערך כלשהו. אם הערך `false`, המשתמש צריך לבחור לפחות ערך אחד מהערכים הזמינים. במהלך אתחול הבקרה, אם האפשרות מוגדרת ל-`false` ולא ניתן מצב `selectedValues`, הערך הראשון של הערכים הזמינים מוסר באופן אוטומטי.
ui.allowMultiple	boolean	true	האם ניתן לבחור כמה ערכים במקום אחד בלבד.
ui.allowTyping	boolean	true	האם המשתמש יכול להקליד בשדה טקסט כדי לצמצם את רשימת האפשרויות האפשריות (באמצעות השלמה אוטומטית) או לא.
ui.label	string	אוטומטי	התווית שתוצג לצד בורר הקטגוריות. אם לא צויין ערך, ייעשה שימוש בתווית של העמודה שעליה הבקרה פועלת.
ui.labelSeparator	string	אין	מחרוזת מפרידה מצורפת לתווית, כדי להפריד באופן חזותי את התווית מבורר הקטגוריות.
ui.labelStacking	string	'אופקי'	אם התווית צריכה להופיע מעל בורר הקטגוריות (סידור אנכי בערימה) או לצד (סידור בערימה אופקית). אפשר להשתמש ב-`'vertical'` או ב-`'horizontal'`.
ui.cssClass	string	'google-visualization-controls-categoryfilter'	מחלקת ה-CSS שצריך להקצות לבקרה, לעיצוב בהתאמה אישית.

ChartRangeFilter

פס הזזה עם שתי אגודלים מעל לתרשים, שמאפשר לבחור טווח ערכים מהציר הרציף של התרשים.

ארץ

שם	סוג	ברירת המחדל	תיאור
range.start	מספר, תאריך, תאריך ושעה או שעה ביום	ערך התחלת הטווח	ההתחלה של הטווח שנבחר, כולל.
range.end	מספר, תאריך, תאריך ושעה או שעה ביום	ערך סיום הטווח	סוף הטווח שנבחר, כולל.

אפשרויות

שם	סוג	ברירת המחדל	תיאור
filterColumnIndex	number	אין	האינדקס של העמודה בטבלת הנתונים שעליו פועל המסנן. חובה לספק את האפשרות הזו או `filterColumnLabel`. אם שתיהן קיימות, האפשרות הזו מקבלת עדיפות. שימו לב שהגיוני לציין רק אינדקס של עמודת דומיין הכלולה בציר הרציף של התרשים המצויר בתוך הפקד.
filterColumnLabel	string	אין	התווית של העמודה של טבלת הנתונים שעליה המסנן פועל. חובה לספק את האפשרות הזו או את `filterColumnIndex`. אם שניהם קיימים, `filterColumnIndex` מקבל עדיפות. שימו לב שהגיוני לציין רק תווית של עמודת domain הכלולה בציר הרציף של התרשים המצויר בתוך הפקד.
ui	אובייקט	null	אובייקט עם חברים להגדיר היבטים שונים בממשק המשתמש של הבקרה. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: {chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType	string	'ComboChart'	סוג התרשים שמוצג בתוך הפקד. יכול להיות אחת מהאפשרויות הבאות: 'AreaChart', 'LineChart', 'ComboChart' או 'ScatterChart'.
ui.chartOptions	אובייקט	{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } }	אפשרויות ההגדרה של התרשים בתוך הפקד. מאפשרת את אותה רמת תצורה כמו כל תרשים בלוח הבקרה, ופועלת באותו פורמט המקובל ב-ChartWrapper.setOptions(). אפשר לציין אפשרויות נוספות או לשנות את אפשרויות ברירת המחדל (עם זאת, שימו לב שברירות המחדל נבחרו בקפידה כדי להשיג מראה אופטימלי).
ui.chartView	אובייקט או מחרוזת (אובייקט סידורי)	null	מפרט התצוגה שתחול על טבלת הנתונים שמשמשת לשרטוט התרשים בתוך הפקד. מאפשרת את אותה רמת הגדרה כמו כל תרשים במרכז הבקרה, ופועלת בהתאם לפורמט המקובל ב-ChartWrapper.setView(). אם לא מציינים זאת, טבלת הנתונים עצמה משמשת לשרטוט התרשים. חשוב לשים לב שהציר האופקי של התרשים ששורטט חייב להיות רציף, לכן חשוב לציין את `ui.chartView` בהתאם.
ui.minRangeSize	number	ההפרש בערך הנתונים מפרש כפיקסל אחד	הגודל המינימלי של הטווח לבחירה (`range.end - range.start`), שצוין ביחידות של ערכי נתונים. בציר מספרי מדובר במספר (לא בהכרח מספר שלם). כשמדובר בציר של תאריך, של תאריך ושעה או של שעה ביום, זהו מספר שלם שמציין את ההבדל באלפיות השנייה.
ui.snapToData	boolean	false	אם הערך הוא True, האגודלים של הטווח מוצמדים לנקודות הנתונים הקרובות ביותר. במקרה הזה, נקודות הקצה של הטווח שמוחזרות על ידי `getState()` הן בהכרח ערכים בטבלת הנתונים.

אירועים

תוספות לאירועי ControlWrapper:

שם	תיאור	תכונות
`statechange`	כמו שמתועד לכל ControlWrapper, רק הוא מכיל מאפיין בוליאני נוסף, `inProgress`, שמציין אם המצב משתנה כרגע (גרירת אחד מהאגודלים או הטווח עצמו).	inProgress

DateRangeFilter

פס הזזה בעל ערכים כפולים לבחירת טווחי תאריכים.

נסו להזיז את פס ההזזה כדי לשנות את השורות שמוצגות בטבלה שלמטה.

ארץ

שם	סוג	ברירת המחדל	תיאור
lowValue	number	אין	המידה הנמוכה יותר של הטווח שנבחר, כולל.
highValue	number	אין	ההיקף הגבוה יותר של הטווח שנבחר, כולל.
lowThumbAtMinimum	boolean	אין	אם הסמן התחתון של פס ההזזה נעול בטווח המינימלי המותר. אם המדיניות מוגדרת, היא מבטלת את `lowValue`.
highThumbAtMaximum	boolean	אין	אם האגודל העליון של פס ההזזה נעול בטווח המקסימלי המותר. אם המדיניות מוגדרת, היא מבטלת את `highValue`.

אפשרויות

שם	סוג	ברירת המחדל	תיאור
filterColumnIndex	number	אין	העמודה של טבלת הנתונים שלפיה צריך המסנן לפעול. חובה לספק את האפשרות הזו או `filterColumnLabel`. אם שתי האפשרויות קיימות, האפשרות הזו מקבלת עדיפות. יש להפנות לעמודה מסוג `number`.
filterColumnLabel	string	אין	התווית של העמודה שלפיה המסנן צריך לפעול. חובה לספק את האפשרות הזו או `filterColumnIndex`. אם שניהם קיימים, הערך `filterColumnIndex` מקבל עדיפות. הפונקציה צריכה להפנות לעמודה עם הסוג `number`.
minValue	תאריך	אוטומטי	הערך המינימלי המותר לטווח ברמה נמוכה יותר. אם הוא לא מוגדר, המערכת תסיק את הערך מהתוכן של ה-DataTable שמנוהל על ידי הבקרה.
maxValue	תאריך	אוטומטי	הערך המקסימלי המותר לטווח ברמה גבוהה יותר. אם הוא לא מוגדר, המערכת תסיק את הערך מהתוכן של ה-DataTable שמנוהל על ידי הבקרה.
ui	אובייקט	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	true	הגדרה שקובעת אם להציג תוויות ליד פס ההזזה שמציג את המידות של הטווח שנבחר.
ui.orientation	string	'אופקי'	הכיוון של פס ההזזה. `'horizontal'` או `'vertical'`.
ui.label	string	אוטומטי	התווית שתוצג לצד פס ההזזה. אם לא צוין אחרת, ייעשה שימוש בתווית של העמודה שעליה הבקרה פועלת.
ui.labelSeparator	string	אין	מחרוזת מפרידה מצורפת לתווית, כדי להפריד באופן חזותי את התווית מהפס ההזזה.
ui.labelStacking	string	'אופקי'	אם התווית צריכה להופיע מעל פס ההזזה (אנכית) או לצדו (סידור בערימה אופקית). אפשר להשתמש ב-`'vertical'` או ב-`'horizontal'`.
ui.cssClass	string	'google-visualization-controls-rangefilter'	מחלקת ה-CSS שצריך להקצות לבקרה, לעיצוב בהתאמה אישית.

NumberRangeFilter

פס הזזה בעל ערך כפול לבחירת טווחים של ערכים מספריים.

ארץ

שם	סוג	ברירת המחדל	תיאור
lowValue	number	אין	המידה הנמוכה יותר של הטווח שנבחר, כולל.
highValue	number	אין	ההיקף הגבוה יותר של הטווח שנבחר, כולל.
lowThumbAtMinimum	boolean	אין	אם הסמן התחתון של פס ההזזה נעול בטווח המינימלי המותר. אם המדיניות מוגדרת, היא מבטלת את `lowValue`.
highThumbAtMaximum	boolean	אין	אם האגודל העליון של פס ההזזה נעול בטווח המקסימלי המותר. אם המדיניות מוגדרת, היא מבטלת את `highValue`.

אפשרויות

שם	סוג	ברירת המחדל	תיאור
filterColumnIndex	number	אין	העמודה של טבלת הנתונים שלפיה צריך המסנן לפעול. חובה לספק את האפשרות הזו או `filterColumnLabel`. אם שתי האפשרויות קיימות, האפשרות הזו מקבלת עדיפות. יש להפנות לעמודה מסוג `number`.
filterColumnLabel	string	אין	התווית של העמודה שלפיה המסנן צריך לפעול. חובה לספק את האפשרות הזו או `filterColumnIndex`. אם שניהם קיימים, הערך `filterColumnIndex` מקבל עדיפות. הפונקציה צריכה להפנות לעמודה עם הסוג `number`.
minValue	number	אוטומטי	הערך המינימלי המותר לטווח ברמה נמוכה יותר. אם הוא לא מוגדר, המערכת תסיק את הערך מהתוכן של ה-DataTable שמנוהל על ידי הבקרה.
maxValue	number	אוטומטי	הערך המקסימלי המותר לטווח ברמה גבוהה יותר. אם הוא לא מוגדר, המערכת תסיק את הערך מהתוכן של ה-DataTable שמנוהל על ידי הבקרה.
ui	אובייקט	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	true	הגדרה שקובעת אם להציג תוויות ליד פס ההזזה שמציג את המידות של הטווח שנבחר.
ui.orientation	string	'אופקי'	הכיוון של פס ההזזה. `'horizontal'` או `'vertical'`.
ui.label	string	אוטומטי	התווית שתוצג לצד פס ההזזה. אם לא צוין אחרת, ייעשה שימוש בתווית של העמודה שעליה הבקרה פועלת.
ui.labelSeparator	string	אין	מחרוזת מפרידה מצורפת לתווית, כדי להפריד באופן חזותי את התווית מהפס ההזזה.
ui.labelStacking	string	'אופקי'	אם התווית צריכה להופיע מעל פס ההזזה (אנכית) או לצדו (סידור בערימה אופקית). אפשר להשתמש ב-`'vertical'` או ב-`'horizontal'`.
ui.cssClass	string	'google-visualization-controls-rangefilter'	מחלקת ה-CSS שצריך להקצות לבקרה, לעיצוב בהתאמה אישית.

StringFilter

שדה פשוט להזנת טקסט, שמאפשר לכם לסנן נתונים באמצעות התאמת מחרוזות. היא מתעדכנת אחרי כל הקשה על מקש: אפשר לנסות להקליד j כדי לצמצם את הטבלה למטה, למילים יוני ודנה.

ארץ

שם	סוג	ברירת המחדל	תיאור
value	מחרוזת או אובייקט	אין	הטקסט שמוזן כרגע בשדה להזנת קלט הבקרה.

אפשרויות

שם	סוג	ברירת המחדל	תיאור
filterColumnIndex	number	אין	העמודה של טבלת הנתונים שלפיה צריך המסנן לפעול. חובה לספק את האפשרות הזו או `filterColumnLabel`. אם שתי האפשרויות קיימות, האפשרות הזו מקבלת עדיפות.
filterColumnLabel	string	אין	התווית של העמודה שלפיה המסנן צריך לפעול. חובה לספק את האפשרות הזו או `filterColumnIndex`. אם שניהם קיימים, הערך `filterColumnIndex` מקבל עדיפות.
matchType	string	'prefix'	ההגדרה קובעת אם הפקד צריך להתאים לערכים המדויקים בלבד (`'exact'`), קידומות שמתחילות מתחילת הערך (`'prefix'`) או מכל מחרוזת משנה (`'any'`).
caseSensitive	boolean	false	אם ההתאמה צריכה להיות תלוית אותיות רישיות או לא.
useFormattedValue	boolean	false	האם הפקד צריך להתאים לערכים בפורמט התא או לערכים בפועל.
ui	אובייקט	null	אובייקט עם חברים להגדיר היבטים שונים בממשק המשתמש של הבקרה. כדי לציין מאפיינים של האובייקט הזה, אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: {label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger	boolean	true	האם הפקד צריך להתאים בכל פעם שמקישים על מקש או רק כששדה הקלט 'שינויים' (אובדן מיקוד או הקשה על Enter).
ui.label	string	אוטומטי	התווית שתוצג לצד השדה להזנת קלט. אם לא צויין ערך, ייעשה שימוש בתווית של העמודה שעליה הבקרה פועלת.
ui.labelSeparator	string	אין	מחרוזת מפרידה מצורפת לתווית, כדי להפריד באופן חזותי את התווית מהשדה להזנת הקלט.
ui.labelStacking	string	'אופקי'	אם התווית צריכה להופיע מעל שדה הקלט או לצד (סידור בערימה אופקית). אפשר להשתמש ב-`'vertical'` או ב-`'horizontal'`.
ui.cssClass	string	'google-visualization-controls-stringfilter'	מחלקת ה-CSS שצריך להקצות לבקרה, לעיצוב בהתאמה אישית.