Можно ли отключить / включить прокрутку в Google Chart с помощью кнопки?

Question

На моем сайте есть линейная диаграмма Google, на которой показаны школьные оценки ученика за его школьные годы. У меня включено масштабирование колесика мыши.

explorer: {
    axis: 'horizontal',
    maxZoomIn: 0.25,
    maxZoomOut: 4
},

Теперь я хотел бы дать пользователю возможность отключить прокрутку кнопкой. Можно ли удалить часть 'explorer' или просто отключить прокрутку переменной?

Answer 1

конечно, давайте начнем с перемещения опции проводника в отдельную переменную ...

  var options = {
    pointSize: 4
  };

  var explorer = {
    axis: 'horizontal',
    maxZoomIn: 0.25,
    maxZoomOut: 4
  };

тогда мы можем включить проводник так ...

  options.explorer = explorer;

чтобы отключить ...

  options.explorer = null;

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

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4]
  ]);

  var options = {
    pointSize: 4
  };

  var explorer = {
    axis: 'horizontal',
    maxZoomIn: 0.25,
    maxZoomOut: 4
  };

  $('#explorer-option').on('click', function () {
    if ($('#explorer-label').html() === 'Enable') {
      options.explorer = explorer;
      drawChart();

      $('#explorer-label').html('Disable');
      $('#explorer-icon').removeClass('ui-icon-circle-check');
      $('#explorer-icon').addClass('ui-icon-circle-close');
    } else {
      options.explorer = null;
      drawChart();

      $('#explorer-label').html('Enable');
      $('#explorer-icon').removeClass('ui-icon-circle-close');
      $('#explorer-icon').addClass('ui-icon-circle-check');
    }
  });

  var container = document.getElementById('chart_div');

  drawChart();
  function drawChart() {
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
  }
});

<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>
<button class="ui-button ui-widget ui-corner-all" id="explorer-option">
  <span id="explorer-icon" class="ui-icon ui-icon-circle-check"></span>&nbsp;<span id="explorer-label">Enable</span>
</button>
<div id="chart_div"></div>