控件和信息中心

在本页中,您将了解如何将多个图表合并为信息中心,并为用户提供操作来控制其显示的数据。

概览

借助信息中心,您可以轻松地整理和管理多个共享相同基础数据的图表。通过使用本页面介绍的 API,您可以摆脱将多个信息中心连接在一起并协调属于信息中心的所有图表的负担。

信息中心使用 google.visualization.Dashboard 类定义。Dashboard 实例会收到一个 DataTable,其中包含要直观呈现的数据,负责处理数据并将其分布到信息中心内的所有图表。

“控件”是您与之互动的界面微件(例如类别选择器、范围滑块、自动补全工具等),用于驱动由信息中心及其所含图表管理的数据。

控件是使用 google.visualization.ControlWrapper 类定义的。您可以将 ControlWrapper 实例添加到信息中心,这些实例的行为类似于管道系统中的管道和阀门。它们会收集用户输入的内容,并利用这些信息来确定信息中心应该管理哪些数据可供其中的图表使用。

请查看以下示例,其中使用了类别选择器和范围滑块来驱动饼图直观呈现的数据。

注意:信息中心是交互式的。尝试操作控件并实时查看图表更改。

使用控件和信息中心

以下是创建信息中心并将其嵌入到您页面的关键步骤。下面提供了一个代码段,展示了所有这些步骤,后跟每个步骤的详细信息。

  1. 为信息中心创建 HTML 框架 页面上必须有尽可能多的 HTML 元素才能包含信息中心的所有成员。 这包括信息中心本身及其包含的所有控件和图表。 通常情况下,您可以为每个元素使用 <div>。
  2. 加载库信息中心只需要在库中包含或加载两个库:Google AJAX API 和 Google 可视化 controls 软件包。
  3. 准备好数据。您需要准备好要直观呈现的数据;这意味着要自行在代码中指定数据,或者查询远程网站以获取数据。
  4. 创建信息中心实例要实例化信息中心,请调用其构造函数,并传入对将用于保存信息中心的 <div> 元素的引用。
  5. 根据需要创建任意数量的控件和图表实例 创建 google.visualization.ChartWrappergoogle.visualization.ControlWrapper 实例以描述每个图表和由信息中心管理的控件。
  6. 建立依赖项在信息中心调用 bind(),并传入控件实例和图表实例,以通知信息中心应该管理哪些内容。控件和图表绑定后,信息中心会更新图表,以匹配控件对数据强制执行的约束。
  7. 绘制您的信息中心对信息中心调用 draw() 并传入数据,以便在页面上绘制整个信息中心。
  8. 绘制后进行程序化更改 (可选)在初始绘制完成后,您可以通过编程方式驱动属于信息中心一部分的控件,并让信息中心更新图表以响应此行为。

下面是一个网页示例,其中创建了一个简单的信息中心,内含一个范围饼图,用于驱动饼图。生成的信息中心将显示在代码段下方。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

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

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

这是此代码创建的信息中心。

1. 为信息中心创建 HTML 框架

网页必须包含尽可能多的 HTML 元素(通常是 <div>),才能容纳信息中心本身及其中的所有控件和图表。在实例化信息中心、控件和图表实例时,您必须传递对实例元素的引用,因此请向每个 HTML 元素分配一个 ID。

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

您可以随意调整各个 HTML 元素的放置位置,但不会影响信息中心的外观。

2. 加载库

信息中心只需要在库中包含或加载两个库:Google AJAX API 和 Google 可视化 controls 软件包。该 API(尤其是 google.visualization.ChartWrapper)会自动识别所需的其他软件包(例如,如果您使用的是采样平均值图表,则为 gauge),并即时加载这些软件包,而无需您进一步干预。

