javascript - 鼠标滚动缩放不适用于仪表板图表

Question

我想添加鼠标滚动缩放，但是 explorer 功能在图表选项中似乎不起作用。如何让鼠标滚动来缩放图表？

explorer: {
    axis: 'horizontal',
    keepInBounds: true,
    maxZoomIn: 4.0
}

这是我的图表:

google.load('visualization', '1', {
  packages: ['controls', 'charteditor']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y1');
  data.addColumn('number', 'Y2');


  var data1 = 5;
  var data2 = 100;
  for (var i = 0; i < 1000; i++) {
    data.addRows([
      [i, i + data1, i + data2]

    ]);
  }

  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      title: 'Průběh tlaku v čase',
      hAxis: {
        title: 'Čas',
        titleTextStyle: {
          color: '#333'
        },
        slantedText: true,
        slantedTextAngle: 80
      },
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          height: 40,
          width: 600,
          chartArea: {
            width: '90%'
          }
        }
      },
      colors: ['#D44E41']
    }

  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',

  });

  function setOptions(wrapper) {
    wrapper.setOption('width', 600);
  }

  dash.bind([control], [chart]);
  dash.draw(data);
  google.visualization.events.addListener(control, 'statechange', function() {});
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard"></div>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
<div id="control_div"></div>

View at JSFiddle

Answer 1

通过将 explorer 添加到 options，我取得了一些成功对于 ChartWrapper .鼠标滚动现在可缩放图表，但不会更新 ChartRangeFilter 显示。如果鼠标同时缩放图表和范围过滤器以保持它们同步，那就太好了。

google.load('visualization', '1', {
  packages: ['controls', 'charteditor']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y1');
  data.addColumn('number', 'Y2');


  var data1 = 5;
  var data2 = 100;
  for (var i = 0; i < 1000; i++) {
    data.addRows([
      [i, i + data1, i + data2]

    ]);
  }

  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      title: 'Průběh tlaku v čase',
      hAxis: {
        title: 'Čas',
        titleTextStyle: {
          color: '#333'
        },
        slantedText: true,
        slantedTextAngle: 80
      },
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          height: 40,
          width: 600,
          chartArea: {
            width: '90%'
          }
        }
      },
      colors: ['#D44E41']
    }

  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
      }
    }
  });

  function setOptions(wrapper) {
    wrapper.setOption('width', 600);
  }

  dash.bind([control], [chart]);
  dash.draw(data);
  google.visualization.events.addListener(control, 'statechange', function() {});
}

#chart_div {
  width: 100%;
  height: 100%;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard"></div>
<div id="chart_div"></div>
<div id="control_div"></div>