Question

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

我将类似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

这篇文章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: 
        }
      }

Google Chart Rangefilter指定相对日期范围

1 个答案: