可以在ChartJS中使用图像作为条形图的背景色吗？

wb1gzix0 于 12个月前发布在 Chart.js

关注(0)|答案(1)|浏览(200)

我想创建一个条形图，其中一个条形图中有一个图像，它看起来像图像显示的酒吧动画进入视图。
我尝试创建一个保存图像的变量，并将该栏的backgroundColor设置为该变量。

var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };
    img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

字符串
在chart config中：

backgroundColor: [
          'rgba(255, 255, 255, 0)',
          img,
          'rgba(255, 255, 255, 0)'
          ],

型
这只会导致一个黑色的条。我有点想这样做：Fill Chart.js bar chart with diagonal stripes or other patterns只与一个预定义的jpg。

chart.js

来源：https://stackoverflow.com/questions/77581095/is-it-possible-to-use-an-image-as-a-bars-background-color-in-chartjs

1条答案

按热度按时间

gkl3eglg1#

感谢@kikon修复了我的代码后，下面的代码应该可以回答你的问题。你可以在这里找到文档。

const ctx = document.getElementById('myChart').getContext('2d');

const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';

image.onload = function(){
  const fillPattern = ctx.createPattern(image, 'repeat');

  const cfg= {
    type:'bar',
    data:{
      labels:[0,1,2,3],
      datasets:[{
        label: 'A',
        backgroundColor:['black', 'red', 'blue', fillPattern],
        data: [2,4,6,8]
      }]
    }
  }

  const myChart = new Chart(ctx, cfg);
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

可以在ChartJS中使用图像作为条形图的背景色吗？

1条答案

相关问题

热门标签

最新问答