问题描述
在 Chart.js v2 中,ChartTooltipItem[] 的 datasetIndex 属性标识堆叠条形图的哪一段被点击。这允许为堆积条形图的每个部分自定义工具提示内容。
在 v3 中,TooltipItem[] 提供数据集,但不识别点击了哪个数据集。每个 TooltipItem 都有一个 datasetIndex 字段,但它只是匹配 TooltipItem[] 中的索引,而不是识别点击的片段。
有没有人在 V3 工具提示回调中找到一个字段来识别点击了堆积条形图的哪个部分?或者这个功能在 v3 重写中丢失了吗?
解决方法
它工作正常,唯一不同的是它似乎在 v2 中默认为 point
模式,而现在它使用 index
模式,如果您将其改回 { {1}} 它按预期工作:
point
var options = {
type: 'bar',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: 'red'
},{
label: '# of Points',data: [7,11,8,7],backgroundColor: 'blue'
}
]
},options: {
plugins: {
tooltip: {
mode: 'point',callbacks: {
beforeBody: (ttItems,x) => {
ttItems.forEach((ttItem) => {
console.log('BeforeBody: ',ttItem.datasetIndex,ttItem.dataIndex)
})
},afterBody: (ttItems,x) => {
ttItems.forEach((ttItem) => {
console.log('AfterBody: ',ttItem.dataIndex)
})
}
}
}
},scales: {
y: {
stacked: true
},x: {
stacked: true
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);