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 mà họ hiển thị.

Tổng quan

Trang tổng quan là một cách đơn giản để sắp xếp và quản lý nhiều biểu đồ có chung 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ể tự giải phóng gánh nặng của việc kết nối và điều phối tất cả biểu đồ trong một trang tổng quan.

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

Các thành phần điều khiển là các tiện ích 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 để thúc đẩy dữ liệu do một trang tổng quan quản lý và các biểu đồ trong đó.

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

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

Lưu ý: Trang tổng quan có tính tương tác. Hãy thử vận hành các nút điều khiển 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 trang tổng quan 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 họa tất cả các bước dưới đây, sau đó là thông tin chi tiết về từng bước.

Tạo bộ khung HTML cho trang tổng quan. Trang của bạn phải có số lượng phần tử HTML cần thiết để giữ lại mọi thành phần của một trang tổng quan. Trong đó có cả trang tổng quan cũng như mọi tùy chọn điều khiển và biểu đồ trên trang tổng quan đó. Thông thường, bạn sẽ sử dụng <div> cho mỗi biến.
Tải thư viện của bạn. Trang tổng quan chỉ yêu cầu đưa hoặc tải hai thư viện trên trang: API Google AJAX và gói controls Hình ảnh trực quan của Google.
Chuẩn bị dữ liệu. Bạn cần chuẩn bị dữ liệu để hình ảnh hoá; nghĩa là bạn phải tự chỉ định dữ liệu trong mã hoặc truy vấn trang web từ xa để lấy dữ liệu.
Tạo một phiên bản trang tổng quan. Tạo bản sao của trang tổng quan bằng cách gọi hàm khởi tạo và truyền tham chiếu đến phần tử <div> sẽ giữ lại.
Tạo các chế độ điều khiển và biểu đồ theo nhu cầu. Tạo các thực thể google.visualization.ChartWrapper và google.visualization.ControlWrapper để mô tả từng biểu đồ và quyền kiểm soát mà trang tổng quan quản lý.
Thiết lập phần phụ thuộc. Gọi bind() trên trang tổng quan, đồng thời chuyển vào các trường hợp kiểm soát và biểu đồ để cho trang tổng quan biết nội dung cần quản lý. Khi một biện pháp kiểm soát và biểu đồ được liên kết với nhau, trang tổng quan sẽ cập nhật biểu đồ để phù hợp với các ràng buộc mà biện pháp 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à chuyển dữ liệu để vẽ toàn bộ trang tổng quan trên trang.
Các thay đổi có lập trình sau khi vẽ. Nếu muốn, sau khi vẽ lần đầu, bạn có thể tự điều khiển các thành phần điều khiển trên trang tổng quan và yêu cầu trang tổng quan cập nhật biểu đồ để phản hồi yêu cầu đó.

Sau đây là ví dụ đơn giản về một trang tạo trang tổng quan đơn giản, trong đó thanh trượt phạm vi thúc đẩy biểu đồ hình tròn. Trang tổng quan thu được 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>) để lưu giữ cả chính trang tổng quan đó và mọi phần điều khiển cũng như biểu đồ trên trang tổng quan đó. Khi tạo bản sao của trang tổng quan, bảng điều khiển và biểu đồ, bạn phải chuyển tệp tham chiếu đến phần tử của bản sao đó, vì vậy hãy chỉ định mã nhận dạng cho từng 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ể tùy ý định vị từng thành phần HTML mà bạn muốn trên trang tổng quan.

2. Tải thư viện

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

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

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

Khi API Hình ảnh được tải, google.charts.setOnLoadCallback() sẽ gọi hàm xử lý để bạn biết rằng tất cả các phương thức và lớp trợ giúp bắt buộc 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 một DataTable, giống như biểu đồ.

4. Tạo một bản sao của trang tổng quan

Sau khi tạo dữ liệu, bạn có thể tạo bản sao đối tượng của trang tổng quan. Một hàm dựng của trang tổng quan có một tham số: tham chiếu đến phần tử DOM, trong đó sẽ vẽ trang tổng quan.

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

