Chart.js中能否修改条形图空白数据对应的背景颜色？

当然可以实现，你之前用fillColor和highlightColor无效，是因为Chart.js默认不会为null或0值的条目渲染条形，这些属性自然不会生效。下面是两种可行的解决方法：

方法1：预处理数据+动态颜色映射 #

先把数据中的空白值（null或0）替换成一个接近0的极小值，让Chart.js能渲染出条形，再通过颜色函数给这些极小值条目单独设置背景色：

// 原始数据，包含空白值
const originalData = [5, null, 3, 0, 7];
// 预处理：把null/0替换为极小值，确保条形被渲染
const processedData = originalData.map(val => val === null || val === 0 ? 0.0001 : val);

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: '数据',
      data: processedData,
      // 动态判断设置背景色
      backgroundColor: (context) => {
        const value = context.dataset.data[context.dataIndex];
        return value === 0.0001 ? '#e0e0e0' : '#36a2eb'; // 空白条用灰色，正常数据用蓝色
      },
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        // 隐藏极小值对应的刻度，避免显示干扰
        ticks: {
          callback: (value) => value > 0 ? value : ''
        }
      }
    }
  }
});

方法2：通过插件手动绘制空白背景 #

利用Chart.js的beforeDraw钩子，手动在空白数据对应的位置绘制矩形背景，不需要修改原始数据：

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: '数据',
      data: [5, null, 3, 0, 7],
      backgroundColor: '#36a2eb',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
  plugins: [{
    beforeDraw: (chart) => {
      const ctx = chart.ctx;
      const { chartArea, scales: { x, y } } = chart;
      const { left, top, bottom } = chartArea;

      // 遍历所有数据点，处理空白值
      chart.data.datasets[0].data.forEach((val, index) => {
        if (val === null || val === 0) {
          // 计算当前条形的位置和宽度
          const barHalfWidth = (x.getPixelForValue(index + 0.5) - x.getPixelForValue(index - 0.5)) / 2;
          const barX = x.getPixelForValue(index) - barHalfWidth;
          // 绘制灰色背景矩形
          ctx.fillStyle = '#e0e0e0';
          ctx.fillRect(barX, top, barHalfWidth * 2, bottom - top);
        }
      });
    }
  }]
});

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