java 页面加载提示_使用Chart.js在页面加载时显示单个工具提示

我正在使用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();

});

},