Question

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

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

0 个答案: