Trang này được dịch bởi Cloud Translation API.

Điều khiển và trang tổng quan

Trên trang này, bạn sẽ thấy cách kết hợp nhiều biểu đồ vào trang tổng quan và cung cấp cho người dùng quyền kiểm soát để thao tác với dữ liệu hiển thị.

Tổng quan

Trang tổng quan là một cách đơn giản để sắp xếp cùng nhau và quản lý nhiều biểu đồ có cùng dữ liệu cơ bản. Bằng cách sử dụng các API được mô tả trên trang này, bạn có thể thoát khỏi gánh nặng phải kết nối với nhau và điều phối tất cả các biểu đồ trong một trang tổng quan.

Trang tổng quan được xác định bằng các lớp google.visualization.Dashboard. Các thực thể Dashboard nhận được một DataTable chứa dữ liệu để trực quan hoá và xử lý việc vẽ và phân phối dữ liệu cho tất cả các biểu đồ trong trang tổng quan.

Chế độ điều khiển là các tiện ích trên giao diện người dùng (chẳng hạn như bộ chọn danh mục, thanh trượt phạm vi, trình tự động hoàn thành...) mà bạn tương tác để điều khiển dữ liệu được quản lý bằng một trang tổng quan và các biểu đồ trong đó.

Các chế độ điều khiển được xác định bằng các lớp google.visualization.ControlWrapper. Bạn có thể thêm các thực thể ControlWrapper vào một trang tổng quan để các thực thể này hoạt động như đường ống và van trong hệ thống ống nước. Loại dữ liệu này thu thập dữ liệu hoạt động đầu vào của người dùng và sử dụng thông tin đó để quyết định dữ liệu nào mà trang tổng quan đang quản lý sẽ được cung cấp cho các biểu đồ chứa dữ liệu đó.

Hãy xem ví dụ sau đây, trong đó bạn dùng bộ chọn danh mục và thanh trượt phạm vi để điều khiển dữ liệu được minh hoạ bằng biểu đồ hình tròn.

Lưu ý: Trang tổng quan này có tính tương tác. Hãy thử vận hành các chế độ kiểm soát và xem sự thay đổi của biểu đồ theo thời gian thực.

Sử dụng các chế độ kiểm soát và trang tổng quan

Dưới đây là các bước chính để tạo và nhúng trang tổng quan vào trang của bạn. Bạn sẽ thấy một đoạn mã minh hoạ tất cả các bước này, theo sau là thông tin chi tiết về từng bước.

Tạo khung HTML cho trang tổng quan của bạn. Trang của bạn phải có đủ phần tử HTML cần thiết để chứa mọi thành viên của trang tổng quan. Phần này bao gồm cả trang tổng quan cũng như tất cả các chế độ kiểm soát và biểu đồ trong trang tổng quan đó. Thông thường, bạn sẽ sử dụng <div> cho mỗi mã.
Tải thư viện của bạn. Một trang tổng quan chỉ yêu cầu bạn đưa vào hoặc tải hai thư viện trên trang: API Google AJAX và gói controls của Google Hình ảnh hoá.
Chuẩn bị dữ liệu của bạn. Bạn cần chuẩn bị dữ liệu để trực quan hoá; tức là tự chỉ định dữ liệu trong mã hoặc truy vấn một trang web từ xa để lấy dữ liệu.
Tạo một bản sao trang tổng quan. Tạo bản sao trang tổng quan của bạn bằng cách gọi hàm khởi tạo và truyền một tham chiếu đến phần tử <div> chứa trang tổng quan đó.
Tạo số lượng chế độ kiểm soát và bản sao biểu đồ tuỳ ý. Tạo các thực thể google.visualization.ChartWrapper và google.visualization.ControlWrapper để mô tả từng biểu đồ và chế độ kiểm soát mà trang tổng quan này quản lý.
Thiết lập các phần phụ thuộc. Hãy gọi bind() trên trang tổng quan, đồng thời truyền các phiên bản biểu đồ và đối chứng vào để cho trang tổng quan biết cần quản lý những gì. Sau khi một chế độ điều khiển và biểu đồ đã liên kết với nhau, trang tổng quan sẽ cập nhật biểu đồ để khớp với các quy tắc ràng buộc mà chế độ kiểm soát thực thi đối với dữ liệu.
Vẽ trang tổng quan. Gọi draw() trên trang tổng quan và truyền dữ liệu vào để vẽ toàn bộ trang tổng quan trên trang.
Các thay đổi về chương trình sau khi rút thăm. Sau lần vẽ ban đầu, bạn có thể tuỳ ý điều khiển các chế độ điều khiển thuộc trang tổng quan này và yêu cầu trang tổng quan cập nhật biểu đồ để tương ứng với điều đó.

Sau đây là ví dụ đơn giản về một trang tạo một trang tổng quan đơn giản bằng thanh trượt phạm vi điều khiển biểu đồ hình tròn. Trang tổng quan kết quả sẽ hiển thị bên dưới đoạn mã.

<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>

Đây là trang tổng quan mà mã này tạo.

1. Tạo bộ xương HTML cho trang tổng quan của bạn

Trang của bạn phải có nhiều phần tử HTML (thường là <div>) để chứa cả trang tổng quan cũng như tất cả phần điều khiển và biểu đồ của trang tổng quan. Khi tạo thực thể trang tổng quan, thành phần điều khiển và biểu đồ, bạn phải chuyển thông tin tham chiếu đến phần tử của các thực thể đó, vì vậy, hãy chỉ định một mã nhận dạng cho mỗi phần tử 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>

Bạn có thể tuỳ ý đặt mỗi phần tử HTML theo cách mà bạn muốn trang tổng quan của mình xuất hiện.

2. Tải thư viện

Một trang tổng quan chỉ yêu cầu hai thư viện được đưa vào hoặc tải trên trang: API AJAX của Google và gói controls của Google Hình ảnh trực quan. API (cụ thể là google.visualization.ChartWrapper) tự động xác định các gói cần thiết khác (ví dụ: gauge nếu bạn đang sử dụng Biểu đồ dạng đồng hồ đo) và tải nhanh các gói đó mà không cần bạn phải can thiệp thêm.

Bạn phải sử dụng google.charts.load() để tìm nạp thư viện đối chứng.

