如何在 chartjs 2.6.0 中单击时获得条形高度答案

【问题标题】：How can I get bar height on click in chartjs 2.6.0如何在 chartjs 2.6.0 中单击时获得条形高度
【发布时间】：2017-08-18 22:38:28
【问题描述】：

我有一个条形图。当我单击其中一个栏时，我希望它返回其高度。我曾尝试将鼠标 clcik 事件添加到图表，但没有奏效。那么如何获得点击时的条形高度？

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

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

感谢您的帮助！

【问题讨论】：

标签： javascript charts chartjs-2.6.0

【解决方案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>

【讨论】：

太棒了。非常感谢:)