谷歌图表设置默认日期范围

Google Charts set default date range

本文关键字：日期 范围 默认 设置 谷歌      更新时间：2023-09-26

我使用 Google 图表 API 创建了一个仪表板，其中包含一个DateRangeFilter和一个ComboChart，其中包含 3 个月内每个星期一的数据点。它包含一个实际的序列（可以null）作为条形图，以及一个始终具有与之关联的数据的目标系列。

理想情况下，我想将DateRangeFilter设置为仅显示当前和前一周以及提前 2 周，但仍允许作范围过滤器以显示其他数据。

到目前为止，我已经尝试将hAxis.viewWindow.max和hAxis.viewWindow.min设置为正确的日期，但这只会裁剪图表，并且不会让我回到被裁剪的点。

仪表板设置： 

var rangeFitter = new google.visualization.ControlWrapper({
  'controlType': 'DateRangeFilter',
  'containerId': 'filter_div',
  'options': {
    'filterColumnLabel': 'Closed Date'
  }
});
var lineChart = new google.visualization.ChartWrapper({
  'chartType': 'ComboChart',
  'containerId': 'chart_div',
  'options': {
    animation: {
      duration: 500,
      startup: true,
      easing: 'out'
    },
    hAxis: {
      gridlines: {
        count: 4,
        units: {
          days: {
            format: ['MMYY']
          }
        }
      },
      //this crops the graph :c
      viewWindow: {
        min: new Date(2016, 0, 11),
        max: new Date(2016, 2, 7)
      }
    },
    'height': 300,
    tooltip: {
      isHtml: true,
      trigger: 'selection'
    },
    seriesType: 'bars',
    series: {
      0: {
        targetAxisIndex: 0
      },
      1: {
        type: 'line',
        pointSize: 5
      }
    }
  }
});
dashboard.bind(rangeFilter, lineChart);

没关系，我想通了。我正在图表选项中搜索某些内容，但事实证明 DateRangeFilter 控件有一个"状态"参数。这里在我的示例中实现了它

 var rangeFliter = new google.visualization.ControlWrapper({
                    'controlType': 'DateRangeFilter',
                    'containerId': 'filter_div',
                    'options': {
                        'filterColumnLabel': 'Closed Date'  
                    },
                    //this will set the default range based on the values you provide
                    'state': {'lowValue': new Date(2016, 0, 11), 'highValue': new Date(2016, 1, 1)}
                });
相关文章：