Angular ng2-charts饼图顶部显示0值空标签问题求助

核心原因 #

当饼图数据中存在0值时，datalabels插件会默认渲染该值的标签，即使该分类没有实际占比，这就是你看到的顶部空0值标签的来源。

解决方案1：修改datalabels渲染逻辑 #

在formatter函数中增加对数值是否为0的判断，仅当数值不为0时才渲染标签，同时保留正常数值的内部标签：

pieChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: 1,
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        fullSize: false,
        maxWidth: 200,
        labels: {
          font: { lineHeight: 2, size: 13 },
        },
      },
      title: {
        padding: 0,
        display: true,
        text: 'Bills Chart',
        position: 'left',
        font: {
          size: 20,
        },
      },
      datalabels: {
        formatter: (value: any, ctx: any) => {
          // 仅在有标签且数值不为0时返回格式化后的内容
          if (ctx.chart.data.labels && value !== 0) {
            return '$' + value;
          }
          return '';
        },
        font: { size: 20 },
      },
    },
  };

解决方案2：提前过滤0值数据 #

如果业务上不需要显示0占比的分类，可以在初始化饼图数据时直接过滤掉0值对应的标签和数据，从根源避免无效标签：

// 原始数据与标签
const rawLabels = [['Bills Payed'], ['Bills Outstanding']];
const rawData = [this.payed, this.outstanding];

// 过滤0值
const [filteredLabels, filteredData] = rawData.reduce(([labels, data], val, index) => {
  if (val !== 0) {
    labels.push(rawLabels[index]);
    data.push(val);
  }
  return [labels, data];
}, [[], []] as [string[][], number[]]);

// 赋值给饼图数据
this.pieChartData = {
  labels: filteredLabels,
  datasets: [{ data: filteredData }],
};

两种方案可根据业务需求选择：方案1保留图例中的全部分类但隐藏0值标签；方案2直接移除无占比的分类。

内容的提问来源于stack exchange，提问作者Mario Valenzuela Chagoya