在chart.js的面包圈图上显示每个圆弧的值

，可以通过以下步骤实现：

首先，确保已经引入了chart.js库，并创建一个canvas元素用于显示图表。
在JavaScript代码中，使用Chart对象创建一个面包圈图。可以使用new Chart()来实例化一个Chart对象，并传入canvas元素的引用和配置选项。
在配置选项中，设置options对象的tooltips属性为enabled: true，以启用鼠标悬停时显示数据的工具提示。
在数据集中，为每个圆弧提供数值。可以使用data属性中的datasets数组来定义数据集。每个数据集都包含一个data数组，其中的每个元素对应一个圆弧的值。
如果需要在圆弧上显示具体数值，可以使用Chart.js的插件机制来实现。可以通过Chart.pluginService.register()方法注册一个插件，并在插件的afterDraw方法中绘制数值。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Doughnut Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script>
    // 创建面包圈图
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [10, 20, 30], // 每个圆弧的值
          backgroundColor: ['red', 'green', 'blue'] // 每个圆弧的颜色
        }],
        labels: ['Red', 'Green', 'Blue'] // 每个圆弧的标签
      },
      options: {
        tooltips: {
          enabled: true // 启用工具提示
        }
      },
      plugins: [{
        afterDraw: function(chart) {
          var ctx = chart.chart.ctx;
          var dataset = chart.data.datasets[0];
          var meta = chart.getDatasetMeta(0);
          var total = dataset.data.reduce(function(previousValue, currentValue) {
            return previousValue + currentValue;
          });
          var radius = chart.innerRadius + ((chart.outerRadius - chart.innerRadius) / 2);
          ctx.fillStyle = '#000';
          ctx.font = '20px Arial';
          ctx.textBaseline = 'middle';
          ctx.textAlign = 'center';
          meta.data.forEach(function(element, index) {
            var data = dataset.data[index];
            var angle = element.hidden ? 0 : element._model.startAngle + (element._model.endAngle - element._model.startAngle) / 2;
            var position = chart.chart.getDatasetMeta(0).data[index]._model;
            var percent = parseFloat((data / total * 100).toFixed(1));
            var value = data.toString();
            ctx.fillText(value, position.x + Math.cos(angle) * radius, position.y + Math.sin(angle) * radius);
          });
        }
      }]
    });
  </script>
</body>
</html>

在这个示例代码中，我们创建了一个面包圈图，其中包含三个圆弧，每个圆弧的值分别为10、20和30。通过插件机制，在每个圆弧上绘制了对应的数值。同时，启用了工具提示，当鼠标悬停在圆弧上时，会显示对应的数值。

请注意，这只是一个简单的示例，你可以根据自己的需求进行定制和扩展。另外，如果你需要更多关于Chart.js的详细信息和其他类型图表的使用方法，可以参考腾讯云的Chart.js产品介绍页面：Chart.js产品介绍。