我正在使用Chart.js生成甜甜圈图表 . 我已经给出了这个图表工具提示，当用户将鼠标悬停在特定部分上时会出现这样的工具提示：
我希望在页面首次加载时自动显示其中一个工具提示，但是当用户滚动/点击另一个部分时允许它更改 . 以下是我目前的代码 . 我最大的问题是我无法弄清楚工具提示是如何呈现的 .
mounted() {
this.initChart();
},
methods: {
initChart: function() {
const ctx = document.querySelector(`#${ this.id}`);
let dataB = {
datasets: [{
data: this.donutPercentageArray,
backgroundColor: ["#F7931A", "#627EEA","#8DC351","#BFBBBB","#17DE8D", "#d85f53", "#047220", "#385dd4", "#9b8c03", "#b96899", "#19c7c9", "#3c3d0a", "#885ae1", "#e80a1a", "#6d4429", "#e6f27d", "#bb502b", "#6396ff", "#63405a", "#42ee81", "#a34854", "#83f4f5", "#46ee6d", "#5c0cc5", "#e14c4a", "#1d3de0", "#bbf0e0", "#7e468b", "#919aa9", "#07ed29"],
myLabels: this.donutNameArray
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
// 'Bitcoin',
// 'Ethereum',
// 'Bitcoin Cash',
// 'Litecoin',
// 'Ethereum Classic'
],
};
let chart = new Chart(ctx, {
type: 'doughnut',
data: dataB,
options: {
tooltips: {
// mode: 'index',
intersect: false,
bodyFontSize: 16,
titleFontSize: 18,
callbacks: {
label: (tooltipItem, data) => {
const index = tooltipItem.index;
return data.datasets[0].myLabels[index] + ' has ' + data.datasets[0].data[index] + '% of holdings.';
}
}
},
elements: {
point: {
radius: 0
}
}
}
});
EventBus.$on('destroy-donut-chart', () => {
chart.destroy();
});
},