javascript - 如何将事件监听器添加到 Google Chart 的 PieChart 的特定部分(数据栏)？

Question

抱歉，如果我的英语不好。

我不知道如何将事件监听器添加到饼图的特定部分(片段)？

例如，有人将鼠标悬停在“蘑菇”上，则会显示另一张有关蘑菇的图表。

here is a picture

如何从变量图表中“提取”这 block 蘑菇？

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

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

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

提前谢谢您。我很感谢您花时间回答。

Answer 1

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

在全页模式下运行以下代码段，然后将鼠标悬停在“Pepperoni”(蓝色切片)上

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);
}

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

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

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