您必须使用 google.charts.load() 来提取控制库。

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.charts.load('current', {'packages':['corechart', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
  }
</script>

3. 准备数据

加载可视化 API 后,google.charts.setOnLoadCallback() 将调用您的处理程序函数,这样您就可以知道所有必需的辅助方法和类已准备好开始准备数据。

Dashboard 接受 DataTable 中的数据,这与图表相同。

4. 创建信息中心实例

创建数据后,您可以实例化信息中心对象。信息中心构造函数有一个形参:对在其中绘制信息中心的 DOM 元素的引用。

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

信息中心将以 JavaScript 类的形式公开。实例化信息中心后,您可以执行一些可选步骤,例如添加事件监听器(例如,在信息中心“准备就绪”时收到通知)。信息中心处理事件的方式与图表相同,因此请参阅“图表”部分中的处理可视化事件妥善显示错误了解详情。

5. 创建控制和绘制实例

为将要添加到信息中心的每个控件和图表定义所需数量的实例。使用 google.visualization.ChartWrapper google.visualization.ControlWrapper 分别定义图表和控件。

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    }
  });

创建 ChartWrapperControlWrapper 实例时,请勿指定 dataTabledataSourceUrl 参数。信息中心负责为每个数据提供适当的数据。不过,请务必指定所需的参数:chartTypecontainerId 表示图表,controlTypecontainerId 表示控件。

有关配置控件和图表的一些提示:

  • 您必须为所有控件提供一个 filterColumnIndex(或 filterColumnLabel)值,以指定控件操作所针对的 google.visualization.DataTable 中的哪一列(在上面的示例中,控件针对标签为“甜甜圈”的列)
  • 使用控件上的 state 配置选项可在首次绘制控件时通过显式状态对其进行初始化。例如,您可以使用此设置来固定范围滑块控件的拇指的初始位置。

      var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div',
        'options': {
          'filterColumnLabel': 'Donuts eaten',
          'minValue': 1,
          'maxValue': 10
        },
        // Explicitly positions the thumbs at position 3 and 8,
        // out of the possible range of 1 to 10.
        'state': {'lowValue': 3, 'highValue': 8}
      });
    
        
  • 信息中心的所有图表共享您在准备数据步骤中准备的底层数据表。但是,图表通常需要特定的列排列才能正确显示:例如,饼图需要标签的字符串列,然后是值的数字列。

    在配置每个 ChartWrapper 实例时,请使用 view 选项来声明哪些列与图表相关,如以下示例所示。

      var data = google.visualization.arrayToDataTable([
        ['Name', 'Gender', 'Age', 'Donuts eaten'],
        ['Michael' , 'Male', 12, 5],
        ['Elisa', 'Female', 20, 7],
        ['Robert', 'Male', 7, 3],
        ['John', 'Male', 54, 2],
        ['Jessica', 'Female', 22, 6],
        ['Aaron', 'Male', 3, 1],
        ['Margareth', 'Female', 42, 8]
      ]);
    
      var pieChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart_div',
        'options': {
          'width': 300,
          'height': 300,
          'title': 'Donuts eaten per person'
        },
        // The pie chart will use the columns 'Name' and 'Donuts eaten'
        // out of all the available ones.
        'view': {'columns': [0, 3]}
      });
    
      // The rest of dashboard configuration follows
      // ...

6. 建立依赖关系

对信息中心以及其中的所有控件和图表进行实例化后,使用 bind() 方法告知信息中心有关控件和图表之间的依赖关系。

控件和图表绑定后,信息中心会更新图表,以匹配控件对数据强制执行的约束。在您要构建的示例信息中心内,范围滑块和饼图绑定在一起,因此只要您与前一个图表互动,该图表就会更新,仅显示与所选范围匹配的数据。

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

您可以采用多种不同的配置绑定控件和图表:一对一、一对多、多对一和多对多。每当一个图表绑定到多个控件时,信息中心会更新图表以匹配所有绑定控件强制执行的组合限制条件。同时,一个控件可以同时驱动多个图表。如需同时指定多个绑定,请将数组传入 bind() 方法(而不是单个实例)。您还可以将多个 bind() 调用连在一起。以下是一些示例。

  // Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently
  // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where each control drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

对于高级用法,您还可以将控件绑定到其他控件以建立依赖项链

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

7. 绘制信息中心

对信息中心实例调用 draw() 方法可呈现整个信息中心。draw() 方法只接受一个参数:为信息中心提供支持的 DataTable(或 DataView)。

每次更改信息中心的构成(例如,向其中添加新的控件或图表)或更改支持它的整个 DataTable 时,您都应该调用 draw()

