求助：实现Google饼图切片点击弹出Bootstrap模态框（附代码）

我来帮你搞定这个需求——点击Google饼图的切片时弹出Bootstrap模态框。下面是修改后的完整代码，关键改动点我会逐一说明：

<html>
<head>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Google Charts -->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <!-- 引入jQuery（兼容Bootstrap的模态框调用写法） -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options = {
        title: 'My Daily Activities'
      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(data, options);

      // 核心：监听饼图切片的点击事件
      google.visualization.events.addListener(chart, 'select', function() {
        var selection = chart.getSelection();
        if (selection.length > 0) {
          var row = selection[0].row;
          // 提取选中切片的活动名称和时长数据
          var taskName = data.getValue(row, 0);
          var taskHours = data.getValue(row, 1);
          
          // 更新模态框内的内容
          $('#modalTaskName').text(taskName);
          $('#modalTaskHours').text(taskHours);
          
          // 触发模态框显示
          $('#taskModal').modal('show');
        }
      });
    }
  </script>
</head>
<body>
  <!-- 饼图容器 -->
  <div id="piechart" style="width: 900px; height: 500px;"></div>

  <!-- Bootstrap模态框结构 -->
  <div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="taskModalLabel">活动详情</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>活动名称：<span id="modalTaskName"></span></p>
          <p>每日时长：<span id="modalTaskHours"></span> 小时</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

关键改动说明： #

1. 引入Bootstrap资源：添加了Bootstrap的CSS和JS文件，以及jQuery，确保模态框的样式和交互功能正常运行
2. 添加模态框结构：在页面中嵌入了标准的Bootstrap模态框，预留了显示活动名称和时长的占位元素
3. 绑定饼图点击事件：
   • 使用google.visualization.events.addListener给饼图绑定select事件
   • 点击切片时，通过chart.getSelection()获取选中行的索引
   • 从数据表格中提取对应活动的名称和时长，动态更新模态框内容
   • 调用$('#taskModal').modal('show')触发模态框显示

现在你点击饼图的任意切片，就会弹出包含对应活动详情的模态框啦！

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