如何实现鼠标悬停Google PieChart特定切片时触发Div元素变化？

完全可以实现，核心是利用Google Charts提供的'onmouseover'和'onmouseout'事件监听捕获鼠标在图表切片上的交互，再对应修改目标Div的样式。

以下是完整的实现示例：

HTML结构 #

<!-- 图表容器 -->
<div id="piechart" style="width: 400px; height: 300px;"></div>
<!-- 目标Div -->
<div id="sushi" style="padding: 10px; margin-top: 10px; background: #fff;">寿司相关信息</div>

JavaScript实现 #

// 加载Google Charts库
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 图表数据
  var data = google.visualization.arrayToDataTable([
    ['食物', '销量'],
    ['寿司', 12],
    ['拉面', 22],
    ['天妇罗', 18]
  ]);

  // 图表配置选项
  var options = {
    title: '日式料理销量'
  };

  // 初始化饼图
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);

  // 监听鼠标悬停事件
  google.visualization.events.addListener(chart, 'onmouseover', function(e) {
    // 获取当前悬停切片对应的行数据
    var rowData = data.getValue(e.row, 0);
    if (rowData === '寿司') {
      // 修改目标Div的背景色
      document.getElementById('sushi').style.backgroundColor = '#ffcccc';
    }
  });

  // 监听鼠标移出事件，恢复初始样式
  google.visualization.events.addListener(chart, 'onmouseout', function(e) {
    var rowData = data.getValue(e.row, 0);
    if (rowData === '寿司') {
      document.getElementById('sushi').style.backgroundColor = '#fff';
    }
  });
}

关键说明 #

• 通过google.visualization.events.addListener为图表绑定onmouseover和onmouseout事件
• 在事件回调中，通过e.row获取当前交互切片对应的数据行，再用data.getValue拿到食物名称
• 判断名称为'寿司'时，修改id="sushi"的Div样式；鼠标移出时恢复初始样式

内容的提问来源于stack exchange，提问作者Felix