Trang tổng quan sẽ hiển thị dưới dạng lớp JavaScript. Sau khi tạo bản sao của trang tổng quan, bạn có thể thực hiện một số bước không bắt buộc, chẳng hạn như thêm trình nghe sự kiện (chẳng hạn như 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ư các biểu đồ, vì vậy, hãy tham khảo phần Xử lý sự kiện hình ảnh hoặc Lỗi hiển thị tốt trong phần biểu đồ để biết thêm thông tin.

5. Tạo thực thể đối chứng và biểu đồ

Xác định số lượng thực thể cần thiết cho mỗi tùy chọn điều khiển và biểu đồ trên trang tổng quan. Sử dụng google.visualization.ChartWrapper và google.visualization.ControlWrapper để xác định biểu đồ và các tùy chọn điều khiển 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, đừng chỉ định tham số dataTable hoặc dataSourceUrl. Trang tổng quan này đảm nhận việc cung 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 các tùy chọn điều khiển.

Một số mẹo về cách định cấu hình các tùy chọn kiểm soát và biểu đồ:

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

Sử dụng tuỳ chọn cấu hình state trên các tuỳ chọn điều khiển để khởi tạo các trạng thái đó với trạng thái rõ ràng khi được vẽ lần đầu. Ví dụ: sử dụng chế độ cài đặt này để cố định vị trí ban đầu của ngón tay cái trong phạm vi điều khiển thanh trượt 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ả biểu đồ thuộc một trang tổng quan đều có cùng bảng dữ liệu cơ bản mà bạn đã chuẩn bị trong bước Chuẩn bị dữ liệu. Tuy nhiên, biểu đồ thường yêu cầu một cách sắp xếp các cột cụ thể để hiển thị chính xác: ví dụ: biểu đồ hình tròn yêu cầu cột cột cho nhãn, theo sau là cột số cho giá trị.

Sử dụng tuỳ chọn view trong khi định cấu hình từng phiên bản ChartWrapper để khai báo cột nào phù hợp với 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 bản sao của cả trang tổng quan cũng như mọi tùy chọn điều khiển và biểu đồ, hãy sử dụng phương thức bind() để cho trang tổng quan biết các phần phụ thuộc tồn tại giữa các tuỳ chọn điều khiển và biểu đồ.

Khi một biện pháp kiểm soát và biểu đồ được liên kết với nhau, trang tổng quan sẽ cập nhật biểu đồ để phù hợp với các điều kiện ràng buộc mà biện pháp kiểm soát này 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 sẽ đượ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 thanh trượt trước đó, thanh trượt sau sẽ cập nhật để chỉ hiển thị dữ liệu khớp với phạm vi đã 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 tùy chọn điều khiển và biểu đồ trong nhiều chế độ 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 có 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 đồ đó cho phù hợp với các điều kiện ràng buộc kết hợp mà tất cả chế độ điều khiển ràng buộc đều thực thi. Đồng thời, biện pháp kiểm soát có thể thúc đẩy đồng thời nhiều biểu đồ. Để chỉ định nhiều liên kết cùng một lúc, hãy truyền các mảng vào phương thức bind() thay vì các phiên bản đơn 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ách 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ụ 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 để hiển thị toàn bộ trang tổng quan. Phương thức draw() chỉ nhận 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ụ: thêm các chế độ điều khiển hoặc biểu đồ mới vào trang tổng quan) hoặc thay đổi DataTable tổng thể hỗ trợ nó.

Phiên bản trang tổng quan này 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 đồ trong đó. Một sự kiện error sẽ được kích hoạt nếu không có điều khiển hoặc biểu đồ nào được quản lý vẽ được. Để tìm hiểu thêm về cách xử lý các 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 trang tổng quan hoặc vẽ lại sự kiện đó.

8. Các thay đổi có lập trình sau khi vẽ

Sau khi hoàn tất draw() ban đầu, trang tổng quan sẽ hoạt động và tự động phản hồi vớ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 trên trang tổng quan).

