如何在 Chart.js 中隐藏特定数据标签上的工具提示?
我试图在 Chart.js 中隐藏工具提示单击的对象是某物".我已经尝试过了:
I am trying to hide a tooltip in Chart.js whenever the name of a clicked object is "Something". I have already tried this:
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
}
});
上面的代码运行良好.它成功隐藏了工具提示的文本,但问题是黑色标签/边框仍然存在.怎么隐藏?
And this code above is working fine. It’s successfully hiding the text of tooltip, but the problem is that the black label/border still remains. How can I hide it?
推荐答案
你可以简单过滤器 工具提示:
You can simply filter tooltips:
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/
See this jsfiddle: https://jsfiddle.net/beaver71/ndc2uao2/
相关文章