本文详细讲解如何在 Chart.js 柱状图中为指定柱子设置图片填充（而非纯色），利用 Canvas createPattern 创建可重复/平铺的图像纹理，并确保动画过程中图像随柱子高度动态“展开”显示。
本文详细讲解如何在 chart.js 柱状图中为指定柱子设置图片填充（而非纯色），利用 canvas `createpattern` 创建可重复/平铺的图像纹理，并确保动画过程中图像随柱子高度动态“展开”显示。
在 Chart.js 中，backgroundColor 属性不仅支持 CSS 颜色字符串（如 'red'）或 RGBA 数组，还原生支持 Canvas 图形对象——包括 <img> 元素、CanvasPattern（由 createPattern() 生成）和 CanvasGradient。这意味着你可以将任意图片无缝用作柱子的填充纹理，实现视觉上更富表现力的数据可视化效果（例如品牌 logo 填充、材质质感或自定义图案）。
关键在于：不能直接将 Image 实例赋值给 backgroundColor，因为 Chart.js 无法直接渲染未处理的原始图像对象。必须先通过 Canvas 2D 上下文调用 createPattern(image, repetition) 方法，生成一个符合规范的 CanvasPattern 对象，再将其传入配置项。
以下是一个完整、可运行的实现示例：
<canvas id="myChart" width="400" height="250"></canvas><script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script><script>
const ctx = document.getElementById('myChart').getContext('2d');
// 创建并预加载图像
const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
image.onload = function() {
// ✅ 正确方式：用 createPattern 包装图像，生成 CanvasPattern
const fillPattern = ctx.createPattern(image, 'repeat'); // 可选值：'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
const config = {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Sales (units)',
data: [12, 19, 3, 15],
backgroundColor: [
'rgba(75, 192, 192, 0.6)', // Q1：青绿色半透明
fillPattern, // Q2：Logo 平铺填充 ✅
'rgba(255, 99, 132, 0.6)', // Q3：红色半透明
'rgba(54, 162, 235, 0.6)' // Q4：蓝色半透明
],
borderColor: [
'rgba(75, 192, 192, 1)',
'rgba(0, 0, 0, 0.8)', // 图像柱建议加深边框增强对比
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: { display: true }
},
scales: {
y: { beginAtZero: true }
}
}
};
const myChart = new Chart(ctx, config);
};
// ⚠️ 错误示范（勿复制）：
// backgroundColor: [ ..., image, ... ] → 会导致黑块或渲染失败
</script>
? 重要注意事项：
-
必须等待图像
onload完成后再创建 pattern 和初始化图表，否则createPattern可能接收未加载完成的空图像，导致黑色/空白填充； -
repetition参数决定图像排布方式：'repeat'（默认，全区域平铺）、'no-repeat'（居左上单次显示）、'repeat-x'（水平重复）、'repeat-y'（垂直重复）； - 若希望图像随柱子动画“从底向上展开”，无需额外操作——Chart.js 默认对
backgroundColor使用的 pattern 会自动适配柱子当前绘制高度，天然支持动画过程中的渐进式显示； - 支持跨域图像，但需确保服务端设置了正确的 CORS 头（如
Access-Control-Allow-Origin: *），否则createPattern将因安全限制抛出异常；本地文件（file://协议）可能受限，建议部署到本地服务器（如http-server）调试。
通过该方案，你不仅能复现 Stack Overflow 中提到的“图像随动画揭示”效果，还可灵活拓展至渐变、SVG 图案、甚至动态生成的 Canvas 图形填充，大幅提升 Chart.js 的定制能力与设计表现力。
