Chart.js 2.7.0 Grouped Horizo​​ntal Bar Chart，如何让工具提示显示一个条的数据，而不是整个组？

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

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

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

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

Topic1
Something else: 17

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

Topic1
Something: 40

但是，我还没有想出如何确定（两个）哪个是活动柱。

我在这里错过了什么？

Answer 1

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

tooltips: {
   mode: 'nearest'
}

来自 docs :

# nearest
Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If intersect is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.

这里是working fiddle。

Answer 2

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