在chartjs的条形顶部添加图像

2022-01-22 00:00:00 bar-chart charts javascript chart.js

我在我的网站上使用了不同的图表，这导致了一些问题，因此我们迁移到了 chartjs.一切正常，但我有一个在 chartjs 中找不到的要求.

I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.

在我正在开发的网站中，用户进行了评估，并根据评估结果显示图表.

In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.

所以在评估中，有一个问题你感觉恶化吗?"如果用户选择是，那么在图表中它会在该条上方显示一个图像，如下图所示.

So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.

在图片中，您可以在两个条形上方看到E".

In the picture you can see "E" above the two bars.

我想在 chartjs 中实现同样的效果.是否可以?如果没有，那么你们能否建议一种方法来通知用户他们选择了恶化".

I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".

谢谢

推荐答案

您可以使用 chartjs-plugin-labels.

请查看以下可运行的代码片段:

Please have a look at the following runnable code snippet:

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'My 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: {
      labels: {
        render: 'image',
        textMargin: 10,
        images: [
          {
            src: 'https://i.stack.imgur.com/9EMtU.png',
            width: 20,
            height: 20
          },
          null, 
          {
            src: 'https://i.stack.imgur.com/9EMtU.png',
            width: 20,
            height: 20
          },
          null
        ]
      }
    },
    layout: {
      padding: {
        top: 30
      }
    },
    legend: {
      display: false
    },
    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/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>

相关文章