Nếu cần thay đổi trạng thái trên 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 hoạt động trực tiếp trên các phiên bản ControlWrapper và ChartWrapper. Quy tắc chung là thực hiện mọi thay đổi mà bạn cần ngay trên phiên bản ControlWrapper (hoặc ChartWrapper) cụ thể, ví dụ: thay đổi một tuỳ chọn hoặc trạng thái điều khiển tương ứng qua setOption() và setState(), rồi gọi phương thức draw() sau đó. Sau đó, trang tổng quan sẽ cập nhật cho phù hợp với các thay đổi đã yêu cầu.

Ví dụ sau đây 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 mà API Trang tổng quan và Điều khiển hiển thị, cũng như các phương thức tiêu chuẩn mà tất cả các chế độ điều khiển đều hiển thị.

Trang tổng quan

Biểu diễn tập hợp các biện pháp kiểm soát và biểu đồ cộng tác có 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 pháp

Trang tổng quan hiển thị các phương thức sau:

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

Phương thức	Loại dữ liệu trả về	Mô tả
`bind(controls, charts)`	google.Visualization.Dashboard	Liên kết một hoặc nhiều tùy chọn Điều khiển với một hoặc nhiều người tham gia khác trên trang tổng quan (biểu đồ hoặc các chế độ điều khiển khác) để tất cả các chế độ điều khiển sau đây được vẽ lại bất cứ khi nào có chế độ tương tác với người dùng 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ề bản sao trang tổng quan để liên kết nhiều lệnh gọi `bind()` với nhau. điều khiển – Một hoặc một mảng gồm các thực thể `google.visualization.ControlWrapper` xác định các tùy chọn điều khiển để liên kết. biểu đồ – Một biểu đồ hoặc một mảng `google.visualization.ChartWrapper` xác định biểu đồ mà các biểu đồ sẽ mang lại.
`draw(dataTable)`	Không	Vẽ trang tổng quan. dataTable – Bất kỳ nội dung nào sau đây: đối tượng `DataTable`; đối tượng `DataView`; nội dung biểu diễn JSON của DataTable; hoặc một mảng theo cú pháp của google.Visualization.arrayToDataTable() .
`getSelection()`	Mảng đối tượng	Trả về một mảng các thực thể hình ảnh đã 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ề tổng hợp 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 tham chiếu duy nhất khi làm việc với các 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 tùy chọn Điều khiển với một hoặc nhiều người tham gia khác trên trang tổng quan (biểu đồ hoặc các chế độ điều khiển khác) để tất cả các chế độ điều khiển sau đây được vẽ lại bất cứ khi nào có chế độ tương tác với người dùng 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ề bản sao trang tổng quan để liên kết nhiều lệnh gọi bind() với nhau.

điều khiển – Một hoặc một mảng gồm các thực thể google.visualization.ControlWrapper xác định các tùy chọn điều khiển để liên kết.
biểu đồ – Một biểu đồ hoặc một mảng google.visualization.ChartWrapper xác định biểu đồ mà các biểu đồ sẽ mang lại.

draw(dataTable)

Không

Vẽ trang tổng quan.

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

getSelection()

Mảng đối tượng

Trả về một mảng các thực thể hình ảnh đã 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ề tổng hợp 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 tham chiếu duy nhất khi làm việc với các 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 gửi những 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 Mô tả Thuộc tính

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

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

ready

