Элементы управления графиками Google - минимальное и максимальное поля ввода вместо ползунка - PullRequest
Новая
       16

Элементы управления графиками Google - минимальное и максимальное поля ввода вместо ползунка

1 голос
/ 21 апреля 2020

Пока мой код:
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) на два поля ввода, которые по существу будут обслуживать одно и то же? цель - получить минимальное и максимальное значение (или в данном случае даты) для графика?

1 Ответ

1 голос
/ 21 апреля 2020

В таблице данных Google есть метод -> getColumnRange(columnIndex)

, который возвращает объект со значениями min и max столбца.

, чтобы получить минимальную и максимальную даты из данных -> getColumnRange(0)
, которая возвращает ... 

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

ПРИМЕЧАНИЕ: при использовании указанного выше конструктора даты в javascript,
номера месяцев основаны на нулях. (Jan = 0, De c = 11)
как таковой -> new Date(2020, 12, 4) = 1/4/2021
, поскольку месяц установлен на 12, конструктор даты автоматически переходит на 1 месяц вперед.
запустить следующий фрагмент ... 

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

Недавно я использовал Jquery средства выбора даты пользовательского интерфейса в сочетании с ползунком Jquery пользовательского интерфейса
для фильтрации диаграммы аналогичным образом.

см. Следующий фрагмент для примера решения ... 

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>
...