javascript - 如何在 Chart.js 的条形图列中添加背景图片？

Question

在 chart.js 中，我向条形图添加了背景图片(img.src，来自 url)，但背景仅适用于 repeat，而不是 repeat-y.

var img = new Image();
img.src = '<?php echo base_url(); ?>assets/images/graphpattern.png';
img.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    var fillPattern=ctx.createPattern(img, 'repeat');
    //repeat-y not working==>ctx.createPattern(img,'repeat-y');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
            datasets: [{
                data: [5,20, 35, 45],
                backgroundColor: fillPattern
            }]
        }
    })
}

Answer 1

ctx.createPattern() is a 2d canvas function , 与 patchy standards .我发现 repeat-x 和 repeat-y 的行为因浏览器而异。此处链接的示例在 Firefox 中有效(除了系列图标缺少带有 repeat-y 的背景图像)并且在 Chromium 中为空白，但情况相反 W3Schools example , Chromium 可以工作，而 Firefox 只能使用 repeat 和 no-repeat，可能是由于 long-standing bug .

提供的代码几乎没有修改自 Chart.js sample除了“Unable to parse color from object”错误外，看起来还不错，可能相关也可能不相关；问题可能是库和浏览器的混合，而不是代码中的任何内容。对于其他尝试简单图案背景的人，我建议减少损失并使用最后两个链接中提到的图案方法。