Trang tổng quan đã hoàn tất thao tác vẽ và sẵn sàng chấp nhận các thay đổi. Tất cả các tùy chọn điều khiển và biểu đồ trong trang tổng quan đều đã sẵn sàng cho thao tác gọi và tương tác với phương thức bên ngoài. Nếu muốn thay đổi trang tổng quan (hoặc dữ liệu mà trang này 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 kích hoạt sự kiện.

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

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

Không

ControlWrapper

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

Hàm dựng

ControlWrapper(opt_spec)

opt_spec: [Không bắt buộc] – Một đối tượng JSON xác định phương thức điều khiển hoặc phiên bản chuỗ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 thì bạn phải đặt tất cả các thuộc tính phù hợp bằng các phương thức set... do ControlWrapper hiển thị.

Thuộc tính	Loại	Bắt buộc	Mặc định	Mô tả
ControlType	Chuỗi	Bắt buộc	không có	Tên lớp của tùy chọn điều khiển. Bạn có thể bỏ qua tên gói `google.visualization` cho các chế độ điều khiển của Google. Ví dụ: `CategoryFilter`, `NumberRangeFilter`.
Mã vùng chứa	Chuỗi	Bắt buộc	không có	Mã của phần tử DOM trên trang của bạn sẽ lưu trữ tùy chọn điều khiển.
tùy chọn	Đối tượng	Không bắt buộc	không có	Một đối tượng mô tả các tuỳ chọn đ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}`
tiểu bang	Đối tượng	Không bắt buộc	không có	Một đối tượng mô tả trạng thái của tùy chọn điều khiển này. Trạng thái này thu thập tất cả các biến mà người dùng đang điều khiển có thể ảnh hưởng. Ví dụ: trạng thái của thanh trượt phạm vi có thể được mô tả bằng các vị trí mà thanh trượt thấp và cao của thanh trượt chiếm. 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ụ: `"state": {"lowValue": 20, "highValue": 50}`

Phương pháp

ControlWrapper hiện các phương thức bổ sung sau:

Phương thức	Loại dữ liệu trả về	Mô tả
`draw()`	Không	Vẽ chế độ điều khiển. Thông thường, trang tổng quan lưu giữ nút điều khiển sẽ xử lý việc vẽ trang tổng quan. Bạn nên gọi `draw()` để buộc vẽ lại phương thức điều khiển sau khi bạn thay đổi bất kỳ chế độ cài đặt nào khác, như tuỳ chọn hoặc trạng thái.
`toJSON()`	Chuỗi	Trả về phiên bản chuỗi của đại diện JSON của tùy chọn điều khiển.
`clone()`	ControlWrapper	Trả về 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 tùy chọn điều khiển. Nếu đây là quyền kiểm soát của Google, thì tên đó sẽ không đủ điều kiện kèm theo `google.visualization`. Ví dụ: nếu đây là chế độ kiểm soát Danh mục, quyền 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()`	Kiểm soát tham chiếu đối tượng	Trả về tham chiếu đến điều khiển do ControlWrapper này tạo ra. Hàm 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 đang 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 sẽ đặt lại trạng thái điều khiển về trạng thái đã khởi tạo (như đặt lại phần tử biểu mẫu HTML).
`getContainerId()`	Chuỗi	Mã của phần tử vùng chứa DOM của đối chứng.
`getOption(key, opt_default_val)`	Mọi loại	Trả về giá trị tùy chọn điều khiển được chỉ định khoá – Tên của tuỳ chọn truy xuất. Có thể là 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ị đã chỉ định 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 tuỳ chọn điều khiển này.
`getState()`	Đối tượng	Trả về trạng thái điều khiển.
`setControlType(type)`	Không	Đặt loại điều khiển. Truyền tên lớp của tùy chọn điều khiển để tạo bản sao. Nếu đây là chế độ kiểm soát của Google, thì bạn không nên sử dụng chế độ kiểm soát này của `google.visualization`. Ví dụ: đối với thanh trượt phạm vi trên một cột số, hãy chuyển vào "NumberRangeFilter".
`setControlName(name)`	Không	Đặt tên tuỳ ý cho nút điều khiển. Thông tin này không xuất hiện ở vị trí bất kỳ trong chế độ kiểm soát, mà chỉ để bạn tham khảo.
`setContainerId(id)`	Không	Đặt mã của phần tử DOM chứa thành phần điều khiển.
`setOption(key, value)`	Không	Đặt một giá trị cho tuỳ chọn điều khiển, trong đó khoá là tên tuỳ chọn và giá trị là giá trị. Để bỏ thiết lập một tuỳ chọn, hãy truyền giá trị rỗng vào giá trị này. Xin lưu ý rằng khoá có thể là tên đủ điều kiện, chẳng hạn như `'vAxis.title'`.
`setOptions(options_obj)`	Không	Đặt một đối tượng tùy chọn hoàn chỉnh cho nút điều khiển.
`setState(state_obj)`	Không	Đặt trạng thái đ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ế độ điều khiển đó có thể ảnh hưởng đến. Ví dụ: trạng thái của thanh trượt phạm vi có thể được mô tả bằng các vị trí mà thanh trượt 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. Xin lưu ý rằng bạn phải gọi ControlWrapper.draw() (hoặc vẽ trang tổng quan để nắm quyền kiểm soát) trước khi gửi bất kỳ sự kiện nào.

