Question

我尝试使用ChartRangeFilter过滤日期，然后在时间级别过滤它。例如：时间戳
05/03/2016 12:00:19
05/03/2016 12:01:31
05/03/2016 12:02:43
05/03/2016 12:32:01
05/03/2016 12:33:14
2016/03/06 11:50:42
06/03/2016 11:51:57
2016/03/06 11:53:11
06/03/2016 11:54:25
2016/03/06 11:55:39
07/03/2016 15:43:50
07/03/2016 15:45:02
07/03/2016 15:46:14
07/03/2016 15:47:26

因此，在仅设置5/03/2016的日期之后，我想过滤从12:00到12:15的时间。所以在图表中，它只会绘制前三个值试过这个，它没有用。

chartDateFilter = new google.visualization.ControlWrapper({
'controlType' : 'ChartRangeFilter',
'containerId' : 'chartDateFilter_id',
'state' : {
    'range' : {
        'start' : '1',
        'end'   : '31'
               }
            },
'options' : {
    'filterColumnLabel':'TimeStamp'
}
});

chartTimeFilter = new google.visualization.ControlWrapper({
'controlType' : 'ChartRangeFilter',
'containerId' : 'chartFilter_id',
'state' : {
    'range' : {
    'start' : '00:00',
    'end'   : '23:59'
}
},
'options' : {
    'filterColumnLabel':'TimeStamp'
            }
});

Answer 1

为了拥有两个单独的过滤器，您需要在数据中使用两个单独的列但ChartRangeFilter处理日期和时间，所以不需要......

此外，为range.start和range.end设置的值应为日期时间值。

参见以下示例...

google.charts.load('44', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'TimeStamp');
  data.addColumn('number', 'Value');
  data.addRow([new Date('05/03/2016 12:00:19'),  0]);
  data.addRow([new Date('05/03/2016 12:01:31'),  1]);
  data.addRow([new Date('05/03/2016 12:02:43'),  2]);
  data.addRow([new Date('05/03/2016 12:32:01'),  3]);
  data.addRow([new Date('05/03/2016 12:33:14'),  4]);
  data.addRow([new Date('06/03/2016 11:50:42'),  5]);
  data.addRow([new Date('06/03/2016 11:51:57'),  6]);
  data.addRow([new Date('06/03/2016 11:53:11'),  7]);
  data.addRow([new Date('06/03/2016 11:54:25'),  8]);
  data.addRow([new Date('06/03/2016 11:55:39'),  9]);
  data.addRow([new Date('07/03/2016 15:43:50'), 10]);
  data.addRow([new Date('07/03/2016 15:45:02'), 11]);
  data.addRow([new Date('07/03/2016 15:46:14'), 12]);
  data.addRow([new Date('07/03/2016 15:47:26'), 13]);

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    state: {
      range: {
        start: new Date('05/03/2016 12:00:00'),
        end:   new Date('05/03/2016 12:15:00')
      }
    },
    options: {
      filterColumnLabel: 'TimeStamp'
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div'
  });

  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dash.bind([control], [chart]);
  dash.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart_div"></div>
  <div id="control_div"></div>
</div>

在Google图表中过滤日期，然后过滤时间

1 个答案: