Chart.js饼图数据全为0时显示Empty Data文本的实现求助

嘿，我懂你这个痛点！当Chart.js饼图的所有数据值都是0的时候，它确实不会渲染任何图形，整个画布空着体验很差。咱们可以给代码加个判断逻辑，在这种空数据场景下直接在画布上显示“Empty Data”的提示文本，下面是修改后的完整代码，我给你拆解下关键步骤：

修改后的完整代码 #

// 获取目标canvas元素
const ctx = $(@el).find('#active-goals-status canvas#pie-chartcanvas')[0];
ctx.height = '100%'; // 修正原代码的语法错误，添加引号

const labels = [];
const values = [];

// 遍历状态数据填充标签和值数组
$.each(@status_model.get('goal_status'), (status, value) => {
  labels.push(status);
  values.push(value);
});

// 检查数据是否全为0（或总和为0）
const isEmptyData = values.every(val => val === 0) || values.reduce((total, val) => total + val, 0) === 0;

// 先销毁可能存在的旧图表实例，避免重复渲染冲突
if (window.myPieChart) {
  window.myPieChart.destroy();
}

if (isEmptyData) {
  // 获取canvas的2D绘图上下文
  const canvasCtx = ctx.getContext('2d');
  // 清空画布
  canvasCtx.clearRect(0, 0, ctx.width, ctx.height);
  // 设置提示文本的样式（和原图表标题风格对齐）
  canvasCtx.font = '12px Arial';
  canvasCtx.fillStyle = '#999';
  canvasCtx.textAlign = 'center';
  canvasCtx.textBaseline = 'middle';
  // 在画布中心绘制提示文本
  canvasCtx.fillText('Empty Data', ctx.width / 2, ctx.height / 2);
} else {
  // 数据正常时初始化饼图
  window.myPieChart = new ChartNew(ctx, {
    type: 'pie',
    data: {
      labels: labels,
      datasets: [{
        backgroundColor: ['#DCDCDC','#FF0000','#00FF00','#FFFF00'],
        data: values
      }]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: ECL.t('goals_status_upcase', {default_value: 'GOAL STATUS'}),
        position: 'bottom',
        fontSize: 12,
        fontColor: '#999',
        fontStyle: 'normal'
      },
      legend: {
        display: false
      },
      layout: {
        padding: {
          left: 0,
          right: 0
        },
        margin: {
          left: 0,
          right: 0
        }
      }
    }
  });
}

关键逻辑说明 #

• 空数据判断：用every检查每个值是否都是0，同时用reduce计算总和是否为0，覆盖所有空数据场景（比如数组里混合0和空值的情况）；
• 旧实例销毁：每次操作前销毁已存在的图表实例，防止多次渲染导致的画布冲突；
• 提示文本绘制：直接操作canvas的2D上下文，在画布中心绘制提示文本，样式和原图表标题保持一致，保证视觉统一；
• 语法修正：原代码里ctx.height = 100%缺少引号，修正为'100%'避免语法错误，同时调整了对象字面量的格式，符合JS语法规范。

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