求助：如何让Chart.js饼图的数据标签永久固定显示在对应位置

你需要让饼图的数据标签始终可见，而非仅在鼠标悬停时显示。问题出在你配置了datalabels但未引入对应的Chart.js插件——Chart.js本身不内置数据标签功能，必须额外引入chartjs-plugin-datalabels插件才能让配置生效。

修改要点： #

• 在HTML的<head>中添加chartjs-plugin-datalabels的CDN引入链接
• 保留你原有options.plugins.datalabels的配置（该配置已满足标签显示需求）

完整可运行代码： #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Pie Chart Example</title> 
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<!-- 新增：引入数据标签插件 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
</head> 
<body> 
<div style="position: relative;"> 
<canvas id="pieChart" width="400" height="400"></canvas> 
</div>

<script> 
var canvas = document.getElementById('pieChart');
var pieChart = new Chart(canvas, {
  type: 'pie',
  data: {
    labels: ['Online', 'Offline'],
    datasets: [{
      data: [8, 2],
      backgroundColor: ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'],
      borderWidth: 0
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'end',
        offset: 10,
        formatter: (value, ctx) => {
          let label = ctx.chart.data.labels[ctx.dataIndex];
          return label + ': ' + value + '%';
        }
      }
    }
  }
});
</script>   
</body>   
</html>

修改完成后，饼图的数据标签会永久固定显示在对应位置，无需鼠标悬停即可查看。

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