如何在图表.js的条形图列中添加背景图像

Question

>在图表.js中，我在条形图中添加了一个背景图像(img.src，来自网址(，但背景仅适用于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()是一个

2D画布函数，具有不完整的标准。我发现repeat-x和repeat-y的行为因浏览器而异。这里链接的示例在 Firefox 中有效(除了系列图标缺少带有 repeat-y 的背景图像(并且在 Chromium 中是空白的，但对于这个 W3Schools 示例，情况相反，Chromium 工作而 Firefox 仅适用于 repeat 和 no-repeat ，可能是由于长期存在的错误。

提供的代码几乎没有从 Chart.js 示例中修改，除了"无法解析对象的颜色"错误之外，看起来不错，该错误可能相关，也可能不相关;问题可能是库和浏览器的混合，而不是代码中的任何内容。对于其他尝试简单图案背景的人，我建议减少损失并使用最后两个链接中提到的图案方法。