Question

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

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

现在，我想为用户提供禁用按钮滚动的可能性。是否可以删除“浏览器”部分或仅禁用滚动浏览变量？

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>

我可以通过按钮禁用/启用在Google图表中滚动吗？

1 个答案: