หน้านี้ได้รับการแปลโดย Cloud Translation API

การควบคุมและหน้าแดชบอร์ด

ในหน้านี้ คุณจะเห็นวิธีรวมแผนภูมิหลายรายการลงในแดชบอร์ด และให้ผู้ใช้ควบคุมการจัดการข้อมูลที่จะแสดงได้

ภาพรวม

แดชบอร์ดเป็นวิธีง่ายๆ ในการจัดระเบียบและจัดการแผนภูมิหลายรายการที่แชร์ข้อมูลสำคัญเดียวกัน การใช้ API ที่อธิบายไว้ในหน้านี้ช่วยให้คุณไม่ต้องเสียเวลาไปกับการเดินสายไฟและประสานงานเกี่ยวกับแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของแดชบอร์ดได้

แดชบอร์ดกำหนดโดยใช้คลาส google.visualization.Dashboard อินสแตนซ์ Dashboard จะได้รับ DataTable ที่มีข้อมูลสำหรับแสดงภาพ รวมถึงจัดการเรื่องการวาดและกระจายข้อมูลไปยังแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของแดชบอร์ด

การควบคุมคือวิดเจ็ตอินเทอร์เฟซผู้ใช้ (เช่น เครื่องมือเลือกหมวดหมู่ แถบเลื่อนช่วง ตัวเติมข้อความอัตโนมัติ...) ที่คุณโต้ตอบด้วยเพื่อที่จะขับเคลื่อนข้อมูลที่แดชบอร์ดจัดการและแผนภูมิที่เป็นส่วนหนึ่งของตัวควบคุมนั้น

กำหนดการควบคุมโดยใช้คลาส google.visualization.ControlWrapper คุณเพิ่มอินสแตนซ์ ControlWrapper รายการลงในหน้าแดชบอร์ดได้ ซึ่งจะทำให้อินสแตนซ์ทำงานเหมือนท่อและวาล์วในระบบท่อ โดยจะรวบรวมข้อมูลจากผู้ใช้และใช้ข้อมูลในการตัดสินใจว่าควรจัดการข้อมูลใดในหน้าแดชบอร์ดบ้าง

ดูตัวอย่างต่อไปนี้ซึ่งมีการใช้เครื่องมือเลือกหมวดหมู่และแถบเลื่อนช่วงเพื่อขับเคลื่อนข้อมูลที่แสดงเป็นแผนภูมิวงกลม

หมายเหตุ: หน้าแดชบอร์ดเป็นแบบอินเทอร์แอกทีฟ ลองใช้ตัวควบคุมและดูการเปลี่ยนแปลงแผนภูมิแบบเรียลไทม์

การใช้การควบคุมและหน้าแดชบอร์ด

ขั้นตอนสำคัญในการสร้างแดชบอร์ดและฝังไว้ในหน้าเว็บของคุณมีดังนี้ คุณจะเห็นข้อมูลโค้ดที่แสดงขั้นตอนทั้งหมดนี้ด้านล่าง ตามด้วยข้อมูลโดยละเอียดเกี่ยวกับแต่ละขั้นตอน

สร้างโครงสร้าง HTML สำหรับแดชบอร์ด หน้าเว็บของคุณต้องมีองค์ประกอบ HTML ได้มากเท่าที่ต้องการเก็บสมาชิกทุกคนของแดชบอร์ดไว้ ซึ่งรวมถึงหน้าแดชบอร์ดเอง การควบคุม และแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ด แต่โดยทั่วไปคุณจะใช้ <div> สำหรับแต่ละรายการ
โหลดคลังของคุณ หน้าแดชบอร์ดกำหนดให้มีหรือโหลดไลบรารีเพียง 2 รายการในหน้าเว็บ ได้แก่ Google AJAX API และแพ็กเกจ Google Visualization controls
เตรียมข้อมูล คุณจะต้องเตรียมข้อมูลเพื่อแสดงภาพ ซึ่งหมายถึงการระบุข้อมูลด้วยตัวเองในโค้ด หรือการค้นหาข้อมูลจากเว็บไซต์ระยะไกล
สร้างอินสแตนซ์หน้าแดชบอร์ด สร้างตัวอย่างหน้าแดชบอร์ดโดยการเรียกใช้ตัวสร้างและส่งในการอ้างอิงไปยังองค์ประกอบ <div> ที่จะเก็บไว้
สร้างการควบคุมและอินสแตนซ์แผนภูมิได้มากเท่าที่ต้องการ สร้างอินสแตนซ์ google.visualization.ChartWrapper และ google.visualization.ControlWrapper เพื่ออธิบายแผนภูมิแต่ละรายการและควบคุมที่หน้าแดชบอร์ดจัดการ
สร้างทรัพยากร Dependency เรียกใช้ 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>) เพื่อเก็บทั้งแดชบอร์ดรวมถึงการควบคุมและแผนภูมิทั้งหมดของหน้าไว้ ขณะสร้างอินสแตนซ์หน้าแดชบอร์ด การควบคุม และ อินสแตนซ์แผนภูมิ คุณต้องส่งการอ้างอิงไปยังองค์ประกอบเหล่านั้น ดังนั้นให้กำหนดรหัสให้กับองค์ประกอบ 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. โหลดห้องสมุดของคุณ

