在bar chart.js上显示图像以及标签（chartjs-plugin-datalabels）

Question

chartjs-plugin-datalabels支持显示与图形内容的值，数据，上下文有关的信息。需要根据值在每个图形上显示图像以及文本标签。请参阅附件快照

已尝试过为toopltip定制选项，但基本上需要尝试在插件数据标签中呈现html，以便还可以添加图像

插件：{数据标签：{锚点：“结束”，align：'开始'，字体：{大小：20，}}}

在条上显示图像

预期结果：

Answer 1

这可以通过如下组合chartjs-plugin-datalabels和chartjs-plugin-labels来实现：

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: ["2009", "2010", "2011", "2012"],
    "datasets": [{
      "label": "My First Dataset",
      "data": [25, 59, 80, 76],
      "fill": false,
      "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
      "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
      "borderWidth": 1
    }]
  },
  "options": {
    plugins: {
      datalabels: {
        anchor: "end",
        align  : "start"        
      },
      labels: {
        render: 'image',
        textMargin: -60,
        images: [
          null, 
          null, 
          {
            src: 'https://i.stack.imgur.com/9EMtU.png',
            width: 20,
            height: 20
          },
          null
        ]
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 300px;
}

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