每当 draw() 终止绘制属于其中的所有控件和图表时,信息中心实例就会触发 ready 事件。如果任何代管式控件或图表无法绘制,则会触发 error 事件。如需详细了解如何处理事件,请参阅处理事件

注意:您应该尝试监听 ready 事件,然后再尝试更改信息中心组合或再次绘制信息中心。

8. 绘制后的程序化更改

信息中心完成初始 draw() 后,将处于实时状态,并自动响应您在其上执行的任何操作(例如,更改作为信息中心一部分的控制滑块的所选范围)。

如果您需要以编程方式更改信息中心状态,可以直接对属于其的 ControlWrapperChartWrapper 实例执行此操作。经验法则是直接对特定 ControlWrapper(或 ChartWrapper)实例执行所需的任何更改:例如,分别通过 setOption()setState() 更改控制选项或状态,然后调用其 draw() 方法。然后,信息中心将更新以匹配所请求的更改。

以下示例展示了这种情况。

完整网页
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

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

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

API 参考文档

本部分列出了控件和信息中心 API 提供的对象,以及所有控件公开的标准方法。

信息中心

表示共享相同基础数据的协作控件和图表的集合。

构造函数

Dashboard(containerRef)
containerRef
对页面上用于存储信息中心内容的有效容器元素的引用。

方法

信息中心提供了以下方法:

方法 返回值类型 说明
bind(controls, charts) google.visualization.Dashboard

将一个或多个控件绑定到一个或多个其他信息中心参与者(图表或其他控件),这样一来,只要前一个控件控件收集了程序化信息中心或用户互动,而该控件影响了信息中心管理的数据,系统就会重新绘制所有这些控件。返回信息中心实例本身,用于将多个 bind() 调用串联在一起。

  • controls - 一个或一组 google.visualization.ControlWrapper 实例,用于定义要绑定的控件。
  • charts - 单个或一组 google.visualization.ChartWrapper 实例,用于定义将由控件驱动的图表。
draw(dataTable)

绘制信息中心。

getSelection() 对象数组

返回信息中心内所选图表实体的选定数组。在信息中心调用 getSelection() 方法时,该方法会返回对其中的所有图表进行的所有选择的聚合,以便在处理图表选择时使用单个引用。

注意所选事件的事件监听器仍需附加到您要监听的每个图表上。

详细说明

活动

Dashboard 对象会抛出以下事件。请注意,您必须先调用 Dashboard.draw(),然后才能抛出任何事件。

名称 说明 属性
error 尝试呈现信息中心时出错时触发。信息中心中的一个或多个控件和图表可能未能呈现。 id、message
ready

信息中心已完成绘制,可以接受更改。信息中心的所有控件和图表均可用于进行外部方法调用和用户互动。如果您在绘制信息中心后需要更改其信息中心(或其显示的数据),则应在调用 draw 方法之前为该事件设置监听器,然后仅在事件触发后应用更改。

ready 事件还会触发:

  • 当用户完成与某一控件的程序化互动触发的信息中心刷新后,
  • (在对信息中心的任何图表部分的 draw() 方法的程序化调用之后)。

控件封装容器

Control 封装容器对象是已配置控制实例的 JSON 表示法的封装容器。该类公开了定义信息中心控件、进行绘制以及以编程方式更改其状态的便捷方法。

构造函数

ControlWrapper(opt_spec)
opt_spec
[可选] - 定义控件的 JSON 对象或该对象的序列化字符串版本。下表显示了 JSON 对象支持的属性。 如果未指定,则必须使用 Control 封装容器公开的 set... 方法设置所有适当的属性。
属性 类型 必需 默认 说明
控件类型 字符串 必需 控件的类名称。对于 Google 控件,可以省略 google.visualization 软件包名称。示例CategoryFilterNumberRangeFilter
容器 ID 字符串 必需 网页上将托管控件的 DOM 元素的 ID。
选项 对象 选填 一个对象,描述控件的选项。您可以使用 JavaScript 字面量表示法,也可以提供对象的句柄。示例 "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state 对象 选填 一个描述控件状态的对象。状态会收集操作控件的用户可影响的所有变量。例如,范围滑块状态可以用滑块的上下滑块占据的位置来表示。您可以使用 JavaScript 字面量表示法,也可以为对象提供句柄。示例"state": {"lowValue": 20, "highValue": 50}

