Chart.js 2.7.0分组水平条形图，如何获取工具提示以显示一个条形图的数据，而不是整个组的数据？

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”相关联。

当我悬停在橙色条上时，它说：

Topic1
Something: 40
Something else: 17

当我悬停在蓝色条上时，它说：

Topic1
Something: 40
Something else: 17

您还会注意到，因为组中有两个条，所以函数执行了两次，取我的字符串我正在返回，并形成这个分组的工具提示消息（我把console.log放在那里以显示它正在执行两次）...

我只想要我悬停在上面的那个条的数据。

当我将鼠标悬停在橙色条上时，我希望它说：

Topic1
Something else: 17

当我悬停在蓝色条上时，我想让它说：

Topic1
Something: 40

但是，我还没有弄清楚如何确定哪个是活动条（两个条中的一个）。

我错过了什么？

Answer 1

要获得所需的行为，您需要将工具提示模式设置为最近的/点：

tooltips: {
   mode: 'nearest'
}

从文档中：

#最近的
获取离该点最近的项。根据到图表项中心的距离（点、条）确定最近的项。如果两个或多个项目位于同一距离，则使用面积最小的项目。如果intersect为true，则仅当鼠标位置与图形中的项目相交时才会触发此操作。这对于将点隐藏在栏后的组合图非常有用。

这是工作小提琴。