Google 图表控件 - 最小和最大输入字段而不是滑块

Question

到目前为止我的代码：
HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>

JS:

 google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

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


        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'DateRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Date',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Date', 'Views', 'Unique visitors', 'Returning visitors'],
          [new Date(2020, 8, 5), 4, 2, 1],
          [new Date(2020, 6, 4), 10, 6, 4],
          [new Date(2020, 12, 4), 12, 5, 3],
          [new Date(2020, 10, 4), 5, 1, 0] 
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);
}

JSFiddle：https://jsfiddle.net/4htb6j7m/
主要受 google api 启发。 https://developers.google.com/chart/interactive/docs/gallery/controls

我的问题是：是否可以用两个输入框替换滑块 (programmaticSlider) ，这两个输入框本质上具有相同的目的——获取最小值和最大值（或在本例中为日期）对于图形 ?

Answer 1

google的数据table有方法 --> getColumnRange(columnIndex)

这将 return 一个包含列的最小值和最大值的对象。

从数据中获取最小和最大日期 --> getColumnRange(0)
returns...

{
  min: new Date(2020, 6, 4),
  max: new Date(2020, 12, 4)
}

注意：在 javascript、
中使用上述日期构造函数时月份数字是从零开始的。（一月 = 0，十二月 = 11）
因此 --> new Date(2020, 12, 4) = 1/4/2021
因为月份设置为12，日期构造函数自动向前跳转1个月
运行以下片段...

console.log(new Date(2020, 12, 4));

我最近使用 Jquery UI 日期选择器，结合 Jquery UI 滑块，
以类似的方式过滤图表。

有关解决方案的示例，请参见以下代码片段...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var programmaticChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'programmatic_chart_div',
    options: {
      legend: 'none',
      chartArea: {
        left: 24,
        top: 24,
        right: 16,
        bottom: 24,
        height: '100%',
        width: '100%'
      },
      height: '100%',
      width: '100%'
    }
  });

  var data = google.visualization.arrayToDataTable([
    ['Date', 'Views', 'Unique visitors', 'Returning visitors'],
    [new Date(2020, 8, 5), 4, 2, 1],
    [new Date(2020, 6, 4), 10, 6, 4],
    [new Date(2020, 12, 4), 12, 5, 3],
    [new Date(2020, 10, 4), 5, 1, 0],
  ]);

  // get min & max dates
  var dateRange = data.getColumnRange(0);

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy'
  });

  // create jquery slider
  $('.slider').slider({
    create: function (sender) {
      // set label and field values
      $('.slider-label').each(function (index, label) {
        $(label).html(formatDate.formatValue(dateRange[$(label).data('handle')]));
      });
      $('.field-date').each(function (index, field) {
        $(field).val(formatDate.formatValue(dateRange[$(field).data('handle')]));
      });

      // create min and max date pickers
      $('.field-date').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        minDate: dateRange.min,
        maxDate: dateRange.max,
        onSelect: setDates,
        selectOtherMonths: true,
        showOtherMonths: true
      }).on('change', setDates);

      // draw chart
      drawChart();
    },
    min: dateRange.min.getTime(),
    max: dateRange.max.getTime(),
    range: true,
    slide: function(sender, ui) {
      // set date picker values, min and max dates
      $('.field-date[data-handle="min"]').datepicker('setDate', new Date(ui.values[0]));
      $('.field-date[data-handle="min"]').datepicker('option', 'maxDate', new Date(ui.values[1]));
      $('.field-date[data-handle="max"]').datepicker('setDate', new Date(ui.values[1]));
      $('.field-date[data-handle="max"]').datepicker('option', 'minDate', new Date(ui.values[0]));
      $('.field-date').datepicker('refresh');
    },
    step: 1,
    stop: drawChart,
    values: [dateRange.min.getTime(), dateRange.max.getTime()]
  });

  function setDates() {
    // get date values
    var minValue = $('.field-date[data-handle="min"]').datepicker('getDate');
    var maxValue = $('.field-date[data-handle="max"]').datepicker('getDate');

    // set slider values
    $('.slider').slider('option', 'values', [minValue.getTime(), maxValue.getTime()]);
    drawChart();
  }

  function drawChart() {
    // set visible rows
    var sliderValues = $('.slider').slider('option', 'values');
    var view = new google.visualization.DataView(data);
    view.setRows(data.getFilteredRows([{
      column: 0,
      minValue: new Date(sliderValues[0]),
      maxValue: new Date(sliderValues[1])
    }]));
    programmaticChart.setDataTable(view);
    programmaticChart.draw();
  }
});

table {
  width: 100%;
}

table .ui-datepicker {
  z-index: 100;
}

table .ui-slider .ui-slider-handle {
  z-index: 1;
}

table .ui-slider .ui-slider-range {
  z-index: 0;
}

td {
  padding: 8px;
  text-align: center;
}

.cell-dashboard {
  width: 50%;
}

.cell-slider {
  width: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<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">
<table>
  <tr>
    <td class="cell-dashboard">
      <table>
        <tr>
          <td>
            <label for="filter-date">Date:</label>
            <input class="field-date" id="filter-date" name="filter-date-min" maxlength="10" size="10" type="text" data-handle="min" />
            <span>&#8211;</span>
            <input class="field-date" name="filter-date-max" maxlength="10" size="10" type="text" data-handle="max" />
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <td>
                  <label class="slider-label" data-handle="min"></div>
                </td>
                <td class="cell-slider">
                  <div class="slider"></div>
                </td>
                <td>
                  <label class="slider-label" data-handle="max"></div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td class="cell-dashboard">
      <div id="programmatic_chart_div"></div>
    </td>
  </tr>
</table>

Google 图表控件 - 最小和最大输入字段而不是滑块

Google charts controls - Min and max input fields instead of slider

javascript

charts

google-visualization