如何在Chart.js饼图无数据时显示‘No Data’提示？

Got it! 给Chart.js饼图加无数据提示其实没那么复杂，我给你两种实用方案，直接适配你现有的代码：

方法一：直接在Canvas上绘制提示文本（简单直接） #

这种方式不需要额外依赖，先判断数据是否有效（为空或全为0），如果无效就直接在画布中心绘制“No Data”，有数据时再正常初始化图表。

修改你的脚本代码如下：

// 先判断数据是否有效：valuesCT不为空 且 至少有一个大于0的数据
const hasValidData = valuesCT && valuesCT.length > 0 && valuesCT.some(val => val > 0);

var ctxCT = document.getElementById("chart-area-CT").getContext("2d");

// 先销毁旧图表（如果存在）
if (myPieCT != null) {
  myPieCT.destroy();
  myPieCT = null;
}

if (hasValidData) {
  // 有数据时正常初始化饼图
  var configCT = {
    type : 'pie',
    data : {
      datasets : [{ data : valuesCT, backgroundColor : coloringCT, label : 'Distribution by Call Types' } ],
      labels : labelsCT
    },
    options : {
      segmentShowStroke : false,
      legend : false,
      animateScale : true,
      responsive : true,
      showAllTooltips : false,
      tooltips : {
        custom : function (tooltip) {
          if (!tooltip) return;
          tooltip.displayColors = false;
        }
      }
    }
  };
  myPieCT = new Chart(ctxCT, configCT);
} else {
  // 无数据时绘制提示文本
  ctxCT.clearRect(0, 0, ctxCT.canvas.width, ctxCT.canvas.height);
  // 设置文本样式，可根据页面风格调整
  ctxCT.font = "20px Arial";
  ctxCT.fillStyle = "#666";
  ctxCT.textAlign = "center";
  ctxCT.textBaseline = "middle";
  // 在画布中心绘制文本
  ctxCT.fillText("No Data", ctxCT.canvas.width / 2, ctxCT.canvas.height / 2);
}

方法二：使用Chart.js插件（支持响应式，更优雅） #

如果希望提示文本能跟着图表响应式缩放（比如窗口大小改变时自动调整位置），可以用Chart.js的插件机制，让插件自动在绘制前检查数据状态：

// 注册一个全局插件，所有Chart.js图表都能复用，也可以只给当前饼图单独注册
Chart.register({
  id: 'noDataPrompt',
  beforeDraw: function(chart) {
    // 检查当前图表是否有有效数据
    const hasValidData = chart.data.datasets.some(dataset => 
      dataset.data && dataset.data.length > 0 && dataset.data.some(val => val > 0)
    );
    if (!hasValidData) {
      const ctx = chart.ctx;
      const width = chart.width;
      const height = chart.height;
      
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      
      // 绘制提示文本
      ctx.save();
      ctx.font = "20px Arial";
      ctx.fillStyle = "#666";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("No Data", width / 2, height / 2);
      ctx.restore();
    }
  }
});

// 之后正常初始化你的饼图即可，插件会自动处理无数据情况
var configCT = {
  type : 'pie',
  data : {
    datasets : [{ data : valuesCT, backgroundColor : coloringCT, label : 'Distribution by Call Types' } ],
    labels : labelsCT
  },
  options : {
    segmentShowStroke : false,
    legend : false,
    animateScale : true,
    responsive : true,
    showAllTooltips : false,
    tooltips : {
      custom : function (tooltip) {
        if (!tooltip) return;
        tooltip.displayColors = false;
      }
    }
  }
};
var ctxCT = document.getElementById("chart-area-CT").getContext("2d");
if (myPieCT != null) {
  myPieCT.destroy();
}
myPieCT = new Chart(ctxCT, configCT);

小提示 #

• 方法一需要手动处理窗口resize的情况（比如监听resize事件重新检查数据），方法二的插件会自动跟着Chart.js的响应式逻辑触发，更省心。
• 你可以修改font、fillStyle等属性，让提示文本和你的页面风格更匹配。

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