2016-09-09 6 views
0

バブルチャートのバブルでonlickイベントをキャッチしようとしています。私はクリックされたバブルのラベルをコンソールに記録したい。私は実際にこのような仕事をする関数を書いたバブルチャートでonClickイベントをキャッチするにはどうすればよいですか?

$("#myChart").click(function(evt) { 
    var activePoints = myBubbleChart.getElementAtEvent(evt); 
    console.log(activePoints.label); 
}); 

この関数はバブルをクリックするたびにコンソールに "undefined"を記録します。私もgetBarsAtEventgetSegmentsAtEventのどれも試したことがありません。私のコードで何が間違っていますか?そして、誰かが私がクリックしたバブルのラベル値をどのように得ることができるか教えてください。

答えて

1

Chart.jsオプションには、onClickプロパティ(documentationを参照)が組み込まれています。

それはこのように動作します:

options: { 
    onClick: function(e) { 
     var element = this.getElementAtEvent(e); 

     // If you click on at least 1 element ... 
     if (element.length > 0) { 
      // Logs it 
      console.log(element[0]); 

      // Here we get the data linked to the clicked bubble ... 
      var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label; 
      // data gives you `x`, `y` and `r` values 
      var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index]; 
     } 
    } 
} 

チェックthis jsFiddle完全な例について。

+0

ありがとうございました。それはいくつかの意味がありますが、私はまだラベルの価値を得ることができません。要素[0]は、モデル、ビュー、xscale、yscaleなどに関するいくつかの情報を提供します。しかし、私が必要とするのは、クリックしたバブルのラベルとデータ値です。どうすれば入手できるのか教えてください。 –

+0

@ChiyaanSurajデータを取得する方法を示すために[my fiddle](https://jsfiddle.net/Lakbc0ck/2/)を更新しました。 'element [0] ._ datasetIndex'と' element [0] ._ index'の両方を使用すると、これを見つけるのに役立ちます。 - FYI、* 'onClick'コールバックの' this' *はグラフです。 – tektiv

+1

ありがとうTektiv。 –

関連する問題