<!--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. Chuẩn bị dữ liệu của bạn

Khi bạn tải API Hình ảnh hoá, google.charts.setOnLoadCallback() sẽ gọi hàm của trình xử lý để bạn biết rằng tất cả phương thức và lớp trợ giúp cần thiết đều sẽ sẵn sàng để bạn bắt đầu chuẩn bị dữ liệu.

Trang tổng quan chấp nhận dữ liệu trong DataTable, giống như biểu đồ.

4. Tạo bản sao Trang tổng quan

Sau khi tạo dữ liệu, bạn có thể tạo thực thể cho đối tượng trang tổng quan của mình. Hàm khởi tạo trang tổng quan lấy một tham số: tham chiếu đến phần tử DOM để vẽ trang tổng quan.

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

Trang tổng quan được hiển thị dưới dạng lớp JavaScript. Sau khi tạo thực thể cho trang tổng quan, bạn có thể thực hiện một vài bước không bắt buộc như thêm trình nghe sự kiện (ví dụ: nhận thông báo khi trang tổng quan "sẵn sàng"). Trang tổng quan xử lý các sự kiện theo cách tương tự như biểu đồ. Vì vậy, hãy tham khảo bài viết Xử lý sự kiện trực quan hoá hoặc Hiển thị lỗi đúng cách trong phần biểu đồ để biết thêm thông tin.

5. Tạo đối tượng kiểm soát và biểu đồ

Xác định số lượng phiên bản bạn cần cho mỗi chế độ kiểm soát và biểu đồ sẽ là một phần của trang tổng quan. Hãy sử dụng google.visualization.ChartWrapper và google.visualization.ControlWrapper để xác định biểu đồ và chế độ kiểm soát tương ứng.

  // 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'
    }
  });

Khi tạo các thực thể ChartWrapper và ControlWrapper, bạn không nên chỉ định tham số dataTable hoặc dataSourceUrl. Trang tổng quan này sẽ cấp dữ liệu thích hợp cho từng trang. Tuy nhiên, hãy nhớ chỉ định các tham số bắt buộc: chartType và containerId cho biểu đồ, controlType và containerId cho chế độ kiểm soát.

Một vài mẹo về cách định cấu hình chế độ kiểm soát và biểu đồ:

Bạn phải cung cấp cho tất cả chế độ điều khiển một filterColumnIndex (hoặc filterColumnLabel) để chỉ định cột nào của google.visualization.DataTable mà chế độ điều khiển sẽ hoạt động (trong ví dụ trên, chế độ điều khiển hoạt động trên cột có nhãn Bánh Do Thái),

Sử dụng tuỳ chọn cấu hình state trên các thành phần điều khiển để khởi chạy các thành phần đó với trạng thái rõ ràng khi vẽ lần đầu. Ví dụ: sử dụng chế độ cài đặt này để cố định vị trí ban đầu của các nút thích trên thanh trượt điều khiển phạm vi.

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

Tất cả các biểu đồ trong một trang tổng quan đều có cùng dữ liệu cơ bản mà bạn đã chuẩn bị trong bước Chuẩn bị dữ liệu của bạn. Tuy nhiên, biểu đồ thường yêu cầu một cách sắp xếp cột cụ thể để hiển thị chính xác: ví dụ: biểu đồ hình tròn yêu cầu một cột chuỗi cho nhãn, theo sau là cột số cho giá trị.

Hãy dùng tuỳ chọn view trong khi định cấu hình từng thực thể của ChartWrapper để khai báo cột nào liên quan đến biểu đồ, như trong ví dụ sau.

  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. Thiết lập phần phụ thuộc

Sau khi bạn đã tạo thực thể cho cả trang tổng quan, tất cả các chế độ điều khiển và biểu đồ sẽ chứa trang tổng quan đó, hãy sử dụng phương thức bind() để cho trang tổng quan biết về các phần phụ thuộc tồn tại giữa các chế độ kiểm soát và biểu đồ.

Sau khi một chế độ điều khiển và biểu đồ đã liên kết với nhau, trang tổng quan sẽ cập nhật biểu đồ để khớp với các quy tắc ràng buộc mà chế độ kiểm soát thực thi đối với dữ liệu. Trong trang tổng quan mẫu mà bạn đang tạo, thanh trượt phạm vi và biểu đồ hình tròn được liên kết với nhau, vì vậy, bất cứ khi nào bạn tương tác với biểu đồ hình tròn, thanh trượt phạm vi sẽ cập nhật để chỉ hiển thị dữ liệu khớp với dải ô đã chọn.

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

Bạn có thể liên kết các thành phần điều khiển và biểu đồ theo nhiều cấu hình: một với một, một với nhiều, nhiều với một và nhiều với nhiều. Bất cứ khi nào nhiều chế độ điều khiển được liên kết với một biểu đồ, trang tổng quan sẽ cập nhật biểu đồ đó để khớp với các điều kiện ràng buộc kết hợp được thực thi bởi tất cả các chế độ điều khiển ràng buộc. Đồng thời, một chế độ kiểm soát có thể thúc đẩy nhiều biểu đồ cùng lúc. Để chỉ định nhiều liên kết cùng một lúc, hãy truyền mảng vào phương thức bind() thay vì truyền các thực thể riêng lẻ. Bạn cũng có thể liên kết nhiều lệnh gọi bind() với nhau. Dưới đây là một số ví dụ.

  // 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);

Đối với các trường hợp sử dụng nâng cao, bạn cũng có thể liên kết các thành phần điều khiển với các thành phần điều khiển khác để thiết lập chuỗi phần phụ thuộc .

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

7. Vẽ trang tổng quan của bạn

Gọi phương thức draw() trên phiên bản trang tổng quan để kết xuất toàn bộ trang tổng quan. Phương thức draw() chỉ lấy một tham số: DataTable (hoặc DataView) hỗ trợ trang tổng quan.

Bạn nên gọi draw() mỗi khi thay đổi thành phần của trang tổng quan (ví dụ: bằng cách thêm biểu đồ hoặc chế độ điều khiển mới vào trang tổng quan) hoặc khi bạn thay đổi DataTable tổng thể hỗ trợ trang tổng quan đó.

