我可以使用按钮禁用/启用 Google 图表中的滚动吗？答案

【问题标题】：Can I disable/enable Scrolling in Google Chart with a Button?我可以使用按钮禁用/启用 Google 图表中的滚动吗？
【发布时间】：2018-06-29 19:16:19
【问题描述】：

我的网站上有一个 Google 折线图，它显示了一个学生在学年期间的学习成绩。我启用了鼠标滚轮缩放。

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

现在我想让用户可以使用按钮禁用滚动。是否可以删除“资源管理器”部分或仅禁用滚动变量？

【问题讨论】：

标签： jquery scroll google-visualization

【解决方案1】：

当然，让我们先将 explorer 选项移到一个单独的变量中...

  var options = {
    pointSize: 4
  };

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

那么我们可以像这样启用资源管理器...

  options.explorer = explorer;

禁用...

  options.explorer = null;

请记住，任何时候更改选项时，都需要重新绘制图表...

请参阅以下工作 sn-p...

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>

【讨论】：

感谢您的帮助。唯一的问题是，它只能工作一次：/
谢谢，我忘了使用资源管理器有一个错误，必须重建图表才能重新启用资源管理器，see comments here -- 更改了上面的答案，现在可以多次使用...
@WhiteHat 我可以反转图表的滚动吗？