หน้าแดชบอร์ดกำหนดให้มีหรือโหลดไลบรารีเพียง 2 รายการในหน้าเว็บ ได้แก่ Google AJAX API และแพ็กเกจ Google Visualization 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. เตรียมข้อมูล

เมื่อโหลด Visualization API แล้ว google.charts.setOnLoadCallback() จะเรียกใช้ฟังก์ชันของเครื่องจัดการเพื่อให้คุณทราบว่าเมธอดและคลาสตัวช่วยที่จำเป็นทั้งหมดจะพร้อมสำหรับคุณเพื่อเริ่มเตรียมข้อมูล

แดชบอร์ดจะยอมรับข้อมูลใน DataTable เช่นเดียวกับแผนภูมิ

4. สร้างอินสแตนซ์แดชบอร์ด

หลังจากสร้างข้อมูลแล้ว คุณจะสร้างอินสแตนซ์ของออบเจ็กต์แดชบอร์ดได้ เครื่องมือสร้างแดชบอร์ดใช้พารามิเตอร์ 1 รายการ นั่นคือการอ้างอิงองค์ประกอบ DOM ที่จะใช้วาดหน้าแดชบอร์ด

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

แดชบอร์ดจะแสดงเป็นคลาส JavaScript หลังจากสร้างอินสแตนซ์แดชบอร์ดแล้ว คุณอาจทำตามขั้นตอนที่ไม่บังคับ 2-3 ขั้นตอน เช่น การเพิ่ม 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 ที่ตัวควบคุมนี้ดำเนินการ (ในตัวอย่างด้านบน การควบคุมจะทำงานในคอลัมน์ชื่อ Donuts E)
ใช้ตัวเลือกการกำหนดค่า state ในตัวควบคุมเพื่อเริ่มต้นใช้งานด้วยสถานะ Explicit เมื่อมีการวาดเป็นครั้งแรก เช่น ใช้การตั้งค่านี้เพื่อแก้ไขตำแหน่งเริ่มต้นของนิ้วโป้งของตัวควบคุมแถบเลื่อนช่วง
```
  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}
  });

    
```
แผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดจะแชร์ DataTable ที่สำคัญเดียวกันกับที่คุณเตรียมไว้ในขั้นตอนเตรียมข้อมูลของคุณ อย่างไรก็ตาม แผนภูมิมักต้องมีการจัดเรียงคอลัมน์ที่เฉพาะเจาะจงเพื่อให้แสดงได้อย่างถูกต้อง เช่น แผนภูมิวงกลมต้องมีคอลัมน์สตริงสำหรับป้ายกำกับ ตามด้วยคอลัมน์ตัวเลขสำหรับค่า

ใช้ตัวเลือก 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() เพื่อบอกหน้าแดชบอร์ดเกี่ยวกับทรัพยากร Dependency ที่มีอยู่ระหว่างตัวควบคุมและแผนภูมิ

เมื่อการควบคุมและแผนภูมิเชื่อมโยงกัน หน้าแดชบอร์ดจะอัปเดตแผนภูมิให้ตรงกับข้อจำกัดที่การควบคุมบังคับใช้กับข้อมูล ในแดชบอร์ดตัวอย่างที่คุณกำลังสร้าง แถบเลื่อนช่วงและแผนภูมิวงกลมจะเชื่อมโยงกัน ดังนั้นเมื่อใดก็ตามที่คุณโต้ตอบกับหน้าแดชบอร์ดก่อนหน้า ระบบจะอัปเดตรายการนั้นเพื่อแสดงเฉพาะข้อมูลที่ตรงกับช่วงที่เลือก

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

คุณเชื่อมโยงการควบคุมและแผนภูมิได้ในหลายๆ การกำหนดค่า ได้แก่ แบบหนึ่งต่อหนึ่ง หนึ่งต่อหลาย หลายต่อหนึ่ง และหลายต่อหลาย เมื่อใดก็ตามที่เชื่อมโยงการควบคุมหลายรายการกับแผนภูมิ 1 รายการ หน้าแดชบอร์ดจะอัปเดตแผนภูมิให้ตรงกับข้อจำกัดแบบรวมซึ่งบังคับใช้โดยตัวควบคุมขอบเขตทั้งหมด ตัวควบคุมจะขับเคลื่อนแผนภูมิหลายรายการพร้อมกันได้ หากต้องการระบุการเชื่อมโยงหลายรายการพร้อมกัน ให้ส่งอาร์เรย์ไปยังเมธอด 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);

สำหรับการใช้งานขั้นสูง คุณยังเชื่อมโยงการควบคุมกับการควบคุมอื่นๆ เพื่อสร้างเชนของทรัพยากร Dependency ใน ได้ด้วย

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. วาดหน้าแดชบอร์ด

