ChartJS 水平浮动条形图提示框数据显示格式修改方法咨询

要实现你想要的提示框格式，最佳方式是利用Chart.js的tooltip回调函数，通过options.plugins.tooltip.callbacks.label来自定义显示内容。结合你提到的data.raw能返回原始日期字符串的信息，我们可以直接基于这些值来格式化日期，不需要再反向处理时间戳，既高效又准确。

具体实现步骤： #

1. 配置Tooltip回调逻辑
   在你的Chart.js配置对象中，添加plugins.tooltip配置项，重写label回调函数。这个函数会接收一个上下文参数，我们可以从中提取关键信息：

• context.label：Y轴对应的rowName（比如"Project 1"）
• context.raw：你提到的原始日期数组（比如['2021-03-15', '2021-04-20']）

2. 用date-fns格式化日期
   因为你已经引入了chartjs-adapter-date-fns，可以直接使用date-fns的format函数把日期字符串转换成DD/MM/YYYY格式。如果还没单独导入format，记得先加这行：

import { format } from 'date-fns';

3. 完整配置示例
   把这些逻辑整合到你的图表代码中，参考示例如下：

const chart = new Chart(document.getElementById('your-chart-id'), {
  type: 'bar',
  data: {
    labels: ['Project 1'], // 对应你的rowName列表
    datasets: [{
      data: [
        [new Date('2021-03-15').getTime(), new Date('2021-04-20').getTime()]
      ],
      // 其他数据集配置（如颜色、填充样式等）
    }]
  },
  options: {
    indexAxis: 'y', // 启用水平条形图
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            month: 'MM/yyyy' // X轴显示月/年格式
          }
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            // 提取所需数据
            const rowName = context.label;
            const [startDateStr, endDateStr] = context.raw;
            
            // 格式化日期为目标格式
            const formattedStart = format(new Date(startDateStr), 'dd/MM/yyyy');
            const formattedEnd = format(new Date(endDateStr), 'dd/MM/yyyy');
            
            // 返回自定义提示文本
            return `${rowName} Start Date: ${formattedStart} End Date: ${formattedEnd}`;
          }
        }
      }
    }
  }
});

关键细节说明： #

• 如果你的data.raw是完整的原始对象（比如{rowName: 'xxx', startDate: 'xxx', endDate: 'xxx'}），只需要调整解构方式，比如const { rowName, startDate: startDateStr, endDate: endDateStr } = context.raw;即可。
• date-fns的format参数'dd/MM/yyyy'严格对应你需要的“日/月/年”两位格式，要是需要调整格式，直接修改这个字符串就行（比如'MM/dd/yyyy'改成月/日/年）。

这样配置后，当你 hover 到条形图上时，提示框就会完全按照你想要的格式展示内容了。

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