这是一个分组水平条形图：
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
但是，我还没弄清楚如何确定哪个是活动条（两个） .
我在这里错过了什么？
1 回答
要获得所需的行为，您需要将工具提示
mode设置为 nearest / point ：来自docs：
这是working fiddle .