เรียกใช้เมธอด draw() ในอินสแตนซ์หน้าแดชบอร์ดเพื่อแสดงผลหน้าแดชบอร์ดทั้งหน้า เมธอด draw() ใช้พารามิเตอร์เพียง 1 รายการ คือ 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	เชื่อมโยงการควบคุมอย่างน้อย 1 รายการกับผู้เข้าร่วมหน้าแดชบอร์ดคนอื่นๆ อย่างน้อย 1 คน (แผนภูมิหรือการควบคุมอื่นๆ) เพื่อให้ระบบแสดงรายการควบคุมทั้งหมดใหม่เมื่อใดก็ตามที่มีการรวบรวมการโต้ตอบแบบเป็นโปรแกรมหรือการโต้ตอบของผู้ใช้ซึ่งส่งผลต่อข้อมูลที่หน้าแดชบอร์ดจัดการ แสดงผลอินสแตนซ์ของหน้าแดชบอร์ดสำหรับการเชื่อมโยงการเรียกใช้ `bind()` หลายรายการเข้าด้วยกัน controls - อินสแตนซ์เดี่ยวหรืออาร์เรย์ของ `google.visualization.ControlWrapper` ที่กําหนดการควบคุมที่จะเชื่อมโยง แผนภูมิ - อินสแตนซ์เดี่ยวหรืออาร์เรย์ของ `google.visualization.ChartWrapper` ที่กำหนดแผนภูมิซึ่งจะใช้ตัวควบคุม
`draw(dataTable)`	ไม่มี	วาดหน้าแดชบอร์ด dataTable - ค่าใดค่าหนึ่งต่อไปนี้ ได้แก่ ออบเจ็กต์ `DataTable`, ออบเจ็กต์ `DataView`, การแสดง JSON ของ DataTable หรืออาร์เรย์ที่อยู่หลังไวยากรณ์ของ google.visualization.arrayToDataTable()
`getSelection()`	อาร์เรย์ของวัตถุ	แสดงผลอาร์เรย์ของเอนทิตีภาพที่เลือกของแผนภูมิในแดชบอร์ด เมื่อเรียกใช้เมธอด `getSelection()` บนหน้าแดชบอร์ด เมธอดจะแสดงจำนวนรวมของการเลือกทั้งหมดที่ทำบนแผนภูมิทั้งหมดภายในเมธอดดังกล่าว ซึ่งทำให้สามารถใช้การอ้างอิงเดี่ยวเมื่อดำเนินการกับการเลือกแผนภูมิได้ หมายเหตุ: ยังคงต้องแนบ Listener เหตุการณ์สำหรับเหตุการณ์ที่เลือกไว้กับแต่ละแผนภูมิที่ต้องการฟัง คำอธิบายเพิ่มเติม

bind(controls, charts)

google.visualization.Dashboard

เชื่อมโยงการควบคุมอย่างน้อย 1 รายการกับผู้เข้าร่วมหน้าแดชบอร์ดคนอื่นๆ อย่างน้อย 1 คน (แผนภูมิหรือการควบคุมอื่นๆ) เพื่อให้ระบบแสดงรายการควบคุมทั้งหมดใหม่เมื่อใดก็ตามที่มีการรวบรวมการโต้ตอบแบบเป็นโปรแกรมหรือการโต้ตอบของผู้ใช้ซึ่งส่งผลต่อข้อมูลที่หน้าแดชบอร์ดจัดการ แสดงผลอินสแตนซ์ของหน้าแดชบอร์ดสำหรับการเชื่อมโยงการเรียกใช้ bind() หลายรายการเข้าด้วยกัน

controls - อินสแตนซ์เดี่ยวหรืออาร์เรย์ของ google.visualization.ControlWrapper ที่กําหนดการควบคุมที่จะเชื่อมโยง
แผนภูมิ - อินสแตนซ์เดี่ยวหรืออาร์เรย์ของ google.visualization.ChartWrapper ที่กำหนดแผนภูมิซึ่งจะใช้ตัวควบคุม

draw(dataTable)

ไม่มี

วาดหน้าแดชบอร์ด

dataTable - ค่าใดค่าหนึ่งต่อไปนี้ ได้แก่ ออบเจ็กต์ DataTable, ออบเจ็กต์ DataView, การแสดง JSON ของ DataTable หรืออาร์เรย์ที่อยู่หลังไวยากรณ์ของ google.visualization.arrayToDataTable()

getSelection()

อาร์เรย์ของวัตถุ

แสดงผลอาร์เรย์ของเอนทิตีภาพที่เลือกของแผนภูมิในแดชบอร์ด เมื่อเรียกใช้เมธอด getSelection() บนหน้าแดชบอร์ด เมธอดจะแสดงจำนวนรวมของการเลือกทั้งหมดที่ทำบนแผนภูมิทั้งหมดภายในเมธอดดังกล่าว ซึ่งทำให้สามารถใช้การอ้างอิงเดี่ยวเมื่อดำเนินการกับการเลือกแผนภูมิได้

หมายเหตุ: ยังคงต้องแนบ Listener เหตุการณ์สำหรับเหตุการณ์ที่เลือกไว้กับแต่ละแผนภูมิที่ต้องการฟัง

คำอธิบายเพิ่มเติม

กิจกรรม

ออบเจ็กต์แดชบอร์ดจะแสดงเหตุการณ์ต่อไปนี้ โปรดทราบว่าคุณต้องเรียกใช้ Dashboard.draw() ก่อน ระบบจึงจะส่งเหตุการณ์ได้

ชื่อ คำอธิบาย พร็อพเพอร์ตี้

error เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลหน้าแดชบอร์ด การควบคุมและแผนภูมิอย่างน้อย 1 รายการในแดชบอร์ดอาจแสดงผลไม่สำเร็จ รหัส, ข้อความ

ชื่อ	คำอธิบาย	พร็อพเพอร์ตี้
`error`	เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลหน้าแดชบอร์ด การควบคุมและแผนภูมิอย่างน้อย 1 รายการในแดชบอร์ดอาจแสดงผลไม่สำเร็จ	รหัส, ข้อความ
`ready`	แดชบอร์ดวาดเสร็จแล้วและพร้อมยอมรับการเปลี่ยนแปลง ตัวควบคุมและแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของแดชบอร์ดซึ่งพร้อมสำหรับการเรียกใช้เมธอดภายนอกและการโต้ตอบของผู้ใช้แล้ว หากต้องการเปลี่ยนหน้าแดชบอร์ด (หรือข้อมูลที่แสดง) หลังจากที่วาด คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด `draw` จากนั้นใช้การเปลี่ยนแปลงหลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น เหตุการณ์ `ready` จะเริ่มทำงานด้วย หลังการรีเฟรชหน้าแดชบอร์ดเสร็จสมบูรณ์โดยผู้ใช้หรือการโต้ตอบ แบบเป็นโปรแกรมกับการควบคุมอย่างใดอย่างหนึ่ง หลังการเรียกแบบเป็นโปรแกรมไปยังเมธอด `draw()` ของส่วนใดก็ตามของแผนภูมิในแดชบอร์ด	ไม่มี

ready

แดชบอร์ดวาดเสร็จแล้วและพร้อมยอมรับการเปลี่ยนแปลง ตัวควบคุมและแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของแดชบอร์ดซึ่งพร้อมสำหรับการเรียกใช้เมธอดภายนอกและการโต้ตอบของผู้ใช้แล้ว หากต้องการเปลี่ยนหน้าแดชบอร์ด (หรือข้อมูลที่แสดง) หลังจากที่วาด คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw จากนั้นใช้การเปลี่ยนแปลงหลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น

เหตุการณ์ ready จะเริ่มทำงานด้วย

หลังการรีเฟรชหน้าแดชบอร์ดเสร็จสมบูรณ์โดยผู้ใช้หรือการโต้ตอบ แบบเป็นโปรแกรมกับการควบคุมอย่างใดอย่างหนึ่ง
หลังการเรียกแบบเป็นโปรแกรมไปยังเมธอด draw() ของส่วนใดก็ตามของแผนภูมิในแดชบอร์ด

ไม่มี

ControlWrapper

ออบเจ็กต์ ControlWrapper คือ Wrapper ที่อยู่รอบๆ การแสดง JSON ของอินสแตนซ์ควบคุมที่กำหนดค่าไว้ โดยชั้นเรียนจะแสดงวิธีที่สะดวกสำหรับการกำหนดการควบคุมหน้าแดชบอร์ด การวาดการควบคุม และการเปลี่ยนสถานะโดยใช้โปรแกรม

ผู้ผลิต

ControlWrapper(opt_spec)

opt_spec: [ไม่บังคับ] - ออบเจ็กต์ JSON ที่กำหนดการควบคุมหรือเวอร์ชันสตริงต่อเนื่องของออบเจ็กต์นั้น พร็อพเพอร์ตี้ที่รองรับของออบเจ็กต์ JSON จะแสดงในตารางต่อไปนี้ หากไม่ได้ระบุ คุณต้องตั้งค่าพร็อพเพอร์ตี้ที่เหมาะสมทั้งหมดโดยใช้เมธอด set... ที่เปิดเผยโดย ControlWrapper

พร็อพเพอร์ตี้	ประเภท	จำเป็น	ค่าเริ่มต้น	คำอธิบาย
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 (หรือในแดชบอร์ดที่จัดเก็บออบเจ็กต์) และแสดงผลเหตุการณ์ที่พร้อมใช้งาน ออบเจ็กต์ที่แสดงผลแสดงเฉพาะเมธอด `resetControl()` ซึ่งรีเซ็ตสถานะการควบคุมเป็นค่าที่ได้เริ่มต้นไว้ (เช่น การรีเซ็ตองค์ประกอบแบบฟอร์ม HTML)
`getContainerId()`	สตริง	รหัสขององค์ประกอบคอนเทนเนอร์ DOM ของการควบคุม
`getOption(key, opt_default_val)`	ประเภทใดก็ได้	แสดงค่าตัวเลือกการควบคุมที่ระบุ key - ชื่อของตัวเลือกที่จะเรียกคืน อาจเป็นชื่อที่เข้าเกณฑ์ เช่น `'vAxis.title'` opt_default_value [ไม่บังคับ] - หากไม่ได้กำหนดค่าไว้หรือค่าว่าง ระบบจะแสดงผลค่านี้
`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`	ตัวควบคุมพร้อมที่จะยอมรับการโต้ตอบของผู้ใช้และสำหรับการเรียกเมธอดภายนอก หากต้องการโต้ตอบกับตัวควบคุมและเมธอดการเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด `draw` และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น หรือคุณจะติดตามเหตุการณ์ `ready` ในแดชบอร์ดที่ควบคุมเมธอดควบคุมและการเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานก็ได้	ไม่มี
`statechange`	เริ่มทำงานเมื่อผู้ใช้โต้ตอบกับตัวควบคุม ซึ่งส่งผลต่อสถานะ เช่น เหตุการณ์ `statechange` จะเริ่มทำงานทุกครั้งที่คุณขยับนิ้วโป้งของตัวควบคุมแถบเลื่อนช่วง หากต้องการเรียกข้อมูลสถานะการควบคุมที่อัปเดตหลังจากที่เหตุการณ์เริ่มทำงาน ให้เรียกใช้ `ControlWrapper.getState()`	ไม่มี