方法

Control 封装容器会提供以下附加方法:

方法 返回值类型 说明
draw()

绘制控件。通常,包含控件的信息中心会负责绘制控件。您应在更改任何其他设置(例如选项或状态)后调用 draw() 以强制重新绘制控件。

toJSON() 字符串 返回字符串的 JSON 形式的控件。
clone() 返回控制封装容器的深层副本。
getControlType() 字符串 控件的类名称。如果这是 Google 控件,则无法使用 google.visualization 限定名称。例如,如果这是一个 CategoryFilter 控件,它将返回“CategoryFilter”,而不是“google.visualization.CategoryFilter”。
getControlName() 字符串 返回 setControlName() 分配的控件名称。
getControl() 控制对象参考 返回对此 Control 封装容器创建的控件的引用。在您针对 Control 封装容器对象(或保存此对象的信息中心)调用 draw() 之前,它将返回 null,并且会抛出一个就绪事件。返回的对象仅公开了 resetControl() 方法,该方法会将控件状态重置为初始化时的状态(例如重置 HTML 表单元素)。
getContainerId() 字符串 控件的 DOM 容器元素的 ID。
getOption(key, opt_default_val) 任何类型

返回指定的控件选项值

  • key - 要检索的选项的名称。可以是限定名称,例如 'vAxis.title'
  • opt_default_value [可选] - 如果指定的值未定义或为 null,则返回此值。
getOptions() 对象 用于返回此控件的选项对象。
getState() 对象 返回控制状态。
setControlType(type) 设置控件类型。传入要实例化的控件的类名称。如果这是 Google 的控件,请勿使用 google.visualization 进行限定。 例如,对于数字列上方的范围滑块,请传入“NumberRangeFilter”。
setControlName(name) 为控件设置任意名称。这不会显示在控件的任何位置,仅供您参考。
setContainerId(id) 用于设置控件包含的 DOM 元素的 ID。
setOption(key, value) 设置单个控制选项值,其中 key 是选项名称,value 是值。如需取消设置某个选项,请为该值传入 null。请注意,key 可以是限定名称,例如 'vAxis.title'
setOptions(options_obj) 用于为控件设置完整的选项对象。
setState(state_obj) 设置控制状态。状态会收集操作控件的用户可以影响的所有变量。例如,范围滑块状态可以用滑块的上下拇指的位置来描述。

活动

Control 封装容器对象会抛出以下事件。请注意,在调用任何事件之前,您必须调用 ControlWrapper.draw()(或绘制包含控件的信息中心)。

名称 说明 属性
error 尝试渲染控件时出错时触发。 id、message
ready 该控件已准备好接受用户互动以及用于外部方法调用。如果您想与控件交互并在绘制后调用方法,则应在调用 draw 方法之前为此事件设置监听器,并仅在事件触发后调用它们。或者,您也可以仅在信息中心触发 ready 事件后才调用控件和调用控件方法。
statechange 用户与控件互动时触发,这会影响控件的状态。例如,只要您移动范围滑块控件的拇指,就会触发 statechange 事件。如需在事件触发后检索更新后的控件状态,请调用 ControlWrapper.getState()

图表封装容器

请参阅可视化图表的“参考文档”部分中的 google.visualization.ChartWrapper 文档。

ChartWrapper 用作信息中心的一部分时,请注意以下事项:

  • 请勿显式设置 dataTablequerydataSourceUrlrefreshInterval 属性。存储图表的信息中心负责为其提供所需的数据。
  • 请务必设置其 view 属性,以声明提供给信息中心的 dataTable 中的所有列中与图表相关的列,如创建控件和图表实例中所示。

过滤器是指用户可以通过图形方式交互式选择要在图表上显示的数据。本部分介绍了 Google 图表过滤条件:CategoryFilterChartRangeFilterDateRangeFilterNumberRangeFilterStringFilter

您可以使用任何一个函数作为 ControlWrapper.setControlType() 的参数。

注意:在描述选项时,采用点表示法来描述嵌套对象属性。例如,应在选项对象中声明名为 'ui.label' 的选项作为 var options = {"ui": {"label": "someLabelValue"} };

类别过滤器

