Google Chart：如何在面积图上添加缩放按钮

Question

I want to add zoom buttons on top of AreaChart like AnnotationChart. I searched for the same but didn't get the solution. Can anyone tell me the solution? I require buttons like this:

Thanks

Answer 1

you'll have to add the buttons manually,
when clicked, set the visible range on the range filter using the state property

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

see following working snippet,
each button represents the visible range in milliseconds,
when clicked, set the range on the filter...

 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>

Answer 2

It turns out you can use the AnnotationChart directly to display an AreaChart instead of a LineChart. It is actually already using an ComboChart internally, which has a default seriesType of 'line', but you can turn it into an area chart just by setting the 'areaOpacity' to a non-zero value by adding this to your chart options:

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