自定义Chart.js工具提示：如何显示X轴标签的简化形式？

你遇到的问题很典型——当用数组作为X轴标签实现多行效果时，默认工具提示会把整个数组内容都展示出来，确实不够友好。针对Chart.js 2.7版本，我们可以通过自定义工具提示的回调函数来实现简化显示的需求。

原始代码回顾 #

先整理你提供的代码片段：

JavaScript 代码

<script>
var passings = [["New York","5001","05/18 00:36","S 28 MPH"], ["Phili","5002","05/18 01:36","S 50 MPH"], ["Richmond","5003","05/18 02:36","S 40 MPH"], ["Wilson","5004","05/18 03:36","S 30 MPH"], ["Savannah","5005","05/18 04:36","S 29 MPH"], ["Miami","5006","05/18 05:36","S 40 MPH"]]
leftK1 = ["20","30","50","20","30","40"]
var labelL1 = "Rain %";
var ctx = document.getElementById("myChart").getContext("2d");
var canvasWidth = 600;
ctx.canvas.width = canvasWidth;
ctx.canvas.height = 700;
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.defaultFontFamily = "Lato, sans-serif";
var chartData = null;
var chartOptions = null;
var chartDataSets = [
 {
 label : labelL1,
 fill : false,
 data : leftK1,
 borderColor : 'rgb(255, 99, 132)'
 }
];
chartData = {
 labels : passings,
 datasets : chartDataSets
}
chartOptions = {
 responsive : true,
 maintainAspectRatio : false,
 elements : {
 line : {
 tension : 0, // disables bezier curves
 }
 },
 animation : {
 },
 legend : {
 display : true,
 position : 'top',
 labels : {
 fontColor : 'rgb(255, 99, 132)'
 }
 },
 title : {
 display : true,
 text : 'Passings Chart'
 },
 scales : {
 yAxes : [
 {
 ticks : {
 max : 80,
 min : 0
 },
 gridLines : {
 zeroLineWidth : 5
 },
 scaleLabel : {
 display : true,
 labelString : "Rain Percantage",
 fontFamily : "Lato, sans-serif",
 fontSize : 18
 }
 }
 ],
 xAxes : [
 {
 ticks : {
 autoSkip : false,
 maxTicksLimit : 15,
 maxRotation : 0,
 minRotation : 0,
 fontFamily : "Lato, sans-serif",
 fontSize : 12
 }
 }
 ]
 } // end scales
}
window.myChart = new Chart(ctx, {
 type : 'line',
 data : chartData,
 options : chartOptions
});
</script>

HTML 代码

<h:form id="ChartForm">
 <div >
 <canvas id="myChart" ></canvas>
 </div>
</h:form>

解决方案：自定义工具提示回调 #

在Chart.js 2.7中，我们可以通过在chartOptions里添加tooltips配置，利用callbacks.title函数来修改工具提示的标题内容（也就是X轴标签的显示）。你可以根据需求提取数组中的特定字段，比如只显示城市名，或者组合城市+ID等信息。

修改后的关键配置

在chartOptions中新增以下配置：

// 新增的tooltip配置
tooltips: {
  callbacks: {
    title: function(tooltipItems, data) {
      const currentLabel = data.labels[tooltipItems[0].index];
      // 自定义显示内容，示例为城市名+ID
      return `${currentLabel[0]} (ID: ${currentLabel[1]})`;
      // 你也可以改成其他形式，比如只显示城市名：return currentLabel[0];
    }
  }
},

完整修改后的JavaScript代码

<script>
var passings = [["New York","5001","05/18 00:36","S 28 MPH"], ["Phili","5002","05/18 01:36","S 50 MPH"], ["Richmond","5003","05/18 02:36","S 40 MPH"], ["Wilson","5004","05/18 03:36","S 30 MPH"], ["Savannah","5005","05/18 04:36","S 29 MPH"], ["Miami","5006","05/18 05:36","S 40 MPH"]]
leftK1 = ["20","30","50","20","30","40"]
var labelL1 = "Rain %";
var ctx = document.getElementById("myChart").getContext("2d");
var canvasWidth = 600;
ctx.canvas.width = canvasWidth;
ctx.canvas.height = 700;
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.defaultFontFamily = "Lato, sans-serif";
var chartData = null;
var chartOptions = null;
var chartDataSets = [
 {
 label : labelL1,
 fill : false,
 data : leftK1,
 borderColor : 'rgb(255, 99, 132)'
 }
];
chartData = {
 labels : passings,
 datasets : chartDataSets
}
chartOptions = {
 responsive : true,
 maintainAspectRatio : false,
 elements : {
 line : {
 tension : 0, // disables bezier curves
 }
 },
 animation : {
 },
 legend : {
 display : true,
 position : 'top',
 labels : {
 fontColor : 'rgb(255, 99, 132)'
 }
 },
 title : {
 display : true,
 text : 'Passings Chart'
 },
 // 新增的tooltip配置
 tooltips: {
   callbacks: {
     title: function(tooltipItems, data) {
       const currentLabel = data.labels[tooltipItems[0].index];
       // 自定义显示内容，示例为城市名+ID
       return `${currentLabel[0]} (ID: ${currentLabel[1]})`;
     }
   }
 },
 scales : {
 yAxes : [
 {
 ticks : {
 max : 80,
 min : 0
 },
 gridLines : {
 zeroLineWidth : 5
 },
 scaleLabel : {
 display : true,
 labelString : "Rain Percantage",
 fontFamily : "Lato, sans-serif",
 fontSize : 18
 }
 }
 ],
 xAxes : [
 {
 ticks : {
 autoSkip : false,
 maxTicksLimit : 15,
 maxRotation : 0,
 minRotation : 0,
 fontFamily : "Lato, sans-serif",
 fontSize : 12
 }
 }
 ]
 } // end scales
}
window.myChart = new Chart(ctx, {
 type : 'line',
 data : chartData,
 options : chartOptions
});
</script>

说明 #

• tooltips.callbacks.title函数接收两个参数：tooltipItems（当前触发的tooltip项数组）和data（图表的完整数据对象）。
• 我们通过tooltipItems[0].index获取当前对应的X轴标签索引，再从data.labels中取出对应的数组，然后根据需求拼接成简化的显示文本。
• 你可以完全自定义返回的内容，比如只显示时间、只显示城市名，或者组合多个字段，完全根据你的业务需求调整。

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