如何使用chart.js将图像作为标签添加到画布图表

7lrncoxx  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(204)

我正在生成一个chart.js画布条形图。我尝试做的是,在labels数组中,添加与每个标签匹配的图像,而不仅仅是文本标签本身。下面是该图表的代码:我从中获取数据的json对象有一个图像url,我想用它来显示图片:

$.ajax({
method: "get",
url: "http://localhost:3000/admin/stats/show",
dataType: "json",
error: function() {
  console.log("Sorry, something went wrong");
},
success: function(response) {
  console.log(response)
  var objectToUse = response.top_dogs
  var updateLabels = [];
  var updateData = [];
  for (var i = 0; i < objectToUse.length; i+=1) {
    updateData.push(objectToUse[i].win_percentage * 100);
    updateLabels.push(objectToUse[i].title);
  }
  var data = {
    labels: updateLabels,
    datasets: [
      {
        label: "Top Winners Overall",
        fillColor: get_random_color(),
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: get_random_color(),
        highlightStroke: "rgba(220,220,220,1)",
        data: updateData
      }
    ]
  };

  var options = {
    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero : true,

    //Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1,

    //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowHorizontalLines: true,

    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,

    //Boolean - If there is a stroke on each bar
    barShowStroke : true,

    //Number - Pixel width of the bar stroke
    barStrokeWidth : 2,

    //Number - Spacing between each of the X value sets
    barValueSpacing : 5,

    //Number - Spacing between data sets within X values
    barDatasetSpacing : 2,
  };

  var loadNewChart = new Chart(barChart).Bar(data, options);
  }

});
如果任何人有一个解决方案,这将是非常感谢!

nwwlzxa7

nwwlzxa71#

我知道这是一个老帖子,但由于它已经被查看了很多次,我将描述一个与当前Chart.js版本2.9.3一起工作的解决方案。
Plugin Core API提供了一系列可以用来执行自定义代码的钩子。您可以使用afterDraw钩子直接在画布上使用CanvasRenderingContext2D绘制图像(图标)。

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx; 
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales['y-axis-0'];
    xAxis.ticks.forEach((value, index) => {  
      var x = xAxis.getPixelForTick(index);   
      ctx.drawImage(images[index], x - 12, yAxis.bottom + 10);
    });      
  }
}],

标签的位置必须通过xAxes.ticks.padding定义,如下所示:

xAxes: [{
  ticks: {
    padding: 30
  }   
}],

请看一下下面的可运行代码片段。
第一个

tkclm6bt

tkclm6bt2#

Chart.js v3+饼图、圆环图和极坐标图解决方案

有了Chart.js的第3版和chart.js-plugin-labels的更新版本,现在这变得非常简单。
options.plugins.labels中,将render: image和嵌套数组images与包含属性srcwidthheight的对象相加。
第一个

相关问题