Thực thể trang tổng quan sẽ kích hoạt một sự kiện ready bất cứ khi nào draw() chấm dứt việc vẽ tất cả các chế độ điều khiển và biểu đồ có trong đó. Sự kiện error sẽ được kích hoạt nếu không vẽ được bất kỳ chế độ điều khiển hoặc biểu đồ nào được quản lý. Để tìm hiểu thêm về cách xử lý sự kiện, hãy xem bài viết Xử lý sự kiện.

Lưu ý: Bạn nên theo dõi sự kiện ready trước khi cố gắng thay đổi thành phần của trang tổng quan hoặc vẽ lại sự kiện đó.

8. Các thay đổi có lập trình sau khi rút thăm

Sau khi hoàn tất draw() ban đầu, trang tổng quan sẽ trực tiếp và tự động phản hồi mọi thao tác bạn thực hiện trên đó (chẳng hạn như thay đổi phạm vi đã chọn của thanh trượt điều khiển thuộc trang tổng quan).

Nếu cần thay đổi trạng thái trang tổng quan theo phương thức lập trình, bạn có thể thực hiện bằng cách thao tác trực tiếp trên các thực thể ControlWrapper và ChartWrapper thuộc đó. Nguyên tắc chung là thực hiện mọi thay đổi cần thiết ngay trên thực thể ControlWrapper (hoặc ChartWrapper) cụ thể: ví dụ: thay đổi tuỳ chọn hoặc trạng thái điều khiển qua setOption() và setState() tương ứng, sau đó gọi phương thức draw(). Sau đó, trang tổng quan này sẽ cập nhật để phù hợp với các thay đổi được yêu cầu.

Ví dụ sau cho thấy một trường hợp như vậy.

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

Trang web đầy đủ

<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>

Tài liệu tham khảo API

Phần này liệt kê các đối tượng do API Control and Dashboards hiển thị, cũng như các phương thức tiêu chuẩn do tất cả chế độ kiểm soát hiển thị.

Trang tổng quan

Biểu thị một tập hợp các biểu đồ và biện pháp kiểm soát cộng tác dùng chung dữ liệu cơ bản.

Hàm dựng

Dashboard(containerRef)

containerRef
: Tham chiếu đến một phần tử vùng chứa hợp lệ trên trang sẽ lưu giữ nội dung trên trang tổng quan.

Phương thức

Trang tổng quan cung cấp các phương thức sau:

Phương thức Loại dữ liệu trả về Nội dung mô tả

Phương thức	Loại dữ liệu trả về	Nội dung mô tả
`bind(controls, charts)`	google.visualization.Dashboard	Liên kết một hoặc nhiều Chế độ kiểm soát với một hoặc nhiều người tham gia trang tổng quan khác (biểu đồ hoặc các chế độ điều khiển khác) để tất cả các chế độ kiểm soát đó được vẽ lại bất cứ khi nào bất kỳ chế độ kiểm soát nào thu thập một hoạt động tương tác có lập trình hoặc có ảnh hưởng đến dữ liệu do trang tổng quan quản lý. Trả về thực thể trang tổng quan để liên kết nhiều lệnh gọi `bind()` với nhau. controls – Một hoặc một mảng gồm các thực thể `google.visualization.ControlWrapper` xác định các thành phần điều khiển cần liên kết. biểu đồ – Một hoặc một mảng các thực thể `google.visualization.ChartWrapper` xác định các biểu đồ mà các chế độ kiểm soát sẽ điều khiển.
`draw(dataTable)`	Không có	Vẽ trang tổng quan. dataTable – Bất kỳ giá trị nào sau đây: đối tượng `DataTable`; đối tượng `DataView`; cách biểu diễn JSON của DataTable; hoặc một mảng theo cú pháp google.Visualization.arrayToDataTable() .
`getSelection()`	Mảng đối tượng	Trả về một mảng các thực thể trực quan đã chọn của biểu đồ trong trang tổng quan. Khi được gọi trên trang tổng quan, phương thức `getSelection()` sẽ trả về dữ liệu tổng hợp của tất cả lựa chọn được thực hiện trên tất cả biểu đồ trong đó, cho phép sử dụng một tệp đối chiếu duy nhất khi làm việc với các lựa chọn biểu đồ. Lưu ý: Bạn vẫn cần đính kèm trình nghe sự kiện cho sự kiện đã chọn vào từng biểu đồ mà bạn muốn nghe. Nội dung mô tả mở rộng

bind(controls, charts)

google.visualization.Dashboard

Liên kết một hoặc nhiều Chế độ kiểm soát với một hoặc nhiều người tham gia trang tổng quan khác (biểu đồ hoặc các chế độ điều khiển khác) để tất cả các chế độ kiểm soát đó được vẽ lại bất cứ khi nào bất kỳ chế độ kiểm soát nào thu thập một hoạt động tương tác có lập trình hoặc có ảnh hưởng đến dữ liệu do trang tổng quan quản lý. Trả về thực thể trang tổng quan để liên kết nhiều lệnh gọi bind() với nhau.

controls – Một hoặc một mảng gồm các thực thể google.visualization.ControlWrapper xác định các thành phần điều khiển cần liên kết.
biểu đồ – Một hoặc một mảng các thực thể google.visualization.ChartWrapper xác định các biểu đồ mà các chế độ kiểm soát sẽ điều khiển.

draw(dataTable)

Không có

Vẽ trang tổng quan.

dataTable – Bất kỳ giá trị nào sau đây: đối tượng DataTable; đối tượng DataView; cách biểu diễn JSON của DataTable; hoặc một mảng theo cú pháp google.Visualization.arrayToDataTable() .

getSelection()

Mảng đối tượng

Trả về một mảng các thực thể trực quan đã chọn của biểu đồ trong trang tổng quan. Khi được gọi trên trang tổng quan, phương thức getSelection() sẽ trả về dữ liệu tổng hợp của tất cả lựa chọn được thực hiện trên tất cả biểu đồ trong đó, cho phép sử dụng một tệp đối chiếu duy nhất khi làm việc với các lựa chọn biểu đồ.

Lưu ý: Bạn vẫn cần đính kèm trình nghe sự kiện cho sự kiện đã chọn vào từng biểu đồ mà bạn muốn nghe.

Nội dung mô tả mở rộng

Sự kiện

Đối tượng Trang tổng quan sẽ gửi các sự kiện sau. Xin lưu ý rằng bạn phải gọi Dashboard.draw() trước khi gửi bất kỳ sự kiện nào.