用于从一组已定义值中选择一个或多个值的选择器。

状态

名称 类型 默认 说明
选定的值 对象或基元类型的数组 当前选择的一组值。所选值必须是一组由 values 选项定义的整体可选值(任何不相关的值都将被忽略)。如果 CategoryFilter 不允许选择题,则仅保留数组的第一个值。

选项

名称 类型 默认 说明
filterColumnIndex number 过滤器应该基于的数据表列。必须提供此选项或 filterColumnLabel。如果两者都存在,则此选项优先。
filterColumnLabel 字符串 过滤条件所依据的列的标签。必须提供此选项或 filterColumnIndex。如果两者都存在,则以 filterColumnIndex 为准。
values 数组 自动出价 可供选择的值列表。如果使用 Object 数组,它们应具有合适的 toString() 表示法以用于向用户显示。如果为 null 或未定义,则系统将根据此控件执行操作的 DataTable 列中的值自动计算值列表。
useFormattedValue 布尔值 false 自动根据此过滤器用于运算的 DataTable 列填充可选值列表,无论使用实际单元格值还是格式化值。
ui 对象 null 一个具有成员的对象,用于配置控件界面的各个方面。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:
{label: 'Metric', labelSeparator: ':'}
ui.caption 字符串 “选择值...” 未选择任何项时要在值选择器微件中显示的字幕。
ui.sortValues 布尔值 true 是否应选择应选择的值。
ui.selectedValuesLayout 字符串 “离开” 允许在选择多个选项时显示所选值。可能的
    值如下:
  • 'aside':所选值会显示在值选择器 widget 旁边的单个文本行中,
  • 'below':所选值将显示在 widget 下方的单个文本行中,
  • 'belowWrapping':类似于 below,但不适合选择器的条目将换行。
  • 'belowStacked':所选值将显示在 widget 下方的列中。
ui.allowNone 布尔值 true 是否允许用户选择任何值。如果为 false,则用户必须从可用值中至少选择一个值。在控件初始化期间,如果将该选项设置为 false,并且未提供 selectedValues 状态,则系统会自动选择可用值中的第一个值。
ui.allowMultiple 布尔值 true 能否选择多个值,而不仅仅是一个。
ui.allowTyping 布尔值 true 是否允许用户通过输入文本字段来缩小可用选项列表的范围(通过自动补全器)。
ui.label 字符串 自动出价 要在类别选择器旁边显示的标签。如果未指定,则使用控件所操作的列的标签。
ui.labelSeparator 字符串 附加到标签的分隔符字符串,用于直观地将标签与类别选择器分开。
ui.labelStacking 字符串 “horizontal” 标签应显示在类别选择器的上方(垂直堆叠)还是旁边(水平堆叠)。使用 'vertical''horizontal'
ui.cssClass 字符串 “google-visualization-controls-categoryfilter” 要分配给控件的 CSS 类(用于自定义样式)。

图表范围过滤器

一条叠加到图表上的滑块为滑块,用于从图表的连续轴中选择一系列值。

状态

名称 类型 默认 说明
范围.起始值 数字、日期、日期时间或时间 范围起始值 所选范围(含边界值)的起始值。
范围.end 数字、日期、日期时间或时间 范围结束值 所选范围(含边界值)的结尾。

选项

名称 类型 默认 说明
filterColumnIndex number 过滤器所处理的数据表中的列索引。必须提供此选项或 filterColumnLabel。如果两者都存在,则此选项优先。

请注意,只有指定网域列的索引(包含在控件内绘制的图表的轴上)才有意义。

filterColumnLabel 字符串 过滤器所运行的数据表列的标签。必须提供此选项或 filterColumnIndex。如果两者都存在,则以 filterColumnIndex 为准。

请注意,只有指定网域列的标签是体现在控件内所绘制图表的连续轴上的标签。

ui 对象 null 一个具有成员的对象,用于配置控件界面的各个方面。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType 字符串 “组合图表” 控件内绘制的图表的类型。
可以是“AreaChart”、“LineChart”、“ComboChart”或“ScatterChart”之一。
ui.chartOptions 对象
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
      
控件内绘制的图表的配置选项。允许与信息中心中的任何图表进行相同级别的配置,并遵循 Chart 封装容器.setOptions() 接受的格式。

