ngOnInit(): void {
var myChart = new Chart('myChart', {
type: 'bar',
data: {
labels: ['Modes'],
datasets: [
{
label: 'A',
data: [this.data.a],
borderColor: 'rgba(255,105,180,1)',
backgroundColor: 'rgba(255,105,180,0.2)',
barPercentage:0.4,
borderWidth:2,
order: 1
},
{
label: 'B',
data: [this.data.b],
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
barPercentage:0.4,
borderWidth:2,
order: 2
},
{
label: 'Total Recordings',[![image of current scenario][1]][1]
data:[this.data.totalrecordings,this.data.totalrecordings],
type:'line',
borderColor:'rgba(2,117,216,1)',
backgroundColor:'rgba(2,117,216,0.2)',
pointRadius:0,//3,
pointHoverRadius:0,//4,
xAxisID:'xAxis2',
order:0
}
]
},
options: {
responsive: true,
//hover:{
//mode:'index',
// intersect:false
//},
plugins: {
legend: {
position: 'top',
},
tooltip:{
mode:'index',
callbacks:{
title:(ttItems)=> (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label)
},
}
},
scales:{
xAxis:{},
xAxis2:{
display:false,
offset:false,
labels:[' ',' ']
}
}
},
})
}
我希望当我将鼠标悬停在折线图上的任何位置时,它都应该显示数据。现在,只有当我将鼠标悬停在线条的最开始或结尾时,才能看到数据。此外,在线条的结尾,当我将鼠标悬停时,我只能看到总记录值,但在开始时,当我将鼠标悬停时,我可以看到所有数据集的值。任何输入都将非常有帮助
1条答案
按热度按时间k4emjkb11#
您可以使用
dataset
和单个浮动条来代替使用线条,浮动条的定义如下:除此之外,您还需要定义一个
tooltip.callbacks.label
函数来正确报告totalrecordings
。请查看修改后的代码并了解其工作原理。
第一个