Adding image on the top of bar in 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.

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

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".

Thank you

回答1:

You can place images on top of individual bars using 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>

来源：https://stackoverflow.com/questions/52110684/adding-image-on-the-top-of-bar-in-chartjs

标签

javascript

charts

chart.js

bar-chart