Tên Nội dung mô tả Thuộc tính

error Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị trang tổng quan. Một hoặc nhiều chế độ điều khiển và biểu đồ thuộc trang tổng quan có thể đã không hiển thị được. mã nhận dạng, tin nhắn

Tên	Nội dung mô tả	Thuộc tính
`error`	Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị trang tổng quan. Một hoặc nhiều chế độ điều khiển và biểu đồ thuộc trang tổng quan có thể đã không hiển thị được.	mã nhận dạng, tin nhắn
`ready`	Trang tổng quan đã vẽ xong và sẵn sàng chấp nhận các thay đổi. Tất cả các chế độ kiểm soát và biểu đồ trong trang tổng quan này đã sẵn sàng cho lệnh gọi phương thức bên ngoài và tương tác của người dùng. Nếu muốn thay đổi trang tổng quan (hoặc dữ liệu mà trang tổng quan hiển thị) sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức `draw`, sau đó chỉ áp dụng các thay đổi sau khi sự kiện được kích hoạt. Sự kiện `ready` cũng sẽ kích hoạt: sau khi hoàn tất quá trình làm mới trang tổng quan do một người dùng hoặc lượt tương tác có lập trình với một trong các chế độ điều khiển kích hoạt, sau khi gọi phương thức `draw()` theo phương thức lập trình của bất kỳ phần biểu đồ nào trên trang tổng quan.	Không có

ready

Trang tổng quan đã vẽ xong và sẵn sàng chấp nhận các thay đổi. Tất cả các chế độ kiểm soát và biểu đồ trong trang tổng quan này đã sẵn sàng cho lệnh gọi phương thức bên ngoài và tương tác của người dùng. Nếu muốn thay đổi trang tổng quan (hoặc dữ liệu mà trang tổng quan hiển thị) sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức draw, sau đó chỉ áp dụng các thay đổi sau khi sự kiện được kích hoạt.

Sự kiện ready cũng sẽ kích hoạt:

sau khi hoàn tất quá trình làm mới trang tổng quan do một người dùng hoặc lượt tương tác có lập trình với một trong các chế độ điều khiển kích hoạt,
sau khi gọi phương thức draw() theo phương thức lập trình của bất kỳ phần biểu đồ nào trên trang tổng quan.

Không có

ControlWrapper

Đối tượng ControlWrapper là một trình bao bọc xung quanh bản trình bày JSON của một thực thể điều khiển đã định cấu hình. Lớp này sẽ cung cấp các phương thức thuận tiện để xác định, vẽ và thay đổi trạng thái của chế độ điều khiển trang tổng quan theo phương thức lập trình.

Hàm dựng

ControlWrapper(opt_spec)

opt_spec: [Không bắt buộc] – Đối tượng JSON xác định chế độ điều khiển hoặc phiên bản chuỗi được chuyển đổi tuần tự của đối tượng đó. Các thuộc tính được hỗ trợ của đối tượng JSON được trình bày trong bảng sau. Nếu không chỉ định, bạn phải đặt tất cả các thuộc tính thích hợp bằng cách sử dụng các phương thức set... do ControlWrapper hiển thị.

Tài sản	Loại	Bắt buộc	Mặc định	Nội dung mô tả
controlType	Chuỗi	Bắt buộc	không có	Tên lớp của chế độ điều khiển. Bạn có thể bỏ qua tên gói `google.visualization` cho các chế độ kiểm soát của Google. Ví dụ: `CategoryFilter`, `NumberRangeFilter`.
containerId	Chuỗi	Bắt buộc	không có	ID của phần tử DOM trên trang của bạn sẽ lưu trữ điều khiển.
tùy chọn	Đối tượng	Không bắt buộc	không có	Đối tượng mô tả các tuỳ chọn của chế độ điều khiển. Bạn có thể sử dụng ký hiệu cố định JavaScript hoặc cung cấp tên người dùng cho đối tượng. Ví dụ: `"options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}`
state	Đối tượng	Không bắt buộc	không có	Đối tượng mô tả trạng thái của chế độ điều khiển. Trạng thái này thu thập tất cả các biến mà người dùng vận hành chế độ kiểm soát có thể ảnh hưởng. Ví dụ: trạng thái của thanh trượt phạm vi có thể được mô tả theo vị trí mà nút thumb thấp và cao của thanh trượt chiếm. Bạn có thể sử dụng ký hiệu chữ JavaScript hoặc cung cấp tên người dùng cho đối tượng.Ví dụ: `"state": {"lowValue": 20, "highValue": 50}`

Phương thức

ControlWrapper cung cấp các phương thức bổ sung sau đây:

