ChartJS 2工具提示标题显示undefined问题及afterLabel疑问求助

嘿，来帮你搞定这两个Chart.js 2的小问题！

问题1：工具提示标题显示“Ages undefined” #

这个问题的根源很简单——你写错了属性名的大小写，而且没注意tooltipItem是一个数组：

• Chart.js里的tooltip项索引属性是小写的index，不是大写的Index
• title回调的第一个参数tooltipItem是一组共享同一标题的工具提示项数组，所以要取数组里第一个元素的index来获取对应标签

修复后的title回调代码：

title: function(tooltipItem, data) {
  return 'Ages ' + data.labels[tooltipItem[0].index];
}

问题2：afterLabel文本显示在标签下方而非后方 #

这其实是Chart.js 2的设计默认行为：afterLabel的作用就是在每个标签的下方追加文本，用来实现换行展示的效果。

如果想要文本显示在标签的右侧（后方），你需要放弃afterLabel，改用label回调，把原本的标签内容和你要添加的文本拼接在一起。举个例子：

callbacks: {
  title: function(tooltipItem, data) {
    return 'Ages ' + data.labels[tooltipItem[0].index];
  },
  label: function(tooltipItem, data) {
    // 获取数据集标签和对应数值
    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
    var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
    // 自定义拼接格式，把额外文本放在标签后方
    return `${datasetLabel}: ${value} （这里是你要加的额外文本）`;
  }
}

完整修复后的代码 #

var ageRangedata = {
  type: 'bar',
  data: {
    datasets: [
      {
        data : [0,1,5,2,1,0,0, 0, 0, 0],
        backgroundColor: 'rgba(255, 209, 240, 0.6)',
        borderColor: 'rgba(255, 209, 240, 1)',
        borderWidth: 2,
        label: 'Female'
      },
      {
        data : [1,0,1,1,6,1,0, 1, 0, 0],
        backgroundColor: 'rgba(81, 187, 245, 0.6)',
        borderColor: 'rgba(81, 187, 245, 1)',
        borderWidth: 2,
        label: 'Male'
      }
    ],
    labels:['0-10','11-20','21-30','31-40','41-50','51-60','61-70', '71-80', '81-90', '90-']
  },
  options: {
    maintainAspectRatio: false,
    responsive: true,
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return 'Ages ' + data.labels[tooltipItem[0].index];
        },
        // 如果需要后方文本，取消下面注释并调整格式
        // label: function(tooltipItem, data) {
        //   var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
        //   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        //   return `${datasetLabel}: ${value} （额外文本）`;
        // }
      }
    },
    legend: { display: false }
  }
};
var ageR = document.getElementById("ageRange").getContext("2d");
var chart_ageR = new Chart(ageR, ageRangedata);

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