Chartjs - 调整位于列中的图像大小

Question

I successfully inserted an image within a column, and I want to modify the width and the height of the image positioned on the column

The question is:

How can I access a canvaspattern height and width?.

If there is no way, what other approaches are there to position an image within a column? -Other than amcharts-.

Here is the code :

var img = new Image();
img.src = document.getElementById('image').src;
img.onload = function() {
var ctx = document.getElementById("myChart").getContext("2d");
var fillPattern = ctx.createPattern(img, 'no-repeat');

var chartData = {
  datasets : 
  [{
    label: 'user1',
    backgroundColor:'rgba(229,204,255,1)' ,
    data : [150]
  },
  {
    label: 'user2',
    backgroundColor: fillPattern,  
    data: [120]
    
  }
   ]
};

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options:options
 });
};

The output:

part of the left of the image is just shown on the bar:

the picture:

apple.png

Answer 1

One possible way is to use chartjs-plugin-labels to add images of desired size inside individual bars.

Please have a look at the code below.

 new Chart(document.getElementById('myChart'), { type: 'bar', data: { labels: ['A', 'B'], datasets: [{ label: 'My First Dataset', data: [500, 450], backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)'], borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)'], borderWidth: 1 }] }, options: { plugins: { labels: { render: 'image', textMargin: -160, images: [ null, { src: 'https://i.stack.imgur.com/556XZ.png', width: 150, height: 150 } ] } }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script> <canvas id="myChart" height="200"></canvas>