ChartWrapper

โปรดดูเอกสารประกอบ 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"} };

เครื่องมือเลือกสำหรับเลือกอย่างน้อย 1 รายการจากชุดค่าที่กำหนดไว้

รัฐ

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
selectedValues	อาร์เรย์ของวัตถุหรือประเภทพื้นฐาน	ไม่มี	ชุดของค่าที่เลือกไว้ในปัจจุบัน ค่าที่เลือกต้องเป็นชุดของค่าที่เลือกได้โดยรวมซึ่งกำหนดโดยตัวเลือก `values` (ระบบจะไม่สนใจค่าที่ไม่เกี่ยวข้อง) หาก `CategoryFilter` ไม่อนุญาตให้ใช้ค่าหลายตัวเลือก ระบบจะเก็บรักษาเฉพาะค่าแรกของอาร์เรย์

ตัวเลือก

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
filterColumnIndex	ตัวเลข	ไม่มี	คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnLabel` หากมีทั้ง 2 รูปแบบ ตัวเลือกนี้จะมีความสำคัญเหนือกว่า
filterColumnLabel	string	ไม่มี	ป้ายกำกับของคอลัมน์ที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnIndex` หากมีทั้ง 2 รูปแบบ `filterColumnIndex` จะมีความสำคัญเหนือกว่า
ค่า	อาร์เรย์	อัตโนมัติ	รายการค่าที่จะเลือก หากใช้อาร์เรย์ของออบเจ็กต์ ออบเจ็กต์ดังกล่าวควรแสดง `toString()` ที่เหมาะสมเพื่อแสดงต่อผู้ใช้ หากค่าเป็น Null หรือไม่ระบุ ระบบจะคํานวณรายการค่าโดยอัตโนมัติจากค่าที่มีอยู่ในคอลัมน์ DataTable ที่การควบคุมนี้ทํางานอยู่
useFormattedValue	boolean	false	เมื่อเติมรายการค่าที่เลือกได้โดยอัตโนมัติจากคอลัมน์ DataTable ตัวกรองนี้จะทำงานว่าจะใช้ค่าเซลล์จริงหรือค่าที่จัดรูปแบบแล้ว
ui	ออบเจ็กต์	null	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าด้านต่างๆ ของ UI ของตัวควบคุม หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบสัญกรณ์ของออบเจ็กต์ตามที่แสดงไว้ที่นี่ {label: 'Metric', labelSeparator: ':'}
ui.caption	string	"เลือกค่า..."	คําบรรยายที่จะแสดงภายในวิดเจ็ตตัวเลือกค่าเมื่อไม่ได้เลือกรายการใดๆ
ui.sortValues	boolean	จริง	ควรจัดเรียงค่าที่เลือกหรือไม่
ui.selectedValuesLayout	string	"aside"	วิธีแสดงค่าที่เลือกเมื่ออนุญาตให้เลือกได้หลายรายการ โดยค่าที่เป็นไปได้มีดังนี้ `'aside'`: ค่าที่เลือกจะแสดงในบรรทัดข้อความเดียวถัดจากวิดเจ็ตเครื่องมือเลือกค่า `'below'`: ค่าที่เลือกจะแสดงเป็นบรรทัดข้อความเดียวใต้วิดเจ็ต `'belowWrapping'`: คล้ายกับ `below` แต่รายการที่ใส่ในเครื่องมือเลือกไม่ได้ จะตัดไปไว้ในบรรทัดใหม่ `'belowStacked'`: ค่าที่เลือกจะแสดงในคอลัมน์ใต้วิดเจ็ต
ui.allowNone	boolean	จริง	ผู้ใช้ไม่ได้รับอนุญาตให้เลือกค่าใดๆ หรือไม่ หากเป็น `false` ผู้ใช้ต้อง เลือกค่าอย่างน้อย 1 ค่าจากค่าที่มีอยู่ ระหว่างการเริ่มต้นการควบคุม หากตั้งค่าตัวเลือกเป็น `false` และไม่ได้กำหนดสถานะ `selectedValues` ระบบจะเลือกค่าแรกจากค่าที่มีอยู่โดยอัตโนมัติ
ui.allowMultiple	boolean	จริง	สามารถเลือกได้หลายค่า แทนที่จะเลือกเพียงค่าเดียว
ui.allowTyping	boolean	จริง	ไม่ว่าจะได้รับอนุญาตให้พิมพ์ในช่องข้อความเพื่อจำกัดรายการตัวเลือก ที่เป็นไปได้ให้แคบลง (ผ่านการเติมข้อความอัตโนมัติ) หรือไม่
ui.label	string	อัตโนมัติ	ป้ายกำกับที่จะแสดงถัดจากเครื่องมือเลือกหมวดหมู่ หากไม่ระบุ ระบบจะใช้ป้ายกำกับของคอลัมน์ที่การควบคุมดำเนินการอยู่
ui.labelSeparator	string	ไม่มี	สตริงตัวคั่นที่ต่อท้ายป้ายกำกับ เพื่อแยกป้ายกำกับออกจากเครื่องมือเลือกหมวดหมู่อย่างชัดเจน
ui.labelStacking	string	"แนวนอน"	เครื่องมือเลือกหมวดหมู่ควรแสดงป้ายกำกับด้านบน (การเรียงซ้อนแนวตั้ง) หรือด้านข้าง (การซ้อนแนวนอน) โปรดใช้ `'vertical'` หรือ `'horizontal'`
ui.cssClass	string	'google-visualization-controls-categoryfilter'	คลาส CSS ที่จะกำหนดให้การควบคุม สำหรับการจัดรูปแบบที่กำหนดเอง