Tên	Mô tả	Thuộc tính
`error`	Được kích hoạt khi xảy ra lỗi khi cố gắng kết xuất đ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 nút đ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 đó sau khi sự kiện được kích hoạt. Ngoài ra, bạn chỉ có thể theo dõi một sự kiện `ready` trên trang tổng quan, chỉ giữ phương thức điều khiển và kiểm soát cuộc gọi sau khi sự kiện đó được kích hoạt.	Không
`statechange`	Được kích hoạt khi người dùng tương tác với tùy chọn điều khiển, ảnh hưởng đến trạng thái của tùy chọ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 tay cái của thanh trượt phạm vi điều khiển. Để truy xuất trạng thái điều khiển cập nhật sau khi sự kiện được kích hoạt, hãy gọi `ControlWrapper.getState()`.	Không

Trình theo dõi biểu đồ

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.

Lưu ý sau đây khi sử dụng ChartWrapper trong trang tổng quan:

Đừng đặt rõ ràng các thuộc tính dataTable, query, dataSourceUrl và refreshInterval. Trang tổng quan lưu giữ biểu đồ sẽ đảm nhận việc cung cấp dữ liệu cho biểu đồ đó.
Hãy đặt thuộc tính view của thuộc tính này để khai báo cột nào trong số đó, bao gồm các cột hiện có trong dataTable cho trang tổng quan, phù hợp với biểu đồ, như minh hoạ trong phần Tạo các thực thể kiểm soát và biểu đồ.

Thư viện điều khiển

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

Bạn có thể dùng bất kỳ tham số nào trong số đó làm tham số cho ControlWrapper.setControlType().

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

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

Tiểu bang

Tên	Loại	Mặc định	Mô tả
giá trị đã chọn	Một loạt các đối tượng hoặc loại 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 các giá trị có thể chọn tổng thể do tùy chọn `values` xác định (mọi giá trị không liên quan sẽ bị bỏ qua). Nếu `CategoryFilter` không cho phép chọn nhiều câu trả lời, thì chỉ giá trị đầu tiên của mảng được giữ lại.

Tùy chọn

