Chart.js 2.7.0 Grouped Horizo​​ntal Bar Chart、グループ全体ではなく、1つのバーのデータを表示するツールチップを取得する方法は？ここ

Question

は、グループ化された水平棒グラフである：

http://jsfiddle.net/jmpxgufu/185/

するvar CTX =のdocument.getElementById（ "myChart"）のgetContext（ "2D"）。

 var chart = { 
     options: { 
     scales: { 
       yAxes: [{ barPercentage: 1.0 }], 
      }, 
     tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
console.log(tooltipItem); 
      return data.datasets[tooltipItem.datasetIndex].label +': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString(); 
} 
} 
},   
      responsive: true, 
      maintainAspectRatio: false, 
      animation: { 

        onComplete: function(animation) { 
        } 
       } 
     }, 
     type: 'horizontalBar', 
     data: { 
      labels: ['Topic1'], 
     datasets: [ 
     { 
     label: 'Something', 
     borderColor: 'blue', 
     borderWidth: 1, 
     backgroundColor: Color('blue').alpha(0.5).rgbString(), 
     data: [40], 
     fill: false 
     }, 
     { 
     label: 'Something else', 
     borderColor: 'orange', 
     borderWidth: 1, 
     backgroundColor: Color('orange').alpha(0.5).rgbString(), 
     data: [17], 
     fill: false 
     } 
     ] 
     }}; 

    var myLiveChart = new Chart(ctx, chart); 

チャートを見ると、ラベル 'Topic1'に関連付けられた2つのバー（オレンジ色と青色）があります。私はオレンジ色のバーの上に置くと

それは言う：

Topic1 
Something: 40 
Something else: 17 

私はちょうど青いバーの上に置くと、それは言う：

Topic1 
Something: 40 
Something else: 17 

あなたも気づくこと二つのバーがありますので、グループ内では、関数は2回実行され、私の文字列を返して、この「グループ化」ツールチップメッセージを作成します（console.logをそこに入れて2回実行されることを示します）。

私はホバーオーバーのデータを必要とします。

私は、私はそれが言いたいだけオレンジ色のバーの上にカーソルを置く：私は、私はそれが言いたいだけの青いバーの上に置くと

Topic1 
Something else: 17 

：

Topic1 
Something: 40 

をしかし、私は避難所どちらがアクティブなバー（2つのうちのどれ）であるかを決定する方法を理解していません。

私はここで何が欠けていますか？

Answer 1

あなたが後にある目的の動作を取得するには、あなたがpoint/nearestにツールチップmodeを設定する必要があります：docsから

tooltips: { 
    mode: 'nearest' 
} 

：

＃nearest
ポイントに最も近いアイテムを取得します。最も近い項目は、 （点、棒）のチャート項目の中心までの距離に基づいて決定されます。 2つ以上の項目が同じ距離にある場合は、最も小さい面積の が使用されます。 intersectがtrueの場合、マウスの位置がグラフ内の項目と交差するときにのみ がトリガーされます。 これは、ポイントが バーに隠れているコンボチャートで非常に便利です。

ここにはworking fiddleがあります。