您可以指定其他选项或替换默认选项(但请注意,为实现最佳外观,系统已仔细选择默认值)。

ui.chartView 对象或字符串(序列化对象) null 应用于数据表格(用于在控件内绘制图表)的视图规范。允许与信息中心中的任何图表进行相同级别的配置,并遵循 Chart 封装容器.setView() 接受的格式。如果未指定,则使用数据表本身来绘制图表。

请注意,所绘制图表的横轴必须是连续的,因此请务必相应地指定 ui.chartView

ui.minRangeSize number 数据值差异会被解读为 1 个像素 最小可选范围大小 (range.end - range.start),以数据值单位指定。对于数字轴,它是数字(未必是整数)。对于日期、日期时间或时段轴是一个整数,指定以毫秒为单位的一个差值。
ui.snapToData 布尔值 false 如果为 true,则范围缩略图会靠近最近的数据点。 在这种情况下,getState() 返回的范围的终点必须是数据表中的值。

活动

Control 封装容器事件新增了一些内容:

名称 说明 属性
statechange 与每个 Control 封装容器中所述的文档一样,该属性只具有一个额外的布尔值属性 inProgress,用于指定当前是否正在更改状态(是拇指的其中一个,还是拖动范围本身)。 进行中

DateRangeFilter

用于选择日期范围的双值滑块。

尝试移动滑块以更改下表中显示的行。

状态

名称 类型 默认 说明
低价值 number 所选范围(含边界值)的下限。
高价值 number 所选范围(含这两个值)中的较大范围。
最低评分 布尔值 滑块的下拇指是否锁定在允许的最小范围内。如果已设置,则替换 lowValue
highThumbAtMaximum 布尔值 滑块的较大拇指是否锁定在允许的最大范围内。如果已设置,则替换 highValue

选项

名称 类型 默认 说明
filterColumnIndex number 过滤器应该基于的数据表列。必须提供此选项或 filterColumnLabel。如果两者都存在,则此选项优先。 必须指向类型为 number 的列。
filterColumnLabel 字符串 过滤条件所依据的列的标签。必须提供此选项或 filterColumnIndex。如果两者都存在,则以 filterColumnIndex 为准。必须指向类型为 number 的列。
minValue 日期 自动出价 所允许范围下限的最小值。如果未定义,则系统将根据控件管理的 DataTable 内容推断该值。
maxValue 日期 自动出价 允许的最大范围值。如果未定义,则系统将根据控件管理的 DataTable 内容推断该值。
ui 对象 null 一个具有成员的对象,用于配置控件界面的各个方面。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:
{label: 'Age', labelSeparator: ':'}
ui.format 对象 如何以字符串表示日期。接受任何有效的日期格式
ui.step 字符串 拖动滑块缩略图时可能发生的最小变化:时间单位可以为“天”。 (尚不支持“month”和“year”)。
ui.ticks number 自动出价 滑块拇指可以占据的刻度数(范围栏中的固定位置)。
ui.unitIncrement 字符串 “1” 范围范围的单位增量增量。单位递增相当于使用箭头键移动滑块滑块。
ui.blockIncrement number 10 范围范围的块增量递增。块增量相当于使用 pgUp 和 pgDown 键移动滑块缩略图。
ui.showRangeValues 布尔值 true 是否让滑块在旁边显示所选范围的数据范围。
ui.orientation 字符串 “horizontal” 滑块的方向。'horizontal''vertical'
ui.label 字符串 自动出价 要在滑块旁边显示的标签。如果未指定,则使用控件所操作的列的标签。
ui.labelSeparator 字符串 附加到标签的分隔符字符串,用于直观地将标签与滑块隔开。
ui.labelStacking 字符串 “horizontal” 标签应显示在滑块上方(垂直堆叠)还是显示在滑块旁边(水平堆叠)。使用 'vertical''horizontal'
ui.cssClass 字符串 “google-visualization-controls-rangefilter” 要分配给控件的 CSS 类(用于自定义样式)。

NumberRangeFilter

用于选择数值范围的滑块的双值滑块。

状态

