谷歌圖表控件 - 最小和最大輸入字段而不是 slider

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/
主要受谷歌 api 啟發。 https://developers.google.com/chart/interactive/docs/gallery/controls

我的問題是：是否可以用兩個輸入框替換 slider （ programmaticSlider ） ，這兩個輸入框基本上用於相同的目的 - 獲取圖表的最小值和最大值（或在這種情況下為日期） ？

Answer 1

google的數據表有個方法--> getColumnRange(columnIndex)

這將返回一個 object 以及該列的最小值和最大值。

從數據中獲取最小和最大日期 --> getColumnRange(0)
返回...

{
  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 slider 一起使用，
以類似的方式過濾圖表。

有關解決方案的示例，請參見以下代碼段...

 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>