Chart.js环形饼图：单数据宽度调整与起始角度修改需求

问题1：调整单组数据的显示宽度 #

Chart.js默认环形图（doughnut）单个dataset内的所有数据块宽度统一，要实现单组数据宽度不同，需将数据拆分为两个独立dataset，通过radius属性分别控制各自的环宽度。

修改思路 #

• 把原[70, 30]的单组数据拆成两个独立dataset，分别对应目标占比的数据
• 给需要调整宽度的dataset设置更大/更小的radius值（例如让30%的块更宽，设置radius: '100%'，70%的块设置radius: '70%'）
• 保持两个dataset的cutout值一致，确保内圈大小统一

问题2：修改数据块的起始角度 #

Chart.js完全支持自定义起始角度，通过options中的rotation属性实现，单位为度：

• 默认值-90对应12点钟方向
• 0对应3点钟方向
• 90对应6点钟方向
• 180对应9点钟方向

若需让特定数据块从指定角度开始，可配合调整数据顺序，将目标数据块排在第一位，起始角度会从该位置开始绘制。

修改后的完整代码 #

JavaScript 部分 #

// Donut Graph - Listings Limit
var canvas = document.getElementById('donutGraph');
var donutChart = new Chart(canvas, {
  type: 'doughnut',
  data: {
    datasets: [
      // 30%数据块（设置更宽的环）
      {
        data: [30],
        backgroundColor: ['#1C64F2'],
        borderWidth: 0,
        radius: '100%',
        hoverOffset: 0
      },
      // 70%数据块（设置较窄的环）
      {
        data: [70],
        backgroundColor: ['#E1EFFE'],
        borderWidth: 0,
        radius: '70%',
        hoverOffset: 0
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '40%',
    legend: {
      display: false
    },
    rotation: -90, // 起始角度设为12点钟方向
    plugins: {
      datalabels: {
        display: true,
        color: '#fff',
        formatter: (value, ctx) => {
          let sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
          let percentage = (value * 100 / sum).toFixed(0);
          return percentage + "%";
        }
      }
    }
  }
});

// Donut Graph Two - Gross Revenue
var canvastwo = document.getElementById('donutGraphtwo');
var donutCharttwo = new Chart(canvastwo, {
  type: 'doughnut',
  data: {
    datasets: [
      // 70%数据块（设置更宽的环）
      {
        data: [70],
        backgroundColor: ['#0E9F6E'],
        borderWidth: 0,
        radius: '100%',
        hoverOffset: 0
      },
      // 30%数据块（设置较窄的环）
      {
        data: [30],
        backgroundColor: ['#DEF7EC'],
        borderWidth: 0,
        radius: '70%',
        hoverOffset: 0
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '40%',
    legend: {
      display: false
    },
    rotation: -90, // 根据设计需求调整起始角度
    plugins: {
      datalabels: {
        display: true,
        color: '#fff',
        formatter: (value, ctx) => {
          let sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
          let percentage = (value * 100 / sum).toFixed(0);
          return percentage + "%";
        }
      }
    }
  }
});

补充说明 #

• 调整radius的百分比可控制数据块宽度，数值越大环越宽
• 修改rotation值可自定义起始角度，例如设置rotation: 0让数据块从右侧开始绘制
• 设置hoverOffset: 0避免鼠标悬停时数据块出现位移

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