如何将事件监听器添加到Google Chart的PieChart的某个部分（数据栏）？

Question

对不起，如果我的英语不合适。

我无法弄清楚如何将事件监听器添加到PieChart的某个部分（片段）？

例如，有人在“Mushooms”中徘徊。另外还有关于蘑菇的图表。

here is a picture

我如何＆＃34;提取＆＃34;这个musrooms来自变量chart？

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

我不需要悬停时的工具提示。我需要的是在悬停时打开另一个图表的模态框。那可能吗？我的意思是，有可能在悬停时发生其他事情，而不是显示工具提示吗？

我在互联网上搜索过，但我发现的是如何自定义工具提示。

提前谢谢你。我热衷于回答的时间。

Answer 1

这是使用评论中提到的onmouseover事件的示例...

在整页模式下运行以下代码段，然后将鼠标悬停在＆＃34; Pepperoni＆＃34; （蓝片）

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Pizza');
  data.addColumn('number', 'Populartiy');
  data.addRows([
    ['Pepperoni', 33],
    ['Hawaiian', 26],
    ['Mushroom', 22],
    ['Sausage', 10],
    ['Anchovies', 9]
  ]);

  var dataPepperoni = new google.visualization.DataTable();
  dataPepperoni.addColumn('string', 'Pepperoni');
  dataPepperoni.addColumn('number', 'Type');
  dataPepperoni.addRows([
    ['Spicy', 2],
    ['Mild', 3],
    ['Hot', 4]
  ]);

  var options = {
    height: 400
  };

  var tooltip = document.getElementById('chart_div_tooltip');
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) {
    if (gglEvent.row === 0) {
      tooltip.className = 'tooltip';
      new google.visualization.PieChart(tooltip).draw(dataPepperoni);
    }
  });
  google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) {
    tooltip.className = 'hidden';
    tooltip.innerHTML = '';
  });
  chart.draw(data, options);
}

＆＃13;

.tooltip {
  border: 1px solid #e0e0e0;
  height: 320px;
  padding: 12px 12px 12px 12px;
  width: 320px;
}

.hidden {
  display: none;
  visibility: collapse;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div class="hidden" id="chart_div_tooltip"></div>

＆＃13;

＆＃13;

＆＃13;