javascript - 谷歌图表 : Set exact Date-boundarys in charts (when using FilterSliders)

Question

我在网站上展示一个或多个时间图。我正在使用 DateRangeSlider，因此用户可以输入他们想要检查的确切时间。理想情况下，我希望用户能够拨入一个时间，而这个时间应该准确地显示在图表上。但是，图表将始终从过滤集中的第一个可用数据点开始。例如，我拨入 21-01-2019 作为开始日期，但下一个数据点仅在 24-01-2019，那么图表也将从该较晚的日期开始。对于我的用例，如果图表在第一个数据点之前保持空白会更好，但实际上是从 21-01-2019 开始的。更好的方法是获取过滤集之外的第一个数据点，并且仍然在集合外部的最后一个点和内部的第一个点之间显示一条线。

这是我目前使用的代码:

var dashboard = new google.visualization.Dashboard(chartSliderPos);

var rangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': chartSliderPos,
    'options': {
    'filterColumnLabel': 'Time',
    'ui': {
        'step': 'hour'
        }
    }
});

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable();
data.addColumn("date", "Time");
data.addColumn("number", "Value");
data.addRows(resultArray);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ChartWrapper({
    'chartType': 'SteppedAreaChart',
    'containerId': pos,
    'options': {
        'width': 750,
        'height': 300,
        'explorer': {},
        'legend': 'none'
    }
});
dashboard.bind(rangeSlider, chart);

//callback for slider manipulation 
chartsArray.push( function(a, b) {
    rangeSlider.setState({'lowValue': a, 'highValue': b});
    rangeSlider.draw();
});

dashboard.draw(data);

如您所见，范围 slider 拨入的日期与图表显示的日期不同，因为下一个数据点要晚得多才可用。

编辑:通过查看来自 Google 的示例，我发现了一个示例，其中范围 slider 几乎可以满足我的要求。然而，我不需要注释图表，我不知道是什么让它在这个例子中起作用。示例:https://developers.google.com/chart/interactive/docs/gallery/annotationchart

Answer 1

您可以使用 hAxis.viewWindow 选项在图表上设置特定的开始和结束日期。

  hAxis: {
    format: 'yy/MM/dd HH:mm:ss',
    viewWindow: {
      min: new Date(2019, 3, 1),
      max: new Date(2019, 3, 30)
    }
  }

但是，范围过滤器将只允许数据中的最小值和最大值。

相反，您可以使用自己的过滤器输入日期。

在这里，使用了 jquery ui slider ...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var resultArray = [
    [new Date(2019, 3, 18), 555],
    [new Date(2019, 3, 19), 415],
    [new Date(2019, 3, 20), 210],
    [new Date(2019, 3, 21), 210],
    [new Date(2019, 3, 22), 210],
  ];
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');
  data.addColumn('number', 'Value');
  data.addRows(resultArray);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'SteppedAreaChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 24,
        left: 72,
        right: 72,
        bottom: 72
      },
      height: '100%',
      width: '100%',
      explorer: {},
      legend: 'none',
      hAxis: {
        format: 'yy/MM/dd HH:mm:ss',
        viewWindow: {
          min: new Date(2019, 3, 1),
          max: new Date(2019, 3, 30)
        }
      }
    }
  });
  chart.draw();

  var formatDate = new google.visualization.DateFormat({
    pattern: chart.getOption('hAxis.format')
  });

  $('#date-min').html(formatDate.formatValue(chart.getOption('hAxis.viewWindow.min')));
  $('#date-max').html(formatDate.formatValue(chart.getOption('hAxis.viewWindow.max')));

  $('.slider > div').slider({
    range: true,
    min: chart.getOption('hAxis.viewWindow.min').getTime(),
    max: chart.getOption('hAxis.viewWindow.max').getTime(),
    values: [
      chart.getOption('hAxis.viewWindow.min').getTime(),
      chart.getOption('hAxis.viewWindow.max').getTime()
    ],
    slide: function(event, ui) {
      chart.setOption('hAxis.viewWindow.min', new Date(ui.values[0]));
      chart.setOption('hAxis.viewWindow.max', new Date(ui.values[1]));
      $('#date-min').html(formatDate.formatValue(new Date(ui.values[0])));
      $('#date-max').html(formatDate.formatValue(new Date(ui.values[1])));
      chart.draw();
    }
  });
});

label {
  font-family: Arial;
  font-size: 12px;
  white-space: nowrap;
}

.chart {
  height: 300px;
}

.slider {
  width: 100%;
}

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  padding: 16px;
}

.table-row {
  display: table-row;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <label id="date-min">19/04/01</label>
    </div>
    <div class="table-cell slider">
      <div></div>
    </div>
    <div class="table-cell">
      <label id="date-max">19/04/30</label>
    </div>
  </div>
</div>