Google Chart Rangefilter 指定相对日期范围

Question

这个 post 在隐藏的代码片段中有一条线索帮助我解决了下面提出的问题。

我正在将 json 类数据传递到 google 图表数据表中。头尾如下图

头：

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: ?,
        }
      }
    });

Answer 1

这个 post 提供了帮助我找到以下解决方案的线索。此代码将 numDays 整数作为输入，然后乘以 oneDay，这似乎计算为一天中的毫秒数。在范围设置中，只有 'start' 日期是通过从最大（结束日期）值中减去 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: 
        }
      }

Google Chart Rangefilter 指定相对日期范围

Google Chart Rangefilter Specify Relative Date Range

javascript

charts

controls

google-visualization

date-range