Phương thức	Loại dữ liệu trả về	Nội dung mô tả
`draw()`	Không có	Vẽ chế độ điều khiển. Thông thường, bảng điều khiển giữ chế độ điều khiển sẽ xử lý việc vẽ bảng điều khiển đó. Bạn nên gọi `draw()` để buộc vẽ lại chế độ điều khiển có lập trình sau khi bạn thay đổi bất kỳ chế độ cài đặt nào khác tương ứng, chẳng hạn như các tuỳ chọn hoặc trạng thái.
`toJSON()`	Chuỗi	Trả về phiên bản chuỗi của cách biểu diễn chế độ điều khiển JSON.
`clone()`	ControlWrapper	Trả về một bản sao sâu của trình bao bọc điều khiển.
`getControlType()`	Chuỗi	Tên lớp của chế độ điều khiển. Nếu đây là một tên kiểm soát của Google, tên này sẽ không đủ điều kiện với `google.visualization`. Ví dụ: nếu đây là chế độ kiểm soát CategoryFilter, thì chế độ này sẽ trả về "CategoryFilter" thay vì "google.Visualization.CategoryFilter".
`getControlName()`	Chuỗi	Trả về tên chế độ điều khiển do `setControlName()` chỉ định.
`getControl()`	Tham chiếu đối tượng điều khiển	Trả về tham chiếu đến thành phần điều khiển do ControlWrapper tạo ra. Thao tác này sẽ trả về giá trị rỗng cho đến khi bạn gọi `draw()` trên đối tượng ControlWrapper (hoặc trên trang tổng quan giữ đối tượng đó) và sẽ gửi một sự kiện đã sẵn sàng. Đối tượng được trả về chỉ hiển thị một phương thức: `resetControl()`. Phương thức này đặt lại trạng thái điều khiển về trạng thái mà đối tượng được khởi động (như đặt lại phần tử biểu mẫu HTML).
`getContainerId()`	Chuỗi	ID của phần tử vùng chứa DOM của chế độ kiểm soát.
`getOption(key, opt_default_val)`	Mọi loại	Trả về giá trị tuỳ chọn điều khiển được chỉ định key (khoá) – Tên của tuỳ chọn truy xuất. Có thể là một tên đủ điều kiện, chẳng hạn như `'vAxis.title'`. opt_default_value [Không bắt buộc] – Nếu giá trị được chỉ định là không xác định hoặc rỗng, thì giá trị này sẽ được trả về.
`getOptions()`	Đối tượng	Trả về đối tượng tuỳ chọn cho chế độ điều khiển này.
`getState()`	Đối tượng	Trả về trạng thái điều khiển.
`setControlType(type)`	Không có	Đặt loại chế độ điều khiển. Truyền tên lớp của chế độ điều khiển để tạo thực thể. Nếu đây là một tuỳ chọn kiểm soát của Google, thì bạn không đủ điều kiện bằng `google.visualization`. Vì vậy, ví dụ: đối với thanh trượt phạm vi trên một cột số, hãy truyền "NumberrangeFilter".
`setControlName(name)`	Không có	Đặt tên tuỳ ý cho chế độ điều khiển. Thông tin này không xuất hiện ở bất cứ đâu trên thành phần điều khiển, mà chỉ để bạn tham khảo.
`setContainerId(id)`	Không có	Đặt ID của phần tử DOM chứa cho điều khiển.
`setOption(key, value)`	Không có	Đặt một giá trị tuỳ chọn điều khiển duy nhất, trong đó key (khoá) là tên tuỳ chọn và value là giá trị. Để huỷ đặt một lựa chọn, hãy chuyển giá trị rỗng vào giá trị đó. Xin lưu ý rằng khoá có thể là một tên đủ điều kiện, chẳng hạn như `'vAxis.title'`.
`setOptions(options_obj)`	Không có	Đặt một đối tượng tuỳ chọn hoàn chỉnh cho một chế độ điều khiển.
`setState(state_obj)`	Không có	Đặt trạng thái điều khiển. Trạng thái này thu thập tất cả biến mà người dùng vận hành chế độ kiểm soát có thể ảnh hưởng. Ví dụ: trạng thái của thanh trượt phạm vi có thể được mô tả theo vị trí mà nút thumb thấp và cao của thanh trượt chiếm.

Sự kiện

Đối tượng ControlWrapper gửi các sự kiện sau đây. Xin lưu ý rằng bạn phải gọi ControlWrapper.draw() (hoặc vẽ trang tổng quan đang giữ nút điều khiển) trước khi hệ thống gửi bất kỳ sự kiện nào.

Tên	Nội dung mô tả	Thuộc tính
`error`	Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị chế độ điều khiển.	mã nhận dạng, tin nhắn
`ready`	Chế độ kiểm soát này đã sẵn sàng để chấp nhận hoạt động tương tác của người dùng và cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với chế độ điều khiển và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức `draw` và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt. Ngoài ra, bạn có thể theo dõi sự kiện `ready` trên trang tổng quan bằng cách giữ các phương thức điều khiển và kiểm soát lệnh gọi chỉ sau khi sự kiện được kích hoạt.	Không có
`statechange`	Được kích hoạt khi người dùng tương tác với chế độ điều khiển, ảnh hưởng đến trạng thái của chế độ điều khiển đó. Ví dụ: sự kiện `statechange` sẽ kích hoạt bất cứ khi nào bạn di chuyển ngón cái của thanh trượt điều khiển phạm vi. Để truy xuất trạng thái điều khiển cập nhật sau khi sự kiện kích hoạt, hãy gọi `ControlWrapper.getState()`.	Không có

ChartWrapper

Hãy tham khảo tài liệu về google.visualization.ChartWrapper trong phần Tài liệu tham khảo API của hình ảnh trực quan.

Những lưu ý sau đây áp dụng khi bạn sử dụng ChartWrapper làm một phần của trang tổng quan:

Không đặt các thuộc tính dataTable, query, dataSourceUrl và refreshInterval một cách rõ ràng. Khi giữ biểu đồ, trang tổng quan sẽ xử lý việc cấp dữ liệu cần thiết cho trang tổng quan.
Hãy đặt thuộc tính view để khai báo cột nào (trong số tất cả các cột có trong dataTable được cung cấp cho trang tổng quan) phù hợp với biểu đồ, như minh hoạ trong phần Tạo thực thể điều khiển và biểu đồ.

Thư viện các thành phần điều khiển

Bộ lọc là các phần tử đồ hoạ mà mọi người có thể sử dụng để chọn dữ liệu sẽ xuất hiện trên biểu đồ của bạn một cách tương tác. Phần này mô tả các bộ lọc của Google Biểu đồ: CategoryFilter, Chart RangeFilter, DaterangeFilter, NumberrangeFilter và StringFilter.

Bạn có thể sử dụng bất kỳ trường hợp nào trong số đó làm tham số cho ControlWrapper.setControlType().

Lưu ý: Khi mô tả các tuỳ chọn, ký hiệu dấu chấm được dùng để mô tả các thuộc tính của đối tượng lồng nhau. Ví dụ: bạn phải khai báo tuỳ chọn có tên 'ui.label' trong đối tượng tuỳ chọn dưới dạng var options = {"ui": {"label": "someLabelValue"} };

Bộ chọn để chọn một hoặc nhiều giá trị trong một tập hợp các giá trị đã xác định.

Tiểu bang

Tên	Loại	Mặc định	Nội dung mô tả
selectedValues	Mảng đối tượng hoặc kiểu dữ liệu nguyên gốc	không có	Tập hợp các giá trị hiện được chọn. Các giá trị đã chọn phải là một tập hợp tổng thể các giá trị có thể chọn được xác định bằng tuỳ chọn `values` (mọi giá trị không liên quan sẽ bị bỏ qua). Nếu `CategoryFilter` không cho phép trắc nghiệm thì chỉ có giá trị đầu tiên của mảng được giữ lại.

