htm实现点击鼠标显示饼状图的数据，数据显示在饼状图上

要实现这个功能，你需要使用HTML、CSS和JavaScript。以下是一种实现的方法：

1. 在HTML中创建一个div元素，用于显示饼状图。

<div id="pie-chart"></div>

2. 在JavaScript中编写代码来生成饼状图。这可以使用许多JavaScript库中的一个，如D3.js或Chart.js。在此示例中，我们将使用Chart.js。

首先，在HTML文档中添加以下代码，以引用Chart.js库。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

然后，在JavaScript代码中编写以下代码，以生成饼状图：

var data = {
  labels: ["Red", "Blue", "Yellow"],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
    }
  ]
};

var options = {
  responsive: true,
  maintainAspectRatio: false
};

var ctx = document.getElementById("pie-chart").getContext("2d");
var myPieChart = new Chart(ctx, {
  type: "pie",
  data: data,
  options: options
});

这将生成一个饼状图，其中包含三个部分：红色，蓝色和黄色。每个部分的大小由数据数组中的值确定。

3. 在HTML中添加一个鼠标单击事件，以更新饼状图的数据。例如：

<button onclick="updateData()">Update Data</button>

4. 在JavaScript代码中编写以下代码，以更新饼状图的数据：

function updateData() {
  myPieChart.data.datasets[0].data = [200, 150, 100];
  myPieChart.update();
}

这将更新饼状图的数据，并在饼状图上显示新的数据。在此示例中，将饼状图的第一个部分的大小从300更改为200。调用`myPieChart.update()`方法以更新饼状图。