ChartRangeFilter

แถบเลื่อนที่มีนิ้วโป้ง 2 ข้างวางซ้อนบนแผนภูมิ เพื่อเลือกช่วงของค่าจากแกนต่อเนื่องของแผนภูมิ

รัฐ

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
range.start	ตัวเลข วันที่ วันที่และเวลา หรือช่วงเวลาของวัน	ค่าเริ่มต้นของช่วง	จุดเริ่มต้นของช่วงที่เลือก (รวมค่าแรกและค่าสุดท้าย)
range.end	ตัวเลข วันที่ วันที่และเวลา หรือช่วงเวลาของวัน	ค่าสิ้นสุดของช่วง	จุดสิ้นสุดของช่วงที่เลือก (รวมค่าแรกและค่าสุดท้าย)

ตัวเลือก

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
filterColumnIndex	ตัวเลข	ไม่มี	ดัชนีของคอลัมน์ในตารางข้อมูลที่ตัวกรองดำเนินการ คุณต้องระบุตัวเลือกนี้หรือ`filterColumnLabel` หากมีทั้ง 2 รูปแบบ ตัวเลือกนี้จะมีความสำคัญเหนือกว่า โปรดทราบว่าคุณควรระบุดัชนีของคอลัมน์โดเมนที่อยู่ในแกนต่อเนื่องของแผนภูมิที่วาดภายในตัวควบคุมเท่านั้น
filterColumnLabel	string	ไม่มี	ป้ายกำกับคอลัมน์ของตารางข้อมูลที่ตัวกรองทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnIndex` หากมีทั้ง 2 รูปแบบ `filterColumnIndex` จะมีความสำคัญเหนือกว่า โปรดทราบว่าคุณควรระบุป้ายกำกับของคอลัมน์โดเมนที่อยู่ในแกนต่อเนื่องของแผนภูมิที่วาดภายในตัวควบคุมเท่านั้น
ui	ออบเจ็กต์	null	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าด้านต่างๆ ของ UI ของตัวควบคุม หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบสัญกรณ์ของออบเจ็กต์ตามที่แสดงไว้ที่นี่ {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	ตัวเลข	ตีความความแตกต่างของค่าข้อมูลเป็น 1 พิกเซล	ขนาดช่วงต่ำสุดที่เลือกได้ (`range.end - range.start`) ซึ่งระบุในหน่วยค่าของข้อมูล สำหรับแกนตัวเลข จะเป็นตัวเลข (ไม่จำเป็นต้องเป็นจำนวนเต็ม) สำหรับแกนวันที่ วันที่และเวลา หรือเวลาของวัน จะเป็นจำนวนเต็มที่ระบุความแตกต่างในหน่วยมิลลิวินาที
ui.snapToData	boolean	false	หากเป็น "จริง" ระบบจะจัดนิ้วโป้งช่วงกับจุดข้อมูลที่ใกล้ที่สุด ในกรณีนี้ จุดสิ้นสุดของช่วงที่ `getState()` แสดงผลต้องเป็นค่าในตารางข้อมูล

กิจกรรม

การเพิ่มลงในเหตุการณ์ ControlWrapper

ชื่อ	คำอธิบาย	พร็อพเพอร์ตี้
`statechange`	เหมือนกับที่บันทึกไว้สำหรับ ControlWrapper ทุกรายการ แต่มีเฉพาะพร็อพเพอร์ตี้บูลีนเพิ่มเติม `inProgress` ที่ระบุว่าสถานะกำลังเปลี่ยนแปลงหรือไม่ (มีการลากนิ้วโป้งรายการใดรายการหนึ่งหรือช่วงเอง)	inProgress

DateRangeFilter

แถบเลื่อนที่มีค่าคู่สำหรับเลือกช่วงวันที่

ลองเลื่อนแถบเลื่อนเพื่อเปลี่ยนแถวที่จะแสดงในตารางด้านล่าง

รัฐ

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
lowValue	ตัวเลข	ไม่มี	ขอบเขตที่ต่ำกว่าของช่วงที่เลือก (รวมค่าแรกและค่าสุดท้าย)
highValue	ตัวเลข	ไม่มี	ขอบเขตที่สูงกว่าของช่วงที่เลือก (รวมค่าแรกและค่าสุดท้าย)
lowThumbAtMinimum	boolean	ไม่มี	ล็อกนิ้วหัวแม่มือด้านล่างของแถบเลื่อนไว้ที่ช่วงต่ำสุดที่อนุญาตหรือไม่ หากตั้งค่าไว้ จะลบล้าง `lowValue`
highThumbAtMaximum	boolean	ไม่มี	ล็อกนิ้วหัวแม่มือที่อยู่สูงขึ้นของแถบเลื่อนไว้ที่ช่วงสูงสุดที่อนุญาตหรือไม่ หากตั้งค่าไว้ จะลบล้าง `highValue`

ตัวเลือก

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
filterColumnIndex	ตัวเลข	ไม่มี	คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnLabel` หากมีทั้ง 2 รูปแบบ ตัวเลือกนี้จะมีความสำคัญเหนือกว่า ต้องชี้ไปที่คอลัมน์ที่มีประเภท `number`
filterColumnLabel	string	ไม่มี	ป้ายกำกับของคอลัมน์ที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnIndex` หากมีทั้ง 2 รูปแบบ `filterColumnIndex` จะมีความสำคัญเหนือกว่า ต้องชี้ไปที่คอลัมน์ที่มีประเภท `number`
minValue	วันที่	อัตโนมัติ	ค่าต่ำสุดที่อนุญาตสำหรับขอบเขตที่ต่ำกว่า หากไม่ได้กำหนดไว้ ระบบจะอนุมานค่านี้จากเนื้อหาของ DataTable ที่จัดการโดยตัวควบคุม
maxValue	วันที่	อัตโนมัติ	ค่าสูงสุดที่อนุญาตสำหรับช่วงที่สูงกว่า หากไม่ได้กำหนดไว้ ระบบจะอนุมานค่านี้จากเนื้อหาของ DataTable ที่จัดการโดยตัวควบคุม
ui	ออบเจ็กต์	null	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าด้านต่างๆ ของ UI ของตัวควบคุม หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบสัญกรณ์ของออบเจ็กต์ตามที่แสดงไว้ที่นี่ {label: 'Age', labelSeparator: ':'}
ui.format	ออบเจ็กต์	ไม่มี	วิธีแสดงวันที่เป็นสตริง ยอมรับ รูปแบบวันที่ ที่ถูกต้องทุกรูปแบบ
ui.step	string	วัน	การเปลี่ยนแปลงต่ำสุดที่เป็นไปได้เมื่อลากนิ้วหัวแม่มือ: อาจเป็นหน่วยเวลาใดก็ได้ไปจนถึง "วัน" (ยังไม่รองรับ "เดือน" และ "ปี")
ui.ticks	ตัวเลข	อัตโนมัติ	จำนวนตำแหน่งติ๊ก (ตำแหน่งคงที่ในแถบช่วง) ที่ภาพขนาดย่อของแถบเลื่อนสามารถใช้ได้
ui.unitIncrement	string	"1"	จำนวนที่จะเพิ่มสำหรับหน่วยของขอบเขตของช่วง การเพิ่มหน่วยเท่ากับการใช้ปุ่มลูกศรเพื่อเลื่อนภาพขนาดย่อของแถบเลื่อน
ui.blockIncrement	ตัวเลข	10	จำนวนที่จะเพิ่มสำหรับส่วนเพิ่มบล็อกของขอบเขตของช่วง การเพิ่มบล็อกเทียบเท่ากับการใช้แป้น pgUp และ pgDown เพื่อเลื่อนภาพขนาดย่อของแถบเลื่อน
ui.showRangeValues	boolean	จริง	ต้องการให้ป้ายกํากับอยู่ข้างแถบเลื่อนที่แสดงขอบเขตของช่วงที่เลือกหรือไม่
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	ตัวเลข	ไม่มี	ขอบเขตที่ต่ำกว่าของช่วงที่เลือก (รวมค่าแรกและค่าสุดท้าย)
highValue	ตัวเลข	ไม่มี	ขอบเขตที่สูงกว่าของช่วงที่เลือก (รวมค่าแรกและค่าสุดท้าย)
lowThumbAtMinimum	boolean	ไม่มี	ล็อกนิ้วหัวแม่มือด้านล่างของแถบเลื่อนไว้ที่ช่วงต่ำสุดที่อนุญาตหรือไม่ หากตั้งค่าไว้ จะลบล้าง `lowValue`
highThumbAtMaximum	boolean	ไม่มี	ล็อกนิ้วหัวแม่มือที่อยู่สูงขึ้นของแถบเลื่อนไว้ที่ช่วงสูงสุดที่อนุญาตหรือไม่ หากตั้งค่าไว้ จะลบล้าง `highValue`

ตัวเลือก

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
filterColumnIndex	ตัวเลข	ไม่มี	คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnLabel` หากมีทั้ง 2 รูปแบบ ตัวเลือกนี้จะมีความสำคัญเหนือกว่า ต้องชี้ไปที่คอลัมน์ที่มีประเภท `number`
filterColumnLabel	string	ไม่มี	ป้ายกำกับของคอลัมน์ที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnIndex` หากมีทั้ง 2 รูปแบบ `filterColumnIndex` จะมีความสำคัญเหนือกว่า ต้องชี้ไปที่คอลัมน์ที่มีประเภท `number`
minValue	ตัวเลข	อัตโนมัติ	ค่าต่ำสุดที่อนุญาตสำหรับขอบเขตที่ต่ำกว่า หากไม่ได้กำหนดไว้ ระบบจะอนุมานค่านี้จากเนื้อหาของ DataTable ที่จัดการโดยตัวควบคุม
maxValue	ตัวเลข	อัตโนมัติ	ค่าสูงสุดที่อนุญาตสำหรับช่วงที่สูงกว่า หากไม่ได้กำหนดไว้ ระบบจะอนุมานค่านี้จากเนื้อหาของ DataTable ที่จัดการโดยตัวควบคุม
ui	ออบเจ็กต์	null	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าด้านต่างๆ ของ UI ของตัวควบคุม หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบสัญกรณ์ของออบเจ็กต์ตามที่แสดงไว้ที่นี่ {label: 'Age', labelSeparator: ':'}
ui.format	ออบเจ็กต์	ไม่มี	วิธีแสดงตัวเลขเป็นสตริง ยอมรับ รูปแบบตัวเลข ที่ถูกต้อง
ui.step	ตัวเลข	1 หรือคํานวณจาก `ticks` หากกําหนดไว้	การเปลี่ยนแปลงต่ำสุดที่เป็นไปได้เมื่อลากภาพขนาดย่อของแถบเลื่อน
ui.ticks	ตัวเลข	อัตโนมัติ	จำนวนตำแหน่งติ๊ก (ตำแหน่งคงที่ในแถบช่วง) ที่ภาพขนาดย่อของแถบเลื่อนสามารถใช้ได้
ui.unitIncrement	ตัวเลข	1	จำนวนที่จะเพิ่มสำหรับหน่วยของขอบเขตของช่วง การเพิ่มหน่วยเท่ากับการใช้ปุ่มลูกศรเพื่อเลื่อนภาพขนาดย่อของแถบเลื่อน
ui.blockIncrement	ตัวเลข	10	จำนวนที่จะเพิ่มสำหรับส่วนเพิ่มบล็อกของขอบเขตของช่วง การเพิ่มบล็อกเทียบเท่ากับการใช้แป้น pgUp และ pgDown เพื่อเลื่อนภาพขนาดย่อของแถบเลื่อน
ui.showRangeValues	boolean	จริง	ต้องการให้ป้ายกํากับอยู่ข้างแถบเลื่อนที่แสดงขอบเขตของช่วงที่เลือกหรือไม่
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	ตัวเลข	ไม่มี	คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnLabel` หากมีทั้ง 2 รูปแบบ ตัวเลือกนี้จะมีความสำคัญเหนือกว่า
filterColumnLabel	string	ไม่มี	ป้ายกำกับของคอลัมน์ที่ตัวกรองควรทำงาน คุณต้องระบุตัวเลือกนี้หรือ `filterColumnIndex` หากมีทั้ง 2 รูปแบบ `filterColumnIndex` จะมีความสำคัญเหนือกว่า
matchType	string	"prefix"	ตัวควบคุมควรตรงกับค่าที่แน่นอนเท่านั้น (`'exact'`) คำนำหน้าที่เริ่มจากจุดเริ่มต้นของค่า (`'prefix'`) หรือสตริงย่อย (`'any'`)
caseSensitive	boolean	false	การจับคู่ควรคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่หรือไม่
useFormattedValue	boolean	false	ตัวควบคุมควรจับคู่กับค่าที่จัดรูปแบบเซลล์หรือค่าจริงอีกครั้ง
ui	ออบเจ็กต์	null	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าด้านต่างๆ ของ UI ของตัวควบคุม หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบสัญกรณ์ของออบเจ็กต์ตามที่แสดงไว้ที่นี่ {label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger	boolean	จริง	การควบคุมควรจะตรงกับทุกครั้งที่กดแป้น หรือเฉพาะเมื่อช่องป้อนข้อมูล "มีการเปลี่ยนแปลง" (สูญเสียโฟกัสหรือกดแป้น Enter)
ui.label	string	อัตโนมัติ	ป้ายกำกับที่จะแสดงถัดจากช่องป้อนข้อมูล หากไม่ระบุ ระบบจะใช้ป้ายกำกับของคอลัมน์ที่การควบคุมดำเนินการอยู่
ui.labelSeparator	string	ไม่มี	สตริงตัวคั่นที่ต่อท้ายป้ายกำกับ เพื่อแยกป้ายกำกับออกจากช่องป้อนข้อมูล
ui.labelStacking	string	"แนวนอน"	ป้ายกำกับควรแสดงอยู่เหนือ (การซ้อนแนวตั้ง) หรือด้านข้าง (การซ้อนแนวนอน) ช่องอินพุต โปรดใช้ `'vertical'` หรือ `'horizontal'`
ui.cssClass	string	'google-visualization-controls-stringfilter'	คลาส CSS ที่จะกำหนดให้การควบคุม สำหรับการจัดรูปแบบที่กำหนดเอง