Tùy chọn

Tên	Loại	Mặc định	Nội dung mô tả
filterColumnIndex	number	không có	Cột của bảng dữ liệu mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnLabel`. Nếu có cả hai, thì phương án này sẽ được ưu tiên.
filterColumnLabel	string	không có	Nhãn của cột mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên.
giá trị	Mảng	tự động	Danh sách giá trị để chọn. Nếu sử dụng một mảng Đối tượng, các mảng đó phải có nội dung đại diện `toString()` phù hợp để người dùng thấy được. Nếu có giá trị rỗng hoặc không xác định, danh sách giá trị sẽ được tự động tính toán từ các giá trị có trong cột DataTable mà chế độ kiểm soát này hoạt động.
useFormattedValue	boolean	false	Khi điền tự động danh sách các giá trị có thể chọn từ cột DataTable, bộ lọc này sẽ hoạt động, cho dù sử dụng giá trị ô thực tế hay giá trị được định dạng của các giá trị đó.
ui	Đối tượng	null	Đối tượng có các thành phần để định cấu hình nhiều chương trình thành phần trên giao diện người dùng của chế độ điều khiển. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {label: 'Metric', labelSeparator: ':'}
ui.caption	string	"Chọn một giá trị..."	Chú thích sẽ xuất hiện trong tiện ích bộ chọn giá trị khi không có mục nào được chọn.
ui.sortValues	boolean	đúng	Liệu có nên sắp xếp các giá trị cần chọn hay không.
ui.selectedValuesLayout	string	"sang một bên"	Cách hiển thị các giá trị đã chọn khi cho phép chọn nhiều giá trị. Các giá trị có thể sử dụng là: `'aside'`: các giá trị đã chọn sẽ hiển thị trong một dòng văn bản bên cạnh tiện ích bộ chọn giá trị, `'below'`: các giá trị đã chọn sẽ hiển thị trong một dòng văn bản bên dưới tiện ích, `'belowWrapping'`: tương tự như `below`, nhưng các mục không vừa với bộ chọn sẽ được ngắt thành một dòng mới, `'belowStacked'`: các giá trị đã chọn sẽ hiển thị trong một cột bên dưới tiện ích.
ui.allowNone	boolean	đúng	Liệu người dùng có được phép không chọn bất kỳ giá trị nào hay không. Nếu là `false`, người dùng phải chọn ít nhất một giá trị trong số các giá trị có sẵn. Trong quá trình khởi chạy thành phần điều khiển, nếu bạn đặt tuỳ chọn này thành `false` và không nêu trạng thái `selectedValues`, thì giá trị đầu tiên trong các giá trị có sẵn sẽ tự động được chọn.
ui.allowMultiple	boolean	đúng	Liệu có thể chọn nhiều giá trị thay vì chỉ một giá trị hay không.
ui.allowTyping	boolean	đúng	Liệu người dùng có được phép nhập vào trường văn bản để thu hẹp danh sách các lựa chọn có thể thực hiện (thông qua trình tự động hoàn thành) hay không.
ui.label	string	tự động	Nhãn sẽ hiển thị bên cạnh bộ chọn danh mục. Nếu bạn không chỉ định, nhãn của cột mà chế độ điều khiển hoạt động sẽ được sử dụng.
ui.labelSeparator	string	không có	Một chuỗi dòng phân cách đã thêm vào nhãn để phân tách nhãn khỏi bộ chọn danh mục một cách trực quan.
ui.labelStacking	string	"ngang"	Liệu nhãn sẽ hiển thị ở phía trên (xếp chồng theo chiều dọc) hay bên cạnh (xếp chồng theo chiều ngang) bộ chọn danh mục. Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-categoryfilter'	Lớp CSS để gán cho thành phần điều khiển nhằm tạo kiểu tuỳ chỉnh.

ChartRangeFilter

Một thanh trượt có hai ngón tay cái xếp chồng lên một biểu đồ để chọn dải giá trị từ trục liên tục của biểu đồ.

Tiểu bang

Tên	Loại	Mặc định	Nội dung mô tả
range.start	số, ngày, ngày giờ hoặc thời gian trong ngày	Giá trị bắt đầu của phạm vi	Giá trị bắt đầu của dải ô đã chọn, tính toàn bộ.
range.end	số, ngày, ngày giờ hoặc thời gian trong ngày	Giá trị kết thúc của phạm vi	Kết thúc của dải ô đã chọn, tính toàn bộ.

Tùy chọn

Tên	Loại	Mặc định	Nội dung mô tả
filterColumnIndex	number	không có	Chỉ mục của cột trong bảng dữ liệu mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tuỳ chọn này hoặc `filterColumnLabel`. Nếu có cả hai, tuỳ chọn này sẽ được ưu tiên. Xin lưu ý rằng chỉ nên chỉ định một chỉ mục của cột miền nằm trong trục liên tục của biểu đồ được vẽ bên trong chế độ điều khiển.
filterColumnLabel	string	không có	Nhãn của cột của bảng dữ liệu mà bộ lọc sẽ hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên. Xin lưu ý rằng chỉ nên chỉ định một nhãn của cột miền nằm trong trục liên tục của biểu đồ được vẽ bên trong chế độ điều khiển.
ui	Đối tượng	null	Đối tượng có các thành phần để định cấu hình nhiều chương trình thành phần trên giao diện người dùng của chế độ điều khiển. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType	string	"Biểu đồ kết hợp"	Loại biểu đồ được vẽ bên trong chế độ điều khiển. Có thể là một trong các loại sau: "AreaChart", "LineChart", "ComboChart" hoặc "ScatterChart".
ui.chartOptions	Đối tượng	{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } }	Các lựa chọn cấu hình của biểu đồ được vẽ bên trong phần điều khiển. Cho phép cùng một cấp cấu hình như bất kỳ biểu đồ nào trong trang tổng quan, và tuân thủ cùng định dạng như được ChartWrapper.setOptions() chấp nhận. Bạn có thể chỉ định các tuỳ chọn bổ sung hoặc ghi đè các tuỳ chọn mặc định (mặc dù vậy, xin lưu ý rằng các tuỳ chọn mặc định đã được chọn cẩn thận để có giao diện tối ưu).
ui.chartView	Đối tượng hoặc chuỗi (Đối tượng chuyển đổi tuần tự)	null	Thông số kỹ thuật của thành phần hiển thị sẽ áp dụng cho bảng dữ liệu dùng để vẽ biểu đồ bên trong thành phần điều khiển. Cho phép cùng một cấp cấu hình với bất kỳ biểu đồ nào trong trang tổng quan và tuân thủ cùng định dạng như được ChartWrapper.setView() chấp nhận. Nếu không được chỉ định, bảng dữ liệu sẽ được dùng để vẽ biểu đồ. Xin lưu ý rằng trục hoành của biểu đồ đã vẽ phải là liên tục, vì vậy, hãy cẩn thận chỉ định `ui.chartView` tương ứng.
ui.minRangeSize	number	Mức chênh lệch giá trị dữ liệu được hiểu là 1 pixel	Kích thước dải ô tối thiểu có thể chọn (`range.end - range.start`), được chỉ định trong đơn vị giá trị dữ liệu. Đối với trục số, đó là một số (không nhất thiết là số nguyên). Đối với trục ngày, ngày giờ hoặc ngày trong ngày, đây là một số nguyên chỉ định độ chênh lệch theo mili giây.
ui.snapToData	boolean	false	Nếu true, ngón tay cái của phạm vi sẽ được gắn với các điểm dữ liệu gần nhất. Trong trường hợp này, điểm cuối của dải ô do `getState()` trả về nhất thiết phải là các giá trị trong bảng dữ liệu.

Sự kiện

Bổ sung cho sự kiện ControlWrapper:

Tên	Nội dung mô tả	Thuộc tính
`statechange`	Giống như trong tài liệu cho mọi ControlWrapper, chỉ có một thuộc tính boolean bổ sung là `inProgress`. Thuộc tính này xác định liệu trạng thái hiện có đang được thay đổi hay không (một trong các ngón cái hoặc bản thân dải ô đang được kéo).	inProgress

DateRangeFilter

Thanh trượt có giá trị kép để chọn phạm vi ngày.

Thử di chuyển thanh trượt để thay đổi những hàng xuất hiện trong bảng bên dưới.

Tiểu bang

Tên	Loại	Mặc định	Nội dung mô tả
lowValue	number	không có	Phạm vi thấp hơn của phạm vi đã chọn, tính cả hai giá trị này.
highValue	number	không có	Phạm vi lớn hơn của dải ô đã chọn, tính toàn bộ.
lowThumbAtMinimum	boolean	không có	Liệu ngón cái dưới của thanh trượt có được khoá ở phạm vi tối thiểu cho phép hay không. Nếu được đặt, hãy ghi đè `lowValue`.
highThumbAtMaximum	boolean	không có	Liệu ngón cái phía trên của thanh trượt có bị khoá ở phạm vi tối đa cho phép hay không. Nếu được đặt, hãy ghi đè `highValue`.

Tùy chọn

Tên	Loại	Mặc định	Nội dung mô tả
filterColumnIndex	number	không có	Cột của bảng dữ liệu mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnLabel`. Nếu có cả hai, thì phương án này sẽ được ưu tiên. Phải trỏ đến một cột thuộc loại `number`.
filterColumnLabel	string	không có	Nhãn của cột mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên. Phải trỏ đến một cột thuộc loại `number`.
minValue	Ngày	tự động	Giá trị tối thiểu được phép cho phạm vi thấp hơn. Nếu không xác định, giá trị sẽ được suy ra từ nội dung của DataTable do tính năng điều khiển quản lý.
maxValue	Ngày	tự động	Giá trị tối đa được phép cho phạm vi cao hơn. Nếu không xác định, giá trị sẽ được suy ra từ nội dung của DataTable do tính năng điều khiển quản lý.
ui	Đối tượng	null	Đối tượng có các thành phần để định cấu hình nhiều chương trình thành phần trên giao diện người dùng của chế độ điều khiển. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {label: 'Age', labelSeparator: ':'}
ui.format	Đối tượng	không có	Cách biểu diễn ngày dưới dạng chuỗi. Chấp nhận mọi định dạng ngày hợp lệ.
ui.step	string	ngày	Thay đổi tối thiểu có thể có khi kéo hình thu nhỏ thanh trượt: có thể là bất kỳ đơn vị thời gian nào cho đến "ngày". ("tháng" và "năm" chưa được hỗ trợ.)
ui.ticks	number	tự động	Số kim đánh dấu nhịp độ khung hình (vị trí cố định trong thanh phạm vi) mà ngón tay cái dạng thanh trượt có thể chiếm.
ui.unitIncrement	string	"1"	Giá trị tăng dần theo đơn vị tăng của phạm vi phạm vi. Độ gia tăng đơn vị tương đương với việc sử dụng các phím mũi tên để di chuyển một nút thu trượt.
ui.blockIncrement	number	10	Giá trị tăng dần cho số gia khối của các phần mở rộng phạm vi. Mức tăng khối tương đương với việc sử dụng các phím pgUp và pgDown để di chuyển ngón cái của thanh trượt.
ui.showRangeValues	boolean	đúng	Liệu có nhãn bên cạnh thanh trượt hiển thị phạm vi của phạm vi đã chọn hay không.
ui.orientation	string	"ngang"	Hướng của thanh trượt. `'horizontal'` hoặc `'vertical'`.
ui.label	string	tự động	Nhãn để hiển thị bên cạnh thanh trượt. Nếu bạn không chỉ định, nhãn của cột nơi chế độ điều khiển hoạt động sẽ được sử dụng.
ui.labelSeparator	string	không có	Một chuỗi dòng phân cách đã thêm vào nhãn để phân tách nhãn khỏi thanh trượt một cách trực quan.
ui.labelStacking	string	"ngang"	Nhãn sẽ hiển thị ở trên (xếp chồng theo chiều dọc) hay bên cạnh (xếp chồng theo chiều ngang) thanh trượt. Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-rangefilter'	Lớp CSS để gán cho thành phần điều khiển nhằm tạo kiểu tuỳ chỉnh.

