Chart.js折线图：工具提示加边框及标题显示Y轴整数值求助

嘿，我来帮你搞定这两个问题！Chart.js的工具提示配置其实有现成的选项，咱们直接调整配置就能解决：

完整代码示例 #

这里是补全后的代码，包含边框设置和自定义标题的逻辑：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["a", "b", "c"],
    datasets: [{
      label: '你的数据集名称',
      data: [2, 5, 3], // 替换成你的实际数据
      borderColor: '#2196F3',
      tension: 0.1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        // 1. 添加工具提示边框
        borderColor: '#333', // 自定义边框颜色
        borderWidth: 1, // 边框粗细（单位：px）
        // 2. 自定义标题显示逻辑
        titleCallback: function(context) {
          // 从上下文获取当前hover的Y轴数值
          const currentYValue = context[0].parsed.y;
          return `总计数：${currentYValue}`;
        }
      }
    }
  }
});

关键配置说明 #

工具提示边框设置 #

在options.plugins.tooltip下直接添加两个属性：

• borderColor：设置边框的颜色，可以用十六进制、RGB或颜色名称
• borderWidth：设置边框的宽度，单位是像素

之前没生效大概率是没把这两个属性放在正确的层级下，Chart.js v3+的工具提示配置都在plugins.tooltip下面哦。

自定义标题解决undefined问题 #

之前Y值显示undefined是因为没找对数据的位置：

• titleCallback的参数context是一个数组，每个元素对应一个被hover的数据集（单数据集情况下取索引0即可）
• parsed.y是Chart.js已经解析好的Y轴数值，直接取这个值就不会出现undefined了

如果你的图表有多个数据集，可以根据需求调整逻辑，比如遍历所有items拼接内容，但单数据集的话上面的代码就足够啦。

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