Google Charts: Установите точные границы даты в диаграммах (при использовании FilterSliders)

Question

Я показываю один или несколько временных графиков на веб-сайте.Я использую DateRangeSlider, поэтому пользователи могут указать точное время, которое они хотят изучить.В идеале я хочу, чтобы пользователь мог набирать время, и именно это время должно быть показано на графике.Однако диаграмма всегда начинается с первого доступного элемента данных из отфильтрованного набора.Например, я набираю 21-01-2019 в качестве даты начала, но следующее Datapoint будет только в 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);

Как видите, у ползунка диапазона есть другая дата, набранная, чемДиаграмма показывает, потому что следующая точка данных доступна только намного позже.

РЕДАКТИРОВАТЬ: просматривая примеры из Google, я нашел один пример, где ползунок Range делает в значительной степени то, что я хочу.Однако мне не нужна таблица аннотаций, и я не знаю, что делает эту работу в этом примере.Пример: 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 ...

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>