ng2-charts如何实现仅值大于0时显示居中datalabels

问题说明 #

使用ng2-charts搭配chartjs-plugin-datalabels开发堆叠柱状图时，存在以下现象：

• 当datalabels的anchor、align属性设为end（端点对齐）时，值为0的数据项默认不显示标签
• 当上述两个属性设为center（居中对齐）时，值为0的数据项仍会渲染标签，不符合预期

实现原理 #

chartjs-plugin-datalabels原生支持通过display配置项自定义标签显示规则，该配置优先级高于插件默认的边界隐藏逻辑，不受标签对齐、锚点位置的属性影响。通过在display回调中判断当前数据点的值，返回false即可隐藏对应标签，返回true则正常渲染。

具体修改方式 #

仅需修改component.ts文件中barChartOptions内的datalabels配置，新增display判断逻辑即可，html模板、插件注册、数据集配置均无需调整。
修改后的核心配置片段：

plugins: {
  legend: {
    display: true,
  },
  datalabels: {
    anchor: 'center',
    align: 'center',
    // 自定义标签显示规则
    display: (context) => {
      // 取当前渲染点的数值
      const value = context.dataset.data[context.dataIndex] as number;
      // 数值不为0时显示标签
      return value !== 0;
    }
  }
}

完整配置参考 #

public barChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    scales: {
      x: {},
      y: {
        min: 10
      }
    },
    plugins: {
      legend: {
        display: true,
      },
      datalabels: {
        anchor: 'center',
        align: 'center',
        display: (context) => {
          const currentValue = context.dataset.data[context.dataIndex] as number;
          return currentValue !== 0;
        }
      }
    }
  };

补充说明 #

• 若业务中需要同时过滤null、undefined等空值，可将判断条件调整为return currentValue !== 0 && currentValue != null
• 该逻辑兼容动态数据更新场景，触发随机更新数据方法后，显示规则会自动重新计算，无需手动调用图表刷新方法
• 现有代码中已经正确在barChartPlugins数组中注册了DataLabelsPlugin，无需额外调整插件引入逻辑

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