javascript - 如何将时间线图表与 ControlWrapper 绑定(bind)以过滤时间线

Question

我正在尝试根据图表包装器(列表框)中的值过滤图表(时间线)。

文档指出您需要同时声明 controlWrapper 和 chartWrapper。 我宣布时间线有点不同，我假设这就是两个元素无法正确交互的原因。

 var chart = new google.visualization.Timeline(container);
 var compPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control2',
            dataTable: data,
            'options': {
              'filterColumnLabel': 'Team',
              'ui': {
              'labelStacking': 'vertical',
                'allowTyping': true,
                'allowMultiple': true
              }
            }
          });
dashboard.bind(compPicker, chart);
compPicker.draw();
              // Draw the entire dashboard.

google.visualization.events.addListener(chart, 'ready', afterDraw);
chart.draw(data, options);

我可以成功地呈现控制值，但是当我选择一个时，时间轴不会过滤。

这是一个代码笔: https://codepen.io/anon/pen/XQdYrm

更新:Codepen 已更新以反射(reflect)正确的结果

Answer 1

首先，将'controls' 包添加到与'timeline' 相同的load 语句中。

google.charts.load('current', {
  packages:['controls', 'timeline']
}).then(function () {

接下来，需要为时间线图表使用一个ChartWrapper 对象。

var chart = new google.visualization.ChartWrapper({
  chartType: 'Timeline',
  containerId: 'chart'
});

最后，需要绘制仪表盘，而不是单独绘制控件和图表。

dashboard.bind(compPicker, chart);
dashboard.draw(data);

请参阅以下工作片段...

google.charts.load('current', {
  packages:['controls', 'timeline']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'team', label: 'Team', type: 'string'},
      {id: 'start', label: 'Season Start Date', type: 'date'},
      {id: 'end', label: 'Season End Date', type: 'date'}
    ],
    rows: [
      {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
      {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers3'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints2'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers4'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots5'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers6'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots7'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots8'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers9'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'New York Giants10'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers11'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints12'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers13'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers14'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots15'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers16'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots17'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots18'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers19'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
    ]
  });

  var options = {
    height: 1300,
    timeline: {
      groupByRowLabel: true
    },
    width: 1800
  };
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  var chart = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'chart'
  });

  var compPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control2',
    options: {
      filterColumnLabel: 'Team',
      ui: {
        labelStacking: 'vertical',
        allowTyping: true,
        allowMultiple: true
      }
    }
  });

  dashboard.bind(compPicker, chart);
  dashboard.draw(data);
});

#header {
  height: 0px;
  position: relative;
  -webkit-overflow-scrolling: touch;
  display: block;
  top: 0px;
  margin-top: 0px;
  z-index: 99;
    float: top;
}

#chart {
  -webkit-overflow-scrolling: touch;
  margin-top: 57px;
  
}

.scroll {
  max-width: 100%;
   -webkit-overflow-scrolling: touch;
   height: 100%;
  overflow-y: scroll;
}

.inline {
  display: inline-block;
  vertical-align: top;
 -webkit-overflow-scrolling: touch;
  
}

.nowrap {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden; 
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="control2"></div>
  <div class="nowrap">
    <div class="inline" id="labels"></div>
    <div class="inline scroll">
      <div id="header"></div>
      <div id="chart"></div>
    </div>
  </div>
</div>