單擊氣泡圖中的氣泡時如何添加事件？

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。