Chart.js tooltip beforeTitle自定义文本不生效，仅显示数字求助

你的代码采用了Chart.js v2版本的tooltip配置写法，但引入的是v3及以上版本的库，导致配置不生效。v3+版本对tooltip的配置结构做了调整，原tooltips选项已移至plugins.tooltip下。

修改后的代码如下：

JavaScript 代码 #

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [11, 22, 33],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          beforeTitle: function(context) {
            return 'before title';
          }
        }
      }
    }
  }
});

HTML 代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" height="100"></canvas>

关键修改点 #

• 将原配置中的options.tooltips层级改为options.plugins.tooltip
• 回调函数beforeTitle的位置同步调整到plugins.tooltip.callbacks下

内容的提问来源于stack exchange，提问作者Toniq