图表.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

您还会注意到，由于组中有两个柱，因此该函数执行了两次，获取我返回的字符串，并形成此"分组"工具提示消息（我把控制台.log放在那里以显示它正在执行两次）。

我

只想要我悬停的柱的数据。

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

Topic1
Something else: 17

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

Topic1
Something: 40

但是，我还没有弄清楚如何确定哪个是活动柱（两者）。

我在这里错过了什么？

Answer 1

要获得所需的行为，您需要将工具提示设置为nearest / point mode ：

tooltips: {
   mode: 'nearest'
}

从文档：

# 最近
获取最接近该点的项。最近的项目是 根据到图表项目中心的距离确定 （点，条形）。如果 2 个或更多项目位于同一距离，则 使用最小的面积。如果相交为真，则仅 当鼠标位置与图形中的项目相交时触发。 这对于点隐藏在后面的组合图表非常有用 酒吧。

这是工作小提琴。

Answer 2

tooltips: {
            mode: 'nearest',
            intersect: true
}