作者:as2520_526 | 来源:互联网 | 2023-01-02 13:15
我试图在click.js中隐藏工具提示,只要点击对象的名称是"Something".我已经尝试过了:
this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
datasets: [{
label: _.map(this.dataService.AmTimeSlots, 'ProjectName'),
data: _.map(this.dataService.AmTimeSlots, 'Duration'),
backgroundColor: _.map(this.dataService.AmTimeSlots, 'Color'),
hoverBackgroundColor: _.map(this.dataService.AmTimeSlots, 'HoverColor'),
borderColor: _.map(this.dataService.AmTimeSlots, 'BorderColor'),
borderWidth: 1.5
},
{
label: _.map(this.dataService.PmTimeSlots, 'ProjectName'),
data: _.map(this.dataService.PmTimeSlots, 'Duration'),
backgroundColor: _.map(this.dataService.PmTimeSlots, 'Color'),
hoverBackgroundColor: _.map(this.dataService.PmTimeSlots, 'HoverColor'),
borderColor: _.map(this.dataService.PmTimeSlots, 'BorderColor'),
borderWidth: 1.5
}],
},
options: {
elements: {
arc: {
roundedCornersFor: 0
}
},
segmentShowStroke: false,
responsive: true,
maintainAspectRatio: true,
legend: {
display: false
},
onClick: this.chartClick.bind(this),
cutoutPercentage: 65,
tooltips: {
filter: function (tooltipItem) {
if (tooltipItem.xLabel == "Free Slot") {
return false;
} else {
return true;
}
},
callbacks: {
label: function (tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
},
afterLabel: function (tooltipItems, data) {
return Math.floor(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] / 6) + 'h ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] * 10 % 60 + 'm';
}
}
}
},
config: {
data: this.dataService,
settings: this.settingsService
}
});
上面的代码工作正常,它成功地隐藏了工具提示的文本,但问题是黑色标签/边框仍然存在.如何隐藏它?
1> beaver..:
您只需过滤工具提示即可:
options: {
tooltips: {
filter: function (tooltipItem, data) {
var label = data.labels[tooltipItem.index];
if (label == "Red") {
return false;
} else {
return true;
}
}
}
}
看到这个jsfiddle:https://jsfiddle.net/beaver71/ndc2uao2/