Tên	Loại	Mặc định	Mô tả
indexCột	number	không có	Cột của bảng dữ liệu mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnLabel`. Nếu có cả hai, tuỳ chọn này sẽ được ưu tiên.
Nhãn cột lọc	chuỗi	không có	Nhãn của cột mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên hơ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, chúng phải có một bản trình bày `toString()` phù hợp để hiển thị cho người dùng. Nếu giá trị rỗng hoặc không xác định, danh sách các giá trị sẽ được tính toán tự động từ các giá trị có trong cột DataTable mà tùy chọn kiểm soát này hoạt động.
sử dụng giá trị định dạng	boolean	sai	Khi tự động điền danh sách các giá trị có thể chọn từ cột DataTable, bộ lọc này sẽ hoạt động, dù bạn sử dụng giá trị ô thực tế hay giá trị đã định dạng.
giao diện người dùng	Đối tượng	null	Một đối tượng có thành viên để định cấu hình các thành phần khác nhau trên giao diện người dùng của tùy chọn điều khiển. Để chỉ định 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ạ bên dưới: {label: 'Metric', labelSeparator: ':'}
giao diện người dùng ui.caption	chuỗi	"Chọn một giá trị..."	Phụ đề để hiển thị bên trong tiện ích bộ chọn giá trị khi không có mục nào được chọn.
Giao diện người dùng ui.sortValues	boolean	đúng	Liệu có nên sắp xếp các giá trị để chọn hay không.
ui.selectedValuesLayout	chuỗi	"sang một bên"	Cách hiển thị các giá trị đã chọn khi cho phép nhiều lựa chọn. 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 nhập không thể vừa với bộ chọn sẽ bọc trong 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 giá trị nào hay không. Nếu `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 động kiểm soát, nếu bạn đặt tùy chọn thành `false` và không có trạng thái `selectedValues` nào, giá trị đầu tiên trong số 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ị hay không, thay vì chỉ một giá trị.
giao diện người dùng allow.allowTyping	boolean	đúng	Người dùng có được phép nhập vào một trường văn bản để thu hẹp danh sách các lựa chọn có thể có (thông qua một trình tự động hoàn thành) hay không.
nhãn ui.ui	chuỗi	tự động	Nhãn hiển thị bên cạnh bộ chọn danh mục. Nếu không xác định thì nhãn của cột mà chế độ điều khiển hoạt động sẽ được sử dụng.
ui.labelSeparator	chuỗi	không có	Một chuỗi phân tách được gắn vào nhãn để phân tách nhãn trực quan khỏi bộ chọn danh mục.
ui.labelStacking	chuỗi	"ngang"	Liệu nhãn nên hiển thị ở trên (ngăn xếp 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'`.
Giao diện người dùng ui.cssClass	chuỗi	"google-Visualization-controls-categoryfilter"	Lớp CSS để gán cho tùy chọn điều khiển dành cho kiểu tùy chỉnh.

FilterRangeFilter

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

Tiểu bang

Tên	Loại	Mặc định	Mô tả
dải_ô_bắt_đầu	số, ngày, ngày giờ hoặc giờ trong ngày	Giá trị bắt đầu phạm vi	Điểm bắt đầu của phạm vi đã chọn, bao gồm.
dải_ô.end	số, ngày, ngày giờ hoặc giờ trong ngày	Giá trị cuối phạm vi	Kết thúc phạm vi đã chọn, bao gồm.

Tùy chọn

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

Sự kiện

Bổ sung cho các sự kiện ControlWrapper:

Tên	Mô tả	Thuộc tính
`statechange`	Giống như tài liệu cho mọi ControlWrapper, chỉ có một thuộc tính boolean bổ sung, `inProgress`, cho biết liệu trạng thái hiện có đang được thay đổi hay không (một trong hai ngón tay cái hoặc phạm vi đang được kéo).	đang diễn ra

Bộ lọc phạm vi ngày

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

Hãy thử di chuyển thanh trượt để thay đổi những hàng sẽ hiển thị trong bảng bên dưới.

Tiểu bang

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

Tùy chọn

Tên	Loại	Mặc định	Mô tả
indexCột	number	không có	Cột của bảng dữ liệu mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnLabel`. Nếu có cả hai, tuỳ chọn này sẽ được ưu tiên. Phải trỏ đến một cột có loại `number`.
Nhãn cột lọc	chuỗi	không có	Nhãn của cột mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên hơn. Phải trỏ đến một cột có loại `number`.
giá trị tối thiểu	Ngày	tự động	Giá trị tối thiểu được phép trong phạm vi thấp hơn. Nếu không xác định thì giá trị sẽ được suy ra từ nội dung của DataTable do quyền kiểm soát quản lý.
giá trị tối đa	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 thì giá trị sẽ được suy ra từ nội dung của DataTable do quyền kiểm soát quản lý.
giao diện người dùng	Đối tượng	null	Một đối tượng có thành viên để định cấu hình các thành phần khác nhau trên giao diện người dùng của tùy chọn điều khiển. Để chỉ định 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ạ bên dưới: {label: 'Age', labelSeparator: ':'}
giao diện người dùng ui.format	Đối tượng	không có	Cách biểu thị ngày dưới dạng một chuỗi. Chấp nhận mọi định dạng ngày hợp lệ.
giao diện người dùng	chuỗi	ngày	Sự thay đổi tối thiểu có thể xảy ra khi kéo ngón tay cái trượt: có thể là bất kỳ đơn vị thời gian nào cho đến "ngày". ("month" và "year" chưa được hỗ trợ.)
giao diện người dùng	number	tự động	Số kim đánh dấu (các vị trí cố định trong thanh phạm vi) mà ngón tay cái có thể chiếm.
giao diện người dùng ui.unitIncrement	chuỗi	'1'	Lượng tăng theo đơn vị gia tăng của phạm vi. Mức 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 nút trượt thanh trượt.
giao diện người dùng ui.blockIncrement	number	10	Mức tăng theo khoảng tăng của phạm vi. Mức tăng khối lượng tương đương với việc sử dụng phím pgUp và pgDown để di chuyển ngón tay cái của thanh trượt.
giao diện người dùng chương trình	boolean	đúng	Xác định xem có nhãn bên cạnh thanh trượt sẽ hiển thị phạm vi của phạm vi đã chọn hay không.
giao diện người dùng	chuỗi	"ngang"	Hướng thanh trượt. `'horizontal'` hoặc `'vertical'`.
nhãn ui.ui	chuỗi	tự động	Nhãn để hiển thị bên cạnh thanh trượt. Nếu không xác định thì nhãn của cột mà chế độ điều khiển sẽ hoạt động sẽ được sử dụng.
ui.labelSeparator	chuỗi	không có	Một chuỗi phân tách được gắn vào nhãn để phân tách nhãn khỏi thanh trượt theo cách trực quan.
ui.labelStacking	chuỗi	"ngang"	Thanh trượt sẽ hiển thị ở phía trên (chế độ xếp chồng theo chiều dọc) hay bên cạnh (chế độ xếp chồng theo chiều ngang). Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
Giao diện người dùng ui.cssClass	chuỗi	"google-Visualization-controls-rangefilter"	Lớp CSS để gán cho tùy chọn điều khiển dành cho kiểu tùy chỉnh.

Bộ lọc số dải ô

Thanh trượt hai giá trị để chọn các dải giá trị số.

Tiểu bang

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

Tùy chọn

Tên	Loại	Mặc định	Mô tả
indexCột	number	không có	Cột của bảng dữ liệu mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnLabel`. Nếu có cả hai, tuỳ chọn này sẽ được ưu tiên. Phải trỏ đến một cột có loại `number`.
Nhãn cột lọc	chuỗi	không có	Nhãn của cột mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên hơn. Phải trỏ đến một cột có loại `number`.
giá trị tối thiểu	number	tự động	Giá trị tối thiểu được phép trong phạm vi thấp hơn. Nếu không xác định thì giá trị sẽ được suy ra từ nội dung của DataTable do quyền kiểm soát quản lý.
giá trị tối đa	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 thì giá trị sẽ được suy ra từ nội dung của DataTable do quyền kiểm soát quản lý.
giao diện người dùng	Đối tượng	null	Một đối tượng có thành viên để định cấu hình các thành phần khác nhau trên giao diện người dùng của tùy chọn điều khiển. Để chỉ định 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ạ bên dưới: {label: 'Age', labelSeparator: ':'}
giao diện người dùng 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ệ.
giao diện người dùng	number	1 hoặc được tính từ `ticks` nếu được xác định	Sự thay đổi tối thiểu có thể xảy ra khi kéo ngón tay cái của thanh trượt.
giao diện người dùng	number	tự động	Số kim đánh dấu (các vị trí cố định trong thanh phạm vi) mà ngón tay cái có thể chiếm.
giao diện người dùng ui.unitIncrement	number	1	Lượng tăng theo đơn vị gia tăng của phạm vi. Mức 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 nút trượt thanh trượt.
giao diện người dùng ui.blockIncrement	number	10	Mức tăng theo khoảng tăng của phạm vi. Mức tăng khối lượng tương đương với việc sử dụng phím pgUp và pgDown để di chuyển ngón tay cái của thanh trượt.
giao diện người dùng chương trình	boolean	đúng	Xác định xem có nhãn bên cạnh thanh trượt sẽ hiển thị phạm vi của phạm vi đã chọn hay không.
giao diện người dùng	chuỗi	"ngang"	Hướng thanh trượt. `'horizontal'` hoặc `'vertical'`.
nhãn ui.ui	chuỗi	tự động	Nhãn để hiển thị bên cạnh thanh trượt. Nếu không xác định thì nhãn của cột mà chế độ điều khiển sẽ hoạt động sẽ được sử dụng.
ui.labelSeparator	chuỗi	không có	Một chuỗi phân tách được gắn vào nhãn để phân tách nhãn khỏi thanh trượt theo cách trực quan.
ui.labelStacking	chuỗi	"ngang"	Thanh trượt sẽ hiển thị ở phía trên (chế độ xếp chồng theo chiều dọc) hay bên cạnh (chế độ xếp chồng theo chiều ngang). Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
Giao diện người dùng ui.cssClass	chuỗi	"google-Visualization-controls-rangefilter"	Lớp CSS để gán cho tùy chọn điều khiển dành cho kiểu tùy chỉnh.

Bộ lọc chuỗi

Một trường nhập văn bản đơ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. Bảng này sẽ 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 cho John và Jessica.

Tiểu bang

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

Tùy chọn

Tên	Loại	Mặc định	Mô tả
indexCột	number	không có	Cột của bảng dữ liệu mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnLabel`. Nếu có cả hai, tuỳ chọn này sẽ được ưu tiên.
Nhãn cột lọc	chuỗi	không có	Nhãn của cột mà bộ lọc sẽ hoạt động. Bạn phải cung cấp tùy chọn này hoặc `filterColumnIndex`. Nếu có cả hai, `filterColumnIndex` sẽ được ưu tiên hơn.
kiểu khớp	chuỗi	"tiền tố"	Quyền kiểm soát chỉ nên khớp với các giá trị chính xác (`'exact'`), tiền tố bắt đầu từ đầu giá trị (`'prefix'`) hay bất kỳ chuỗi con nào (`'any'`).
Phân biệt chữ hoa chữ thường	boolean	sai	Việc so khớp có nên phân biệt chữ hoa chữ thường hay không.
sử dụng giá trị định dạng	boolean	sai	Liệu biện pháp kiểm soát có cần khớp với các giá trị được định dạng ô hay giá trị thực tế lại.
giao diện người dùng	Đối tượng	null	Một đối tượng có thành viên để định cấu hình các thành phần khác nhau trên giao diện người dùng của tùy chọn điều khiển. Để chỉ định 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ạ bên dưới: {label: 'Name', labelSeparator: ':'}
giao diện người dùng thời gian thực	boolean	đúng	Liệu chế độ điều khiển có khớp với bất cứ khi nào một phím được nhấn 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).
nhãn ui.ui	chuỗi	tự động	Nhãn hiển thị bên cạnh trường nhập dữ liệu. Nếu không xác định thì nhãn của cột mà chế độ điều khiển hoạt động sẽ được sử dụng.
ui.labelSeparator	chuỗi	không có	Một chuỗi phân tách được thêm vào nhãn để phân tách nhãn khỏi trường nhập dữ liệu.
ui.labelStacking	chuỗi	"ngang"	Liệu nhãn có nên hiển thị ở trên (ngăn xếp dọc) hay bên cạnh (xếp chồng theo chiều ngang) trường nhập dữ liệu không. Hãy sử dụng `'vertical'` hoặc `'horizontal'`.
Giao diện người dùng ui.cssClass	chuỗi	"google-Visualization-controls-stringfilter"	Lớp CSS để gán cho tùy chọn điều khiển dành cho kiểu tùy chỉnh.

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

Tổng quan

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

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

2. Tải thư viện

3. Chuẩn bị dữ liệu

4. Tạo một bản sao của trang tổng quan

5. Tạo thực thể đối chứng và biểu đồ

6. Thiết lập phần phụ thuộc

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

8. Các thay đổi có lập trình sau khi vẽ

Tài liệu tham khảo API

Trang tổng quan

Hàm dựng

Phương pháp

Sự kiện

ControlWrapper

Hàm dựng

Phương pháp

Sự kiện

Trình theo dõi biểu đồ

Thư viện điều khiển

Bộ lọc danh mục

Tiểu bang

Tùy chọn

FilterRangeFilter

Tiểu bang

Tùy chọn

Sự kiện

Bộ lọc phạm vi ngày

Tiểu bang

Tùy chọn

Bộ lọc số dải ô

Tiểu bang

Tùy chọn

Bộ lọc chuỗi

Tiểu bang

Tùy chọn