Question

当我使用 javaScript 在气泡图 (Chart.js) 中单击气泡时，我尝试添加一个事件，但没有任何效果。我试过这种方式

$("#bubbleChart").click(function (e) {
  var activePoints = myChart.getElementsAtEvent(e);
  if (activePoints.length > 0) {
    alert("yes");
  } else {
    alert("no");
  }
});

Answer 1

我通过在选项中添加onClick:function(e)解决了这个问题，如下所示：

  let labels = [];
  let values = [];
  let ctx = "bubble_l1_chart"

  result.data.traits.forEach((a) => {
    labels.push(a._id)
    values.push({y:a.y, x:a.x, r: 5, z:a.z, desc: a._id})
  })

  bubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: {
      labels: labels,
      datasets: [{
        data: values
      }]
    },
    options: {
      onClick: function(e) {
          var element = this.getElementAtEvent(e);

          if (element.length > 0) {
              var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label;
              var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];

              //add code here to do whatever you want
              console.log(data);
          }
      }          
    }
  });

说明：在 new Chart() 内部创建一个函数，然后使用数据值提供给对象。

注意我是如何在数据值中添加一个“desc”键的，这样我就可以识别被点击的气泡的 ID。

单击气泡图中的气泡时如何添加事件？

1 个答案: