时间戳

首页 > 解决方案 > 单击气泡图中的气泡时如何添加事件？

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

问题描述

当我使用 javaScript 单击气泡图（Chart.js）中的气泡时，我正在尝试添加一个事件，但没有什么对我有用。我试过这种方式

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

标签： javascriptchart.js

解决方案

我通过在选项中添加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。

推荐阅读