1

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

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

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

谢谢你的帮助！

4

1 回答 1

2

首先，将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>

于 2017-08-18T22:54:00.920 回答