Chart.js v4 饼图扇区径向偏移实现求助（原v2.6代码适配）

要实现饼图指定扇区的径向偏移效果，以下是适配Chart.js v4浏览器环境的改造方案，替代原v2版本的代码：

完整实现代码 #

HTML 部分 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<canvas id="chart" width="400" height="300"></canvas>

JavaScript 部分 #

// 复制饼图默认配置，创建自定义图表类型的默认配置
Chart.defaults.cutOutPie = Chart.helpers.deepClone(Chart.defaults.pie);

// 自定义饼图控制器，继承自PieController
class CutOutPieController extends Chart.PieController {
  updateElement(arc, index, reset) {
    // 调用父类的updateElement方法完成基础更新
    super.updateElement(arc, index, reset);
    
    // 获取当前扇区的偏移量，默认0
    const displacement = this.getDataset().displacements[index] || 0;
    if (displacement === 0) return; // 无偏移则直接返回
    
    // 获取扇区的模型数据
    const model = arc._model;
    // 计算扇区中心角度
    const angle = model.startAngle + model.circumference / 2;
    
    // 对扇区中心坐标进行偏移
    model.x += Math.cos(angle) * displacement;
    model.y += Math.sin(angle) * displacement;
  }
}

// 注册自定义控制器和图表类型
Chart.register(CutOutPieController);
Chart.register({
  id: 'cutOutPie',
  type: 'cutOutPie',
  defaults: Chart.defaults.cutOutPie,
  controller: CutOutPieController
});

// 初始化图表
new Chart('chart', {
  type: 'cutOutPie',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f'],
    datasets: [{
      data: [1, 7, 2, 8, 3, 9],
      backgroundColor: ['red', 'orange', 'green', 'gold', 'pink', 'blue'],
      displacements: [0, 0, 40, 0, 0, 16], // 对应每个扇区的偏移量
    }],
  },
});

关键修改说明 #

• 控制器继承方式：v4中不再使用extend，而是通过ES6类继承Chart.PieController，用super调用父类方法
• 配置克隆：原Chart.helpers.clone改为Chart.helpers.deepClone，v4中需要深拷贝默认配置
• 注册方式：v4必须通过Chart.register()注册自定义控制器和图表类型，不能直接挂载到Chart.controllers上
• 逻辑保持一致：核心的偏移计算逻辑和原v2版本一致，通过计算扇区中心角度，对坐标进行径向偏移

内容的提问来源于stack exchange，提问作者Barry Hamilton