谷歌图表范围过滤器指定相对日期范围答案

【问题标题】：Google Chart Rangefilter Specify Relative Date Range谷歌图表范围过滤器指定相对日期范围
【发布时间】：2018-02-20 23:41:07
【问题描述】：

这篇Google Column Graph Single Date and value showing as multiple adjucent bars的帖子在隐藏代码sn-p中有一个线索，它帮助我解决了下面提出的问题。

我正在将类似 json 的数据传递到谷歌图表数据表中。头部和尾部如下所示。

头：

var GSPC = 
{
  cols:[
    {label: "Date", type: "date"},
    {label: "High", type: "number"},
    {label: "Low", type: "number"},
  ],
  rows:[
  {c:[{v:"Date(1985,01,02)"},{v:167.20},{v:165.19}]},
  {c:[{v:"Date(1985,01,03)"},{v:166.11},{v:164.38}]},
  {c:[{v:"Date(1985,01,04)"},{v:164.55},{v:163.36}]},

尾巴：

  {c:[{v:"Date(2018,02,14)"},{v:2702.10},{v:2648.87}]},
  {c:[{v:"Date(2018,02,15)"},{v:2731.51},{v:2689.82}]},
  {c:[{v:"Date(2018,02,16)"},{v:2754.42},{v:2725.11}]},
  ]
};

我有两个？在下面的 javascript 代码中标记我不知道如何设置范围开始和范围结束。范围结束应该是 DATA 变量中的最后一个日期，并且范围开始将相对于范围结束（例如两年前）任意设置。如何将范围的结束设置为日期数组中的最终数据值，以及如何将范围的开始设置为相对于结束日期的前一个日期？

javascript - 图表控件包装器

function drawDashBoard_GSPC() {

    var data = new google.visualization.DataTable(GSPC);

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

    var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'Control',
      options: {
        filterColumnLabel: 'Date',
        ui: {
            snapToData: false,
            chartOptions: {
              chartArea: {
                left: 75, // set equal to left margin of scatter chartArea
                top: 0, // set to 0
                width: 1100, // set equalt to width of scatter chartArea
                height: 40 // set to 40
              }
            }
        }
      },
      state: {
        range: {             // SET START = 2 YEARS FROM END DATE
             start: ?,
             end: ?,
        }
      }
    });

【问题讨论】：

标签： javascript charts controls google-visualization date-range

【解决方案1】：

这篇帖子Google Column Graph Single Date and value showing as multiple adjucent bars 提供了帮助我发现以下解决方案的线索。此代码将 numDays 整数作为输入，然后乘以 oneDay，这似乎计算为一天中的毫秒数。在范围设置中，只有“开始”日期是通过从最大（结束日期）值中减去 rangeDays 来计算的。

    // set date range
    var numDays = 730;
    var oneDay = (1000 * 60 * 60 * 24);
    var rangeDays = numDays * oneDay;
    var dateRange = data.getColumnRange(0);

    // range slider control
    var control = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'GSPC_Control',
      options: {
        filterColumnLabel: 'Date',
        ui: {
            snapToData: false,
            chartOptions: {
              chartArea: {
                left: 75, // set equal to left margin of scatter chartArea
                top: 0, // set to 0
                width: 1100, // set equalt to width of scatter chartArea
                height: 40 // set to 40
              }
            }
        }
      },
      state: {
        range: {    // set 2 year window if data available
             start: new Date(dateRange.max.getTime() - rangeDays)
             //end: 
        }
      }

【讨论】：