Question

我有条形图。当我点击其中一个栏时，我希望它返回它的高度。我已经尝试将鼠标clcik事件添加到图表中，但这不起作用。那么如何在点击时获得条形高度？

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

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>

如何在chartjs 2.6.0中点击条形高度

1 个答案: