javascript - 如何在 chartjs 2.6.0 中单击时获得条形高度

Question

我有一个条形图。当我点击其中一个栏时，我希望它返回它的高度。我曾尝试向图表添加鼠标点击事件，但没有成功。那么点击时如何获取bar的高度呢？

这是我用来创建图表的代码..

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: cm_labels,
    datasets: [{
      label: 'Number of votes',
      data: cm_data,
     backgroundColor: 'red'
    }]
  },
}}

感谢您的帮助!

Answer 1

首先，将 onClick 方法添加到您的图表选项，当图表检测到对自身的任何点击时将触发该方法。

然后要在触发 onClick 方法时获取实际的条形高度，您可以使用 getElementAtEvent()方法，因此:

onClick: function(event) {
   var bar = this.getElementAtEvent(event);
   if (!bar.length) return; //return if not clicked on bar
   var barHeight = bar[0].height();
   alert(barHeight);
}

ᴅᴇᴍᴏ

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      onClick: function(event) {
         var bar = this.getElementAtEvent(event);
         if (!bar.length) return; //return if not clicked on bar
         var barHeight = bar[0].height();
         alert(barHeight);
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>