Как связать диаграмму временной шкалы с ControlWrapper для фильтрации временной шкалы

Question

Я пытаюсь отфильтровать диаграмму (временную шкалу) по значению в chartwrapper (listbox).

В документации говорится, что вам нужно объявить и 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

Обновление: Кодовая ручка обновлена ​​для отображения правильного результата

Answer 1

сначала добавьте пакет 'controls' к тому же оператору load, что и 'timeline'.

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>