Кнопка для изменения диапазона оси X на графике Google - PullRequest
Новая
       11

Кнопка для изменения диапазона оси X на графике Google

0 голосов
/ 03 июля 2018

У меня есть диаграмма области Google, которая отображает некоторые данные, примерно 5 лет ежедневных данных. Пользователь может увеличивать и уменьшать масштаб, и все это прекрасно работает.

Хотелось, чтобы рядом с диаграммой была кнопка, которую они могли бы нажать, чтобы увидеть данные за последние годы. Однако я не уверен, как я могу изменить диапазон оси X на диаграмме Google?

1 Ответ

0 голосов
/ 19 июля 2018

Вы можете использовать опцию оси viewWindow

, который имеет свойства для min & max,
эти свойства должны соответствовать типу данных оси, к которой они применяются

см. Следующий рабочий фрагмент,
Ось X - это даты, поэтому мы можем установить минимальную и максимальную даты для отображения на графике ... 

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Positive');
  data.addColumn('number', 'Negative');
  data.addRows([
    [new Date(2017, 1, 20), 10, null],
    [new Date(2017, 2, 21), 5, null],
    [new Date(2017, 3, 22), 0, 0],
    [new Date(2017, 4, 23), null, -5],
    [new Date(2017, 5, 24), null, -10],
    [new Date(2017, 6, 25), null, -5],
    [new Date(2017, 7, 26), 0, 0],
    [new Date(2017, 8, 27), 10, null],
    [new Date(2017, 9, 28), 5, null],
    [new Date(2017, 11, 29), 0, 0],
    [new Date(2018, 0, 20), 00, null],
    [new Date(2018, 0, 21), 5, null],
    [new Date(2018, 0, 22), 0, 0],
    [new Date(2018, 0, 23), null, -5],
    [new Date(2018, 0, 24), null, -10],
    [new Date(2018, 0, 25), null, -5],
    [new Date(2018, 0, 26), 0, 0],
    [new Date(2018, 0, 27), 00, null],
    [new Date(2018, 0, 28), 5, null],
    [new Date(2018, 0, 29), 0, 0],
    [new Date(2018, 1, 20), 10, null],
    [new Date(2018, 1, 21), 5, null],
    [new Date(2018, 1, 22), 0, 0],
    [new Date(2018, 1, 23), null, -5],
    [new Date(2018, 1, 24), null, -10],
    [new Date(2018, 1, 25), null, -5],
    [new Date(2018, 1, 26), 0, 0],
    [new Date(2018, 1, 27), 10, null],
    [new Date(2018, 1, 28), 5, null],
    [new Date(2018, 1, 29), 0, 0],
    [new Date(2018, 2, 20), 10, null],
    [new Date(2018, 2, 21), 5, null],
    [new Date(2018, 2, 22), 0, 0],
    [new Date(2018, 2, 23), null, -5],
    [new Date(2018, 2, 24), null, -10],
    [new Date(2018, 2, 25), null, -5],
    [new Date(2018, 2, 26), 0, 0],
    [new Date(2018, 2, 27), 10, null],
    [new Date(2018, 2, 28), 5, null],
    [new Date(2018, 2, 29), 0, 0],
    [new Date(2018, 3, 20), 10, null],
    [new Date(2018, 3, 21), 5, null],
    [new Date(2018, 3, 22), 0, 0],
    [new Date(2018, 3, 23), null, -5],
    [new Date(2018, 3, 24), null, -10],
    [new Date(2018, 3, 25), null, -5],
    [new Date(2018, 3, 26), 0, 0],
    [new Date(2018, 3, 27), 10, null],
    [new Date(2018, 3, 28), 5, null],
    [new Date(2018, 3, 29), 0, 0],
    [new Date(2018, 4, 20), 10, null],
    [new Date(2018, 4, 21), 5, null],
    [new Date(2018, 4, 22), 0, 0],
    [new Date(2018, 4, 23), null, -5],
    [new Date(2018, 4, 24), null, -10],
    [new Date(2018, 4, 25), null, -5],
    [new Date(2018, 4, 26), 0, 0],
    [new Date(2018, 4, 27), 10, null],
    [new Date(2018, 4, 28), 5, null],
    [new Date(2018, 4, 29), 0, 0],
    [new Date(2018, 5, 20), 10, null],
    [new Date(2018, 5, 21), 5, null],
    [new Date(2018, 5, 22), 0, 0],
    [new Date(2018, 5, 23), null, -5],
    [new Date(2018, 5, 24), null, -10],
    [new Date(2018, 5, 25), null, -5],
    [new Date(2018, 5, 26), 0, 0],
    [new Date(2018, 5, 27), 10, null],
    [new Date(2018, 5, 28), 5, null],
    [new Date(2018, 5, 29), 0, 0],
    [new Date(2018, 6, 20), 10, null],
    [new Date(2018, 6, 21), 5, null],
    [new Date(2018, 6, 22), 0, 0],
    [new Date(2018, 6, 23), null, -5],
    [new Date(2018, 6, 24), null, -10],
    [new Date(2018, 6, 25), null, -5],
    [new Date(2018, 6, 26), 0, 0],
    [new Date(2018, 6, 27), 10, null],
    [new Date(2018, 6, 28), 5, null],
    [new Date(2018, 6, 29), 0, 0],
    [new Date(2018, 9, 20), 10, null],
    [new Date(2018, 9, 21), 5, null],
    [new Date(2018, 9, 22), 0, 0],
    [new Date(2018, 9, 23), null, -5],
    [new Date(2018, 9, 24), null, -10],
    [new Date(2018, 9, 25), null, -5],
    [new Date(2018, 9, 26), 0, 0],
    [new Date(2018, 9, 27), 10, null],
    [new Date(2018, 9, 28), 5, null],
    [new Date(2018, 9, 29), 0, 0],
    [new Date(2018, 11, 20), 10, null],
    [new Date(2018, 11, 21), 5, null],
    [new Date(2018, 11, 22), 0, 0],
    [new Date(2018, 11, 23), null, -5],
    [new Date(2018, 11, 24), null, -10],
    [new Date(2018, 11, 25), null, -5],
    [new Date(2018, 11, 26), 0, 0],
    [new Date(2018, 11, 27), 10, null],
    [new Date(2018, 11, 28), 5, null],
    [new Date(2018, 11, 29), 0, 0],
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart-area',
    dataTable: data,
    options: {
      height: 280,
      legend: {
        alignment: 'end',
        position: 'top'
      },
      animation: {
        duration: 500,
        easing: 'in',
        startup: true
      },
      chartArea: {
        height: '100%',
        width: '100%',
        top: 36,
        left: 36,
        right: 18,
        bottom: 36
      }
    }
  });

  var chartDateRange = data.getColumnRange(0);
  var oneYear = (365.25 * 24 * 60 * 60 * 1000);

  $('#range-buttons button').on('click', function (sender) {
    var hAxis;
    var visibleRange = parseInt($(sender.target).data('range'));
    if (isNaN(visibleRange)) {
      hAxis = null;
    } else {
      hAxis = {
        viewWindow: {
          min: new Date(chartDateRange.max.getTime() - oneYear),
          max: chartDateRange.max
        }
      };
    }
    chart.setOption('hAxis', hAxis);
    chart.draw();
  });

  chart.draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="range-buttons">
    <span>Zoom:&nbsp;</span>
    <button class="ui-button ui-widget ui-corner-all" data-range="31104000000">Last Year</button>
    <button class="ui-button ui-widget ui-corner-all">All</button>
  </div>
  <div id="chart-area"></div>
  <div id="filter-range"></div>
</div>
...