Chart.js条形图初始渲染context.element.height为NaN的修复方案咨询

问题场景 #

使用Chart.js配合vue-chartjs（Vue版本2.6）开发条形图时，尝试给每个柱子添加匹配高度的垂直渐变背景。通过Option Context设置backgroundColor为回调函数实现，但遇到异常：首次访问可能正常，刷新后所有柱子变为黑色；控制台显示初始渲染时context.element.height输出NaN，导致回调提前返回无法生成渐变，仅鼠标悬停柱子时渐变才正常显示。

问题原因 #

Chart.js在初始渲染阶段尚未完成图表元素的布局计算，此时调用backgroundColor回调时，context.element的y、height等尺寸属性还未赋值，回调返回undefined后，Chart.js会默认用黑色填充柱子。而鼠标悬停时触发重绘，此时元素尺寸已计算完成，渐变就能正常生成。

修复方案 #

方案1：调整回调判断逻辑，添加默认 fallback #

修改backgroundColor回调，当元素尺寸未就绪时返回默认纯色（或临时渐变），避免返回undefined；利用Chart.js自动重绘机制，待元素尺寸就绪后会重新生成正确渐变：

datasets: [
  {
    label: "Data One",
    backgroundColor: (context) => {
      const { ctx, element } = context.chart;
      // 元素尺寸未就绪时返回默认色
      if (isNaN(element.y) || isNaN(element.height)) {
        return "#55BBDD";
      }
      const background_1 = ctx.createLinearGradient(
        0,
        element.y,
        0,
        element.y + element.height
      );
      background_1.addColorStop(0.4, "#55BBDD");
      background_1.addColorStop(1, "#C8E8F6");
      return background_1;
    },
    data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
  },
],

方案2：用Chart.js插件在布局完成后强制重绘 #

通过afterLayout钩子，在图表布局完成后手动触发重绘，确保第二次渲染时元素尺寸已就绪：

// 图表options中添加插件配置
options: {
  plugins: {
    gradientFix: {
      afterLayout: (chart) => {
        // 布局完成后触发重绘
        chart.update();
      }
    }
  }
}

注意：此方案会触发两次渲染，存在轻微性能影响，但能确保初始渲染就显示正确渐变。

方案3：在beforeDraw钩子提前生成并缓存渐变 #

beforeDraw阶段图表元素尺寸已计算完成，可提前生成所有柱子的渐变并缓存，再在backgroundColor回调中读取缓存值：

datasets: [
  {
    label: "Data One",
    backgroundColor: (context) => {
      // 读取缓存的渐变， fallback到默认色
      return context.chart._gradientCache?.[context.dataIndex] || "#55BBDD";
    },
    data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
  },
],
options: {
  plugins: {
    customGradient: {
      beforeDraw: (chart) => {
        const { ctx, data } = chart;
        const gradientCache = {};
        // 遍历数据点生成对应渐变
        data.datasets[0].data.forEach((_, index) => {
          const element = chart.getDatasetMeta(0).data[index];
          if (!isNaN(element.y) && !isNaN(element.height)) {
            const gradient = ctx.createLinearGradient(
              0,
              element.y,
              0,
              element.y + element.height
            );
            gradient.addColorStop(0.4, "#55BBDD");
            gradient.addColorStop(1, "#C8E8F6");
            gradientCache[index] = gradient;
          }
        });
        // 缓存渐变到图表实例
        chart._gradientCache = gradientCache;
      }
    }
  }
}

效果验证 #

修改后刷新页面，初始渲染时柱子会显示默认色或直接显示正确渐变，不再出现黑色；鼠标悬停时也能保持正常的渐变效果。

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