谷歌图表：如何在面积图上添加缩放按钮答案

【问题标题】：Google Chart: How to add zoom buttons on Area chart谷歌图表：如何在面积图上添加缩放按钮
【发布时间】：2018-05-02 03:56:25
【问题描述】：

我想在 AreaChart 上添加缩放按钮，例如 AnnotationChart。我搜索了相同但没有得到解决方案。谁能告诉我解决方案？我需要这样的按钮：

谢谢

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

您必须手动添加按钮，
单击时，使用state 属性在范围过滤器上设置可见范围

  rangeFilter.setState({
    range: {
      start: currentRange.range.start,
      end: new Date(currentRange.range.start.getTime() + visibleRange)
    }
  });

请参阅以下工作 sn-p，
每个按钮以毫秒为单位表示可见范围，
单击时，在过滤器上设置范围...

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, 11, 20), 10, null],
    [new Date(2017, 11, 21), 5, null],
    [new Date(2017, 11, 22), 0, 0],
    [new Date(2017, 11, 23), null, -5],
    [new Date(2017, 11, 24), null, -10],
    [new Date(2017, 11, 25), null, -5],
    [new Date(2017, 11, 26), 0, 0],
    [new Date(2017, 11, 27), 10, null],
    [new Date(2017, 11, 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 rangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'filter-range',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: 'AreaChart',
        chartOptions: {
          chartArea: {
            width: '100%',
            left: 36,
            right: 18
          },
          height: 72
        }
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart-area',
    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
      }
    }
  });

  $('#range-buttons button').on('click', function (sender) {
    var currentRange = rangeFilter.getState();
    var visibleRange = parseInt($(sender.target).data('range'));
    if (isNaN(visibleRange)) {
      rangeFilter.setState(null);
    } else {
      rangeFilter.setState({
        range: {
          start: currentRange.range.start,
          end: new Date(currentRange.range.start.getTime() + visibleRange)
        }
      });
    }
    rangeFilter.draw();
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dashboard.bind(rangeFilter, chart);
  dashboard.draw(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<div id="dashboard">
  <div id="range-buttons">
    <span>Zoom:&nbsp;</span>
    <button class="ui-button ui-widget ui-corner-all" data-range="3600000">1h</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="86400000">1d</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="432000000">5d</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="604800000">1w</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="2592000000">1m</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="7776000000">3m</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="15552000000">6m</button>
    <button class="ui-button ui-widget ui-corner-all" data-range="31104000000">1y</button>
    <button class="ui-button ui-widget ui-corner-all">max</button>
  </div>
  <div id="chart-area"></div>
  <div id="filter-range"></div>
</div>

【讨论】：

【解决方案2】：

事实证明，您可以直接使用 AnnotationChart 来显示 AreaChart 而不是 LineChart。它实际上已经在内部使用了一个 ComboChart，它的默认 seriesType 为“line”，但是您可以通过将其添加到图表选项中将“areaOpacity”设置为非零值来将其转换为面积图：

var options = {
    ...
    chart: {
            areaOpacity: 0.3
           }
}

【讨论】：