Chart.js 2.9.4版本饼图如何移除零值扇区

在Chart.js 2.9.4版本中配置饼图数据集为[12,0,0]时，渲染流程会自动为零值条目生成无实际统计意义的扇区边界，可通过以下两类适配版本的方案实现零值扇区的移除，处理后即可消除示意图中残留的无效扇区，让有效值对应的扇区完整展示：

• 原始数据前置预处理（全场景兼容方案）
  在将数据传入图表初始化实例前，同步校验数据集数值，对零值对应的标签、背景色、数据值做批量过滤，从源头避免零值参与扇区计算，代码示例如下：

  // 原始未处理数据
  const rawConfig = {
    labels: ['有效统计项', '零值项1', '零值项2'],
    datasets: [{
      data: [12, 0, 0],
      backgroundColor: ['#36A2EB', '#FF6384', '#FFCE56']
    }]
  }
  // 过滤有效索引
  const validIndexList = rawConfig.datasets[0].data
    .map((val, idx) => val > 0 ? idx : -1)
    .filter(idx => idx !== -1)
  // 生成处理后可传入图表的配置
  const processedConfig = {
    labels: validIndexList.map(i => rawConfig.labels[i]),
    datasets: rawConfig.datasets.map(ds => ({
      ...ds,
      data: validIndexList.map(i => ds.data[i]),
      backgroundColor: validIndexList.map(i => ds.backgroundColor[i])
    }))
  }
  // 将processedConfig传入Chart实例完成初始化即可
  

  该方案无版本兼容问题，零值条目完全不参与渲染计算，不会出现相邻扇区边界错位、图例和数值不匹配的问题。

• 自定义插件动态过滤渲染（适配动态更新场景）
  如果需要保留原始数据结构、不频繁改动传入图表的数据源，可通过Chart.js的插件钩子，在扇区渲染阶段对零值条目做隐藏处理，代码示例如下：

  // 定义跳过零值扇区渲染的插件
  const hideZeroArcPlugin = {
    beforeDatasetsDraw: (chart) => {
      const arcElements = chart.getDatasetMeta(0).data
      arcElements.forEach((arc, index) => {
        // 判断当前索引对应数值为0时，将扇区渲染范围置零
        if (chart.data.datasets[0].data[index] <= 0) {
          arc._view.outerRadius = 0
          arc._view.innerRadius = 0
        }
      })
    }
  }
  // 初始化图表时引入插件
  new Chart(canvasContext, {
    type: 'pie',
    data: rawConfig,
    options: {
      // 原有饼图配置
    },
    plugins: [hideZeroArcPlugin]
  })
  

  该方案适配数据动态刷新的场景，后续更新数据集出现新增零值条目时，不需要重复编写过滤逻辑，插件会自动完成零值扇区的隐藏。

注意：不要用将零值改为极小值（如0.0001）的方式替代移除操作，在2.9.4版本中这类极小值会被渲染为肉眼可见的细条扇区，反而破坏图表整洁度。

内容的提问来源于stack exchange，提问作者Alexey Pavlyuk