Google Chart: как добавить кнопки масштабирования на диаграмму области - PullRequest
Новая
       11

Google Chart: как добавить кнопки масштабирования на диаграмму области

0 голосов
/ 02 мая 2018

Я хочу добавить кнопки масштабирования в верхней части AreaChart, например AnnotationChart. Я искал то же самое, но не нашел решения. Может кто-нибудь сказать мне решение? Мне нужны такие кнопки: enter image description here

Спасибо

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Оказывается, вы можете использовать AnnotationChart напрямую для отображения AreaChart вместо LineChart. На самом деле он уже использует ComboChart внутри, который имеет по умолчанию seriesType 'line', но вы можете превратить его в диаграмму области, просто установив для 'areaOpacity' ненулевое значение, добавив его в параметры диаграммы: 

var options = {
    ...
    chart: {
            areaOpacity: 0.3
           }
}
0 голосов
/ 02 мая 2018

вам нужно будет добавить кнопки вручную,
при нажатии установите видимый диапазон на фильтре диапазона, используя свойство state 

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

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

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