如何使用Chart.js在环形图单个扇区内展示多个子分段且不影响图例

1. 数据结构调整 #

将原本单一的「已完成」扇区拆分为多个对应不同用户的子项，给数据集添加自定义属性存储对应用户名，未完成项单独保留：

const progressData = {
  // 仅用于内部匹配，不会全量展示在图例中
  innerLabels: ['用户A完成量', '用户B完成量', '用户C完成量', '未完成'],
  datasets: [{
    data: [25, 15, 10, 50], // 前三项为不同用户的完成占比，最后一项为未完成占比
    backgroundColor: ['#16a34a', '#22c55e', '#4ade80', '#d1d5db'], // 已完成项用同色系深浅区分，未完成用灰色
    // 自定义属性存储对应用户名
    ownerUsers: ['张三', '李四', '王五', null]
  }]
}

2. 图例冗余过滤 #

通过图例的filter回调，仅保留「已完成」、「未完成」两个主图例，避免子项都出现在图例中：

const chartOptions = {
  plugins: {
    legend: {
      filter: (legendItem) => {
        // 自定义生成两个主图例项，过滤掉所有子项
        const showTexts = ['已完成', '未完成']
        return showTexts.includes(legendItem.text)
      },
      // 配合自定义生成图例的文本和样式
      labels: {
        generateLabels: (chart) => {
          const data = chart.data
          if (data.datasets.length) {
            return [
              {
                text: '已完成',
                fillStyle: '#16a34a',
                strokeStyle: '#16a34a'
              },
              {
                text: '未完成',
                fillStyle: '#d1d5db',
                strokeStyle: '#d1d5db'
              }
            ]
          }
          return []
        }
      }
    }
  }
}

3. 悬浮提示自定义 #

调整tooltip回调，悬浮到已完成子分段时显示对应用户名和完成量：

const chartOptions = {
  plugins: {
    tooltip: {
      callbacks: {
        label: (context) => {
          const userName = context.dataset.ownerUsers[context.dataIndex]
          const value = context.parsed
          if (userName) {
            return `完成人：${userName}，完成占比：${value}%`
          }
          return `未完成占比：${value}%`
        }
      }
    }
  }
}

4. 额外适配建议 #

所有已完成子项统一使用绿色系的不同深浅，未完成使用独立的灰色系，保证视觉上已完成部分仍是连续的整体块，和未完成部分有明显区分，符合用户对进度环的常规认知。

内容的提问来源于stack exchange，提问作者Darcy Power