Chartjsバージョン2.Xでカスタムツールチップイベントを設定する方法

Question

こんにちは、私はChart.js折れ線グラフでデータポイントにクリックイベントを添付しようとしています。

しかし、公式文書にはそのような情報はありません。ツールチップ上でカスタムイベントを行うソースが見つかりましたが、バージョン1.Xを使用しているようです（add custom event on chartjs） - バージョン2.xではアクセスできないChart.defaults -

私は次のようなことをしています。

• 私は
• hoverイベントが残ることになるChart.js折れ線グラフのデータポイントにclickイベントが追加されます。

参考までに、私が書いたコードはここにあります。

function makeGraphSuitableData(items, type){ 
    var object = { 
     labels : [] 
     , data : [] 
    } 
    if(type == 'month') { 
     object.labels = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]; 
     object.data = new Array(12); 
     for(var i = 0; i < object.labels.length; i++) { 
      var datas = items.filter(function(item){ 
       return (item.reg_month == object.labels[i]); 
      }) 
      console.log('datas', datas); 

      if(datas && datas.length > 0){ 
       var single = datas[0]; 
       object.data[(object.labels[i] * 1) - 1] = single.frequency; 
      } else { 
       object.data[(object.labels[i] * 1) - 1] = 0; 
      } 
     } 
     object.labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; 
    } 
    return object; 
} 

function drawGraph(holder, statistics){ 

    var statistics = [ 
     { 
      labels : "01" 
      , frequency : "100" 
     }, { 
      labels : "02" 
      , frequency : "150" 
     } 
    ] 

    var canvas = holder.querySelector('canvas'); 
    if(!canvas){ 
     var canvas = document.createElement('canvas'); 
     canvas.width = 400; canvas.height = 150; 
     holder.appendChild(canvas); 
    } 

    var graphObject = makeGraphSuitableData(statistics, 'month'); 

    // Bar-Graph 
    var type = 'line'; //bar, line 
    var displayLabel = 'Expose counts'; 

    switch (type){ 
     case 'line': 
      var myChart = new Chart(canvas, { 
       type: type, 
       data: { 
        labels: graphObject.labels, 
        datasets: [{ 
         label: displayLabel, 
         data: graphObject.data, 
         fill: false, 
         lineTension: 0, 
         backgroundColor: "rgba(75,192,192,0.4)", 
         borderColor: "rgba(75,192,192,1)", 
         borderCapStyle: 'butt', 
         borderDash: [], 
         borderDashOffset: 0.0, 
         borderJoinStyle: 'miter', 
         pointBorderColor: "rgba(75,192,192,1)", 
         pointBackgroundColor: "#fff", 
         pointBorderWidth: 1, 
         pointHoverRadius: 5, 
         pointHoverBackgroundColor: "rgba(75,192,192,1)", 
         pointHoverBorderColor: "rgba(220,220,220,1)", 
         pointHoverBorderWidth: 2, 
         pointRadius: 1, 
         pointHitRadius: 10, 
         spanGaps: false 
        }] 
       } 
      }); 


      canvas.addEventListener('click', function(e){ 
       var x = myChart; 
       window.x = x; 
      }, false); 
      break; 
    } 
} 

お読みいただきありがとうございます。 getPointsAtEventはバージョン2.Xでは姿を消しました。私のポイントをクリアするには

====== UPDATES 24MARの======

、私はポストを更新しました。 私の考えでは、データポイントにclickイベントを追加するには、データポイントオブジェクトを取得する必要があります。

しかし、これらのポイントにアクセスする方法はわかりません。 Chartオブジェクトを調べましたが、getDataPoints()またはgetTooltips()が見つかりませんでした。これらのオブジェクトへのアクセスは解決策になるはずです。

FIDDLE

Answer 1

the apiごとにこれを行うための（文書化された）正しい方法は、.getElementAtEvent()プロトタイプメソッドを使用することです。

他の回答は機能しますが、チャートに複数のデータセット（例：行など）がある場合は機能しません。さらに、新しいリリースでいつでも変更できるchart.jsオブジェクトの文書化されていないオブジェクトやプロパティに依存しています。

document.getElementById("canvas").onclick = function(evt){ 
    var activePoint = myChart.getElementAtEvent(event); 

    // make sure click was on an actual point 
    if (activePoint.length > 0) { 
    var clickedDatasetIndex = activePoint[0]._datasetIndex; 
    var clickedElementindex = activePoint[0]._index; 
    var label = myChart.data.labels[clickedElementindex]; 
    var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementindex];  
    alert("Clicked: " + label + " - " + value); 
    } 
}; 

ここには、上記のコードを示すcodepen exampleがあります。

Answer 2

は、常にすべての問題を解決する方法があります。それは約30分かかったが、私はそれを見つけた。あなたのjsfiddleで

、すぐ下に変更：

canvas.addEventListener('click', function(e){ 
       var x = myChart; 
}, false); 
break; 

canvas.addEventListener('click', function(e){ 
       var x = myChart; 
       if(x.active[0]){ 
        var value= x.tooltip._data.datasets["0"].data[x.active["0"]._index]; 
        var label = x.tooltip._data.labels[x.active["0"]._index]; 
        console.log(value + " at "+ label); 
       } 

}, false); 
break; 

にあなたが labelと valueを経由してポイントにアクセスする必要があります。お楽しみください:)