Chart.js饼图悬停提示标签字体大小调整问题求助

你遇到的问题是Chart.js饼图的悬停提示框（tooltip）字体大小无法调整，虽然已经成功自定义了提示文本，但之前配置的hover.label.fontSize并不生效——因为Chart.js里tooltip的样式配置是在options.tooltips下，而非hover选项中。

你的代码里tooltips部分的写法有错误：bodyFont:20是无效语法，正确的配置应该用bodyFontSize，或者通过font对象统一设置字体属性。

修正后的tooltips配置如下：

tooltips: {
  // 设置提示框标题字体大小（若有标题则生效）
  fontSize: 20,
  // 设置提示框内容文本的字体大小
  bodyFontSize: 20,
  callbacks: {                                       
    label: function (tooltipItem, data) {
      let label = data.labels[tooltipItem.index];
      let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      let otherdata = data.others[tooltipItem.index];
      return ' ' + label + ': ' + value + '%  ' + otherdata;
    }
  }
}

另外，你的代码里重复写了两次hover配置，建议合并成一个：

hover: {
  mode: 'index'
}

完整的修正后代码如下：

var myPieChart = new Chart(ctxP, {
  type: 'pie',
  data: {
    labels: datas.labels,
    datasets: [{
      label: 'Dataset 1',
      data: datas.value,
      backgroundColor: datas.colour
    }],
    others: datas.others
  },
  options: {
    hover: {
      mode:'index'
    },
    legend: {
      display: true,
      position: "right",
      "labels": {
        "fontSize": 20,
      }
    },
    tooltips: {
      fontSize: 20,
      bodyFontSize: 20,
      callbacks: {                                       
        label: function (tooltipItem, data) {
          let label = data.labels[tooltipItem.index];
          let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          let otherdata = data.others[tooltipItem.index];
          return ' ' + label + ': ' + value + '%  ' + otherdata;
        }
      }
    }
  }
})

这样配置后，悬停提示框的字体大小就会生效了。

内容的提问来源于stack exchange，提问作者Vikash Kumar Sen