NumberRangeFilter

Thanh trượt có giá trị kép để chọn các khoảng giá trị số.

Tiểu bang

Tên	Loại	Mặc định	Nội dung mô tả
lowValue	number	không có	Phạm vi thấp hơn của phạm vi đã chọn, tính cả hai giá trị này.
highValue	number	không có	Phạm vi lớn hơn của dải ô đã chọn, tính toàn bộ.
lowThumbAtMinimum	boolean	không có	Liệu ngón cái dưới của thanh trượt có được khoá ở phạm vi tối thiểu cho phép hay không. Nếu được đặt, hãy ghi đè `lowValue`.
highThumbAtMaximum	boolean	không có	Liệu ngón cái phía trên của thanh trượt có bị khoá ở phạm vi tối đa cho phép hay không. Nếu được đặt, hãy ghi đè `highValue`.

Tùy chọn

Tên	Loại	Mặc định	Nội dung mô tả
filterColumnIndex	number	không có	Cột của bảng dữ liệu mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnLabel`. Nếu có cả hai, thì phương án này sẽ được ưu tiên. Phải trỏ đến một cột thuộc loại `number`.
filterColumnLabel	string	không có	Nhãn của cột mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên. Phải trỏ đến một cột thuộc loại `number`.
minValue	number	tự động	Giá trị tối thiểu được phép cho phạm vi thấp hơn. Nếu không xác định, giá trị sẽ được suy ra từ nội dung của DataTable do tính năng điều khiển quản lý.
maxValue	number	tự động	Giá trị tối đa được phép cho phạm vi cao hơn. Nếu không xác định, giá trị sẽ được suy ra từ nội dung của DataTable do tính năng điều khiển quản lý.
ui	Đối tượng	null	Đối tượng có các thành phần để định cấu hình nhiều chương trình thành phần trên giao diện người dùng của chế độ điều khiển. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {label: 'Age', labelSeparator: ':'}
ui.format	Đối tượng	không có	Cách biểu diễn số dưới dạng chuỗi. Chấp nhận mọi định dạng số hợp lệ.
ui.step	number	1 hoặc được tính từ `ticks` nếu được xác định	Thay đổi tối thiểu có thể khi kéo thanh trượt thích.
ui.ticks	number	tự động	Số kim đánh dấu nhịp độ khung hình (vị trí cố định trong thanh phạm vi) mà ngón tay cái dạng thanh trượt có thể chiếm.
ui.unitIncrement	number	1	Giá trị tăng dần theo đơn vị tăng của phạm vi phạm vi. Độ gia tăng đơn vị tương đương với việc sử dụng các phím mũi tên để di chuyển một nút thu trượt.
ui.blockIncrement	number	10	Giá trị tăng dần cho số gia khối của các phần mở rộng phạm vi. Mức tăng khối tương đương với việc sử dụng các phím pgUp và pgDown để di chuyển ngón cái của thanh trượt.
ui.showRangeValues	boolean	đúng	Liệu có nhãn bên cạnh thanh trượt hiển thị phạm vi của phạm vi đã chọn hay không.
ui.orientation	string	"ngang"	Hướng của thanh trượt. `'horizontal'` hoặc `'vertical'`.
ui.label	string	tự động	Nhãn để hiển thị bên cạnh thanh trượt. Nếu bạn không chỉ định, nhãn của cột nơi chế độ điều khiển hoạt động sẽ được sử dụng.
ui.labelSeparator	string	không có	Một chuỗi dòng phân cách đã thêm vào nhãn để phân tách nhãn khỏi thanh trượt một cách trực quan.
ui.labelStacking	string	"ngang"	Nhãn sẽ hiển thị ở trên (xếp chồng theo chiều dọc) hay bên cạnh (xếp chồng theo chiều ngang) thanh trượt. Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-rangefilter'	Lớp CSS để gán cho thành phần điều khiển nhằm tạo kiểu tuỳ chỉnh.

StringFilter

Một trường nhập dữ liệu đơn giản cho phép bạn lọc dữ liệu thông qua tính năng so khớp chuỗi. Trường này cập nhật sau mỗi lần nhấn phím: thử nhập j để thu hẹp bảng bên dưới chỉ còn John và Jessica.

Tiểu bang

Tên	Loại	Mặc định	Nội dung mô tả
value	chuỗi hoặc đối tượng	không có	Văn bản hiện đang được nhập trong trường nhập dữ liệu điều khiển.

Tùy chọn

Tên	Loại	Mặc định	Nội dung mô tả
filterColumnIndex	number	không có	Cột của bảng dữ liệu mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnLabel`. Nếu có cả hai, thì phương án này sẽ được ưu tiên.
filterColumnLabel	string	không có	Nhãn của cột mà bộ lọc phải hoạt động. Bạn bắt buộc phải cung cấp tuỳ chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên.
matchType	string	"tiền tố"	Liệu chế độ kiểm soát chỉ khớp các giá trị chính xác (`'exact'`), các tiền tố bắt đầu từ đầu giá trị (`'prefix'`) hay chuỗi con (`'any'`) bất kỳ.
caseSensitive	boolean	false	Liệu kết quả khớp có phân biệt chữ hoa chữ thường hay không.
useFormattedValue	boolean	false	Liệu chế độ kiểm soát này sẽ khớp với giá trị được định dạng ô hay giá trị thực tế lặp lại.
ui	Đối tượng	null	Đối tượng có các thành phần để định cấu hình nhiều chương trình thành phần trên giao diện người dùng của chế độ điều khiển. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger	boolean	đúng	Liệu chế độ điều khiển này có khớp với bất cứ khi nào người dùng nhấn một phím hay chỉ khi trường nhập dữ liệu "thay đổi" (mất tiêu điểm hoặc nhấn phím Enter).
ui.label	string	tự động	Nhãn xuất hiện bên cạnh trường nhập dữ liệu. Nếu bạn không chỉ định, nhãn của cột mà chế độ điều khiển hoạt động sẽ được sử dụng.
ui.labelSeparator	string	không có	Một chuỗi dòng phân cách đã thêm vào nhãn để phân tách nhãn với trường nhập dữ liệu một cách trực quan.
ui.labelStacking	string	"ngang"	Liệu nhãn sẽ hiển thị ở phía trên (xếp chồng theo chiều dọc) hay bên cạnh (xếp chồng theo chiều ngang) trường nhập dữ liệu. Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-stringfilter'	Lớp CSS để gán cho thành phần điều khiển nhằm tạo kiểu tuỳ chỉnh.