如何在Chart.js 3中实现饼图所有tooltip加载后永久显示且不受鼠标操作影响

你原有基于Chart.js 2的代码在V3版本中无法运行，是因为Chart.js 3重构了Tooltip的内部API和插件注册逻辑，配置路径、调用方法都发生了不兼容的变更。以下是可直接运行的实现方案，可以保证图表加载完成后所有Tooltip永久显示，且不受任何鼠标操作影响：

完整可运行代码 #

HTML 代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chartContainer">
    <canvas id="chart" width="200" height="200"></canvas>
</div>

JS 代码 #

// 注册自定义永久显示Tooltip插件
const permanentTooltipPlugin = {
  id: 'permanentTooltip',
  afterDraw: (chart) => {
    const tooltip = chart.tooltip;
    // 遍历所有数据点构造激活状态
    const activePoints = chart.data.datasets.flatMap((dataset, datasetIndex) => {
      return dataset.data.map((_, dataIndex) => {
        return {
          datasetIndex,
          index: dataIndex,
          element: chart.getDatasetMeta(datasetIndex).data[dataIndex]
        };
      });
    });
    // 主动更新并渲染Tooltip
    tooltip.setActiveElements(activePoints, 0, 0);
    tooltip.update();
    tooltip.draw(chart.ctx);
  }
};

var data = {
  labels: ['a', 'b', 'c'], 
  datasets: [
    {
      data: [10, 20, 15],
      backgroundColor: ['#ff0000','#00ff00', '#00f']
    },
  ]
};

var options = {
  // 清空交互事件，屏蔽所有鼠标操作影响
  events: [],
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Pie Chart'
    },
    tooltip: {
      enabled: true,
      intersect: false,
      position: 'average',
      // 可根据需求自定义Tooltip样式、展示内容
      callbacks: {
        label: (context) => {
          return `${context.label}: ${context.parsed}`;
        }
      }
    }
  }
};

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context, {
  type: 'pie', 
  data: data, 
  options: options,
  // 挂载自定义插件
  plugins: [permanentTooltipPlugin]
});

核心修改说明 #

• 单独声明自定义插件，通过afterDraw钩子在图表每次渲染完成后主动构造所有数据点的激活状态，触发Tooltip渲染
• 配置events: []清空图表默认交互事件，完全屏蔽鼠标移动、点击等操作对Tooltip显示的影响
• 适配Chart.js 3的Tooltip API，使用setActiveElements方法批量指定要显示的Tooltip数据项

内容的提问来源于stack exchange，提问作者Dhana D.