有没有一种方法可以实现多行提示?
现在我的代码:
myChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
yAxisID: 'first',
label: 'Referred Users',
borderColor: '#F17E5D',
pointBackgroundColor: '#F17E5D',
backgroundColor: '#F17E5D',
pointRadius: 3,
lineTension: 0,
fill: false,
data: visitors
}, {
yAxisID: 'second',
label: 'Posts',
borderColor: '#4FCCF1',
pointBackgroundColor: '#4FCCF1',
backgroundColor: '#4FCCF1',
pointRadius: 3,
lineTension: 0,
fill: false,
data: posts
}]
},
options: {
legend: {
display: true,
},
tooltips: {
enabled: true,
mode: 'index',
tooltipFontSize: 10,
callbacks:{
label: function (tooltipItem) {
let object;
if(tooltipItem.datasetIndex === 0){
object = visitors[tooltipItem.index]
}
if(tooltipItem.datasetIndex === 1){
for(var i = 0; i < objectBetweenDates.length; i++){
if(objectBetweenDates[i].timestamp === dates[tooltipItem.index]){
object objectBetweenDates[i].comment;
}
}
}
return object;
}
}
},
scales: {
yAxes: [{
id: 'first',
position: 'left',
ticks: {
fontColor: '#9f9f9f',
beginAtZero: true,
},
gridLines: {
borderDash: [8, 5],
color: '#9f9f9f',
}
}, {
id: 'second',
position: 'right',
ticks: {
fontColor: '#9f9f9f',
beginAtZero: true,
max: Math.max(...posts)+1,
stepSize: 1
},
gridLines: {
borderDash: [8, 5],
color: '#9f9f9f',
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
borderDash: [8, 5],
color: '#9f9f9f',
zeroLineColor: 'transparent'
},
ticks: {
padding: 20,
fontColor: '#9f9f9f'
}
}]
},
}
});
});
如您所见,它是一个很长的工具提示。文本的一部分被剪掉。 我希望文本能在多行中很好地完全显示。 但是根据文档,似乎没有官方的方法来完成此操作。
所以希望有人能找到一种解决方法。
我曾尝试拆分文本,但不幸的是,这只会创建多个标签,而不会产生结果。
我需要一个带有一个标签的文本,并且由于文本大小,文本被截断了。
如果您除此之外还需要其他任何信息。毫不犹豫地问。