如何在Chart.js环形图hover时仅显示标签文本而非附加数据值？

你遇到的问题是因为Chart.js默认的tooltip会自动把标签（labels里的内容）和对应的数据值（datasets里的data）拼接在一起显示。要只显示标签文本，不用折腾split/splice去修改数组，直接自定义tooltip的回调函数就能搞定。

修改后的完整代码示例： #

<div class="wrapper"> 
  <canvas id="commitments-area" width="200" height="200"></canvas> 
</div>

<style>
.wrapper { 
  height: 200px; 
  width: 200px; 
  margin: 0 auto; 
}
</style>

<script>
var oilCanvas = document.getElementById("commitments-area");
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.legend.display = false;

var oilData = { 
  labels: [ 
    "People (40%)", 
    "Aliens (32%)", 
    "Dogs (13%)", 
    "Whales (15%)" 
  ], 
  datasets: [ { 
    data: [40, 32, 13, 15], 
    backgroundColor: [ 
      "#13284a", 
      "#4b9cd3", 
      "#3b7ca7", 
      "#99cdec" 
    ] 
  }] 
};

var chartOptions = { 
  legend: { position: 'bottom' }, 
  animation: { 
    animateRotate: true, 
    animateScale: true 
  },
  // 核心修改：自定义tooltip的标签生成逻辑
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        // 直接返回对应的原始标签文本，不附加数据值
        return data.labels[tooltipItem.index];
      }
    }
  }
};

var pieChart = new Chart(oilCanvas, { 
  type: 'doughnut', 
  data: oilData, 
  options: chartOptions 
});
</script>

关键说明： #

• 在chartOptions中新增了tooltips.callbacks.label函数，它会覆盖Chart.js默认的tooltip标签生成规则。
• 函数通过data.labels[tooltipItem.index]获取当前hover扇区对应的原始标签，直接返回这个值，这样tooltip就只会显示你定义的People (40%)这类内容，不会额外拼接: 40了。
• 另外你原代码里的Chart.defaults.global.tooltips;是无效语句，可以直接删掉，不影响功能。

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