名称 类型 默认 说明
低价值 number 所选范围(含边界值)的下限。
高价值 number 所选范围(含这两个值)中的较大范围。
最低评分 布尔值 滑块的下拇指是否锁定在允许的最小范围内。如果已设置,则替换 lowValue
highThumbAtMaximum 布尔值 滑块的较大拇指是否锁定在允许的最大范围内。如果已设置,则替换 highValue

选项

名称 类型 默认 说明
filterColumnIndex number 过滤器应该基于的数据表列。必须提供此选项或 filterColumnLabel。如果两者都存在,则此选项优先。 必须指向类型为 number 的列。
filterColumnLabel 字符串 过滤条件所依据的列的标签。必须提供此选项或 filterColumnIndex。如果两者都存在,则以 filterColumnIndex 为准。必须指向类型为 number 的列。
minValue number 自动出价 所允许范围下限的最小值。如果未定义,则系统将根据控件管理的 DataTable 内容推断该值。
maxValue number 自动出价 允许的最大范围值。如果未定义,则系统将根据控件管理的 DataTable 内容推断该值。
ui 对象 null 一个具有成员的对象,用于配置控件界面的各个方面。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:
{label: 'Age', labelSeparator: ':'}
ui.format 对象 如何将数字表示为字符串。接受任何有效的数字格式
ui.step number 1,或根据 ticks 计算得出(如果已定义) 拖动滑块缩略图时可能发生的最小变化。
ui.ticks number 自动出价 滑块拇指可以占据的刻度数(范围栏中的固定位置)。
ui.unitIncrement number 1 范围范围的单位增量增量。单位递增相当于使用箭头键移动滑块滑块。
ui.blockIncrement number 10 范围范围的块增量递增。块增量相当于使用 pgUp 和 pgDown 键移动滑块缩略图。
ui.showRangeValues 布尔值 true 是否让滑块在旁边显示所选范围的数据范围。
ui.orientation 字符串 “horizontal” 滑块的方向。'horizontal''vertical'
ui.label 字符串 自动出价 要在滑块旁边显示的标签。如果未指定,则使用控件所操作的列的标签。
ui.labelSeparator 字符串 附加到标签的分隔符字符串,用于直观地将标签与滑块隔开。
ui.labelStacking 字符串 “horizontal” 标签应显示在滑块上方(垂直堆叠)还是显示在滑块旁边(水平堆叠)。使用 'vertical''horizontal'
ui.cssClass 字符串 “google-visualization-controls-rangefilter” 要分配给控件的 CSS 类(用于自定义样式)。

字符串过滤条件

简单的文本输入字段,可让您通过字符串匹配过滤数据。它会在每次按键后更新:请尝试输入 j,将下表缩小到 John 和 Jessica。

状态

名称 类型 默认 说明
字符串或对象 当前在控件输入字段中输入的文本。

选项

名称 类型 默认 说明
filterColumnIndex number 过滤器应该基于的数据表列。必须提供此选项或 filterColumnLabel。如果两者都存在,则此选项优先。
filterColumnLabel 字符串 过滤条件所依据的列的标签。必须提供此选项或 filterColumnIndex。如果两者都存在,则以 filterColumnIndex 为准。
matchType 字符串 “前缀” 控件是否应仅匹配确切值 ('exact')、从值开头 ('prefix') 开头的前缀,或任何子字符串 ('any')。
caseSensitive 布尔值 false 匹配是否应区分大小写。
useFormattedValue 布尔值 false 控件是否应与单元格格式的值匹配,还是再次匹配实际值。
ui 对象 null 一个具有成员的对象,用于配置控件界面的各个方面。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger 布尔值 true 控件是应在用户每次按某个键时匹配,还是仅在输入字段“更改”(失去焦点或按 Enter 键)时匹配。
ui.label 字符串 自动出价 要在输入字段旁边显示的标签。如果未指定,则使用控件所操作的列的标签。
ui.labelSeparator 字符串 附加到标签的分隔符字符串,用于直观地将标签与输入字段分开。
ui.labelStacking 字符串 “horizontal” 标签应显示于输入字段之上(垂直堆叠)还是旁边(水平堆叠)。使用 'vertical''horizontal'
ui.cssClass 字符串 “google-visualization-controls-stringfilter” 要分配给控件的 CSS 类(用于自定义样式)。