Google 带有缩放和 select 事件的图表线

Question

我构建了一个折线图，当点被点击时会触发警报，效果很好。

问题是当我添加 'explorer' 选项（下面的注释行）以在图表上启用滚动缩放时：select 事件没有触发并且点击没有继续工作 (fiddle)...

    options = {
      legend: 'none',
      format: 'none',
      hAxis: { textPosition: 'none', gridlines: { count: 0 } },
      vAxis: { textPosition: 'none', gridlines: { count: 1 } }, 
      curveType: 'function',
      pointSize: 20,
      
     
    };

    chart = new google.visualization.LineChart(document.getElementById('chart_div'));        
   
   //If I enable this line, ZOOM works fine but the 'select' event don't work....
   //options['explorer'] = {axis: 'horizontal',keepInBounds: true,maxZoomIn: 5.0};        
   
   chart.draw(data_estruturas, options);
   
    //select event
    google.visualization.events.addListener(chart, 'select', function(e) {
      var selection = chart.getSelection();     
      if (selection.length > 0) {
        var estrutura = data_estruturas.getValue(selection[0].row, 0)
        alert(estrutura);
      }
    });


}

请检查这个fiddle

Answer 1

在注册select事件后放置绘图方法。

//select event
google.visualization.events.addListener(chart, 'select', function(e) {
  var selection = chart.getSelection();     
  if (selection.length > 0) {
    var estrutura = data_estruturas.getValue(selection[0].row, 0)
    alert(estrutura);
  }
});

//After set all options and register events draw the chart
chart.draw(data_estruturas, options);

I updated your fiddle

Google 带有缩放和 select 事件的图表线

Google chart line with zoom and select event

javascript

charts

google-visualization

zooming

dom-events