react-chartjs-2柱状图无数据显示undefined%如何改为不展示内容

问题根源是datalabels的formatter配置未对无效值做过滤，数据不存在时val为undefined，直接拼接字符串就会出现undefined%的异常显示。你只需要修改datalabels的配置即可：

修改方案1：通过formatter过滤 #

将原有datalabels配置替换为以下内容：

datalabels: {
  formatter: (val, context) => {
    // 仅当值为有效数字时返回百分比文本
    if (val === undefined || val === null || Number.isNaN(val)) {
      // 返回空字符串时，datalabels会自动不渲染该位置的标签
      return '';
    }
    return `${val}%`;
  },
},

修改方案2：通过display属性过滤（更推荐） #

也可以直接通过display配置控制标签是否渲染，逻辑更清晰：

datalabels: {
  // 返回false时该位置标签不会渲染
  display: (context) => {
    const val = context.dataset.data[context.dataIndex];
    return val !== undefined && val !== null && !Number.isNaN(val);
  },
  formatter: (val) => `${val}%`,
},

两种方案都可以实现无数据时对应位置不显示任何内容的需求，你的tooltip配置已经做了无效值判断，不需要额外修改。

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