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

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

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

סקירה כללית

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

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

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

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

מרכז שליטה

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

יצרן

Dashboard(containerRef)

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

שיטות

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

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

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

bind(controls, charts)

google.visualization.Dashboard

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

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

draw(dataTable)

ללא

משרטט את לוח הבקרה.

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

getSelection()

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

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

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

תיאור מורחב

אירועים

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

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

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

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

ready

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

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

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

ללא

מעטפת גלישה

אובייקט 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()`	ללא	מצייר את הבקרה. בדרך כלל מרכז הבקרה שמכיל את הפקד מטפל בשרטוט שלו. עליך לקרוא ל-`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)`	כל סוג	החזרת הערך של אפשרות הבקרה שצוינה key – השם של האפשרות לאחזר. השם עשוי להיות מתאים, למשל `'vAxis.title'`. opt_default_value [אופציונלי] – אם הערך שצוין אינו מוגדר או מוגדר כ-null, הערך יוחזר.
`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	'לצד'	איך להציג את הערכים שנבחרו אם אפשר לבחור כמה אפשרויות. הערכים האפשריים הם: `'aside'`: הערכים שנבחרו יופיעו בשורת טקסט יחידה ליד הווידג'ט של בוחר הערכים, `'below'`: הערכים שנבחרו יופיעו בשורת טקסט אחת מתחת לווידג'ט, `'belowWrapping'`: בדומה לכתובת `below`, רשומות שלא מתאימות לבורר ייטענו לשורה חדשה, `'belowStacked'`: הערכים שנבחרו יופיעו בעמודה מתחת לווידג'ט.
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.chartView`.
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 שאותה מקצים לפקד, לעיצוב מותאם אישית.

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

סקירה כללית

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

1. יצירת שלד HTML עבור מרכז הבקרה

2. טעינת הספריות שלכם

3. מכינים את הנתונים

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

5. יצירת מכונות של בקרה ותרשים

6. הגדרת יחסי תלות

7. ציור של מרכז השליטה

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

הפניית API

מרכז שליטה

יצרן

שיטות

אירועים

מעטפת גלישה

יצרן

שיטות

אירועים

גלישת תרשים

גלריית הבקרה

סינון תוכן

מדינה

אפשרויות

FilterRangeFilter

מדינה

אפשרויות

אירועים

מסנן טווח תאריכים

מדינה

אפשרויות

מספר מסנן

מדינה

אפשרויות

StringFilter

מדינה

אפשרויות