Chart.js 2.9.2自定义提示框标题失效问题求助

你好呀，我看了下你的代码，发现几个小细节导致自定义tooltip标题没达到预期效果，咱们一步步来修正：

先说说问题出在哪 #

1. 参数名不匹配：你定义的回调函数参数是tooltipItem，但循环里却用了tooltipItems（多了个s），这会直接导致变量未定义的错误，循环根本跑不起来。
2. 循环逻辑错误：就算参数名对了，你在循环里第一次迭代就return了，这样只会返回new_title的第一个元素，根本不会处理后续的tooltip项。
3. PHP数组转JS数组可能有问题：如果你的$title_new是PHP数组，当前的拼接方式只会生成单个元素的JS数组，得用implode来正确拼接多个标题。

修正后的完整代码 #

首先确保new_title数组正确生成（假设$title_new是PHP数组）：

// 比如$title_new = ['季度销量', '季度利润', '季度成本'];
var new_title = [<?php echo "'" . implode("','", $title_new) . "'";?>];

然后修正Tooltip的标题回调函数：

title: function(tooltipItems, data) {
  // 单数据集的场景：tooltipItems通常只有一个元素，取对应x轴索引的标题
  if (tooltipItems.length > 0) {
    var itemIndex = tooltipItems[0].index;
    // 索引超出数组长度时，返回默认标题或者空字符串
    return new_title[itemIndex] || '默认标题';
  }
  return '';
}

多数据集场景的扩展（如果需要） #

如果你的图表是多数据集，想给每个tooltip项都显示对应标题，可以用map来生成标题数组：

title: function(tooltipItems, data) {
  return tooltipItems.map(function(item) {
    return new_title[item.index] || '默认标题';
  });
}

这样调整后，应该就能实现你想要的自定义tooltip标题效果啦～

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