Chart.js/ng2-charts如何在tooltip中分组数据并设置X轴日期边距？

1. 实现Tooltip分组展示单日的收缩压与舒张压 #

要让同一日期的两项数据在tooltip里分组显示，核心是确保同一日期的两个数据点x值完全一致（比如统一用时间戳或标准Date对象），再通过Chart.js的tooltip配置聚合展示：

• 在图表配置的options中，将tooltip的mode设为'index'，hover到任意数据点时，会自动取出同日期的所有数据集数据：

options: ChartOptions = {
  tooltips: {
    mode: 'index',
    intersect: false, // 允许hover到数据点附近时触发tooltip
    callbacks: {
      // 自定义tooltip标题，显示格式化后的日期
      title: function(tooltipItems) {
        const date = new Date(tooltipItems[0].xLabel);
        return date.toLocaleDateString();
      },
      // 自定义tooltip内容，分别展示收缩压和舒张压数值
      label: function(tooltipItem, data) {
        const dataset = data.datasets[tooltipItem.datasetIndex];
        const label = dataset.label || '';
        const value = dataset.data[tooltipItem.index];
        return `${label}: ${value} mmHg`;
      }
    }
  }
};

• 确保数据集里，收缩压和舒张压数组的对应索引位置为同一天的数据，示例结构：

datasets: ChartDataset[] = [
  {
    label: '收缩压(Systolic)',
    data: [{x: new Date('2024-05-01'), y: 120}, {x: new Date('2024-05-02'), y: 125}],
    borderColor: '#ff0000'
  },
  {
    label: '舒张压(Diastolic)',
    data: [{x: new Date('2024-05-01'), y: 80}, {x: new Date('2024-05-02'), y: 82}],
    borderColor: '#00ff00'
  }
];

2. 设置X轴日期边距后恢复图表线条渲染 #

问题根源是X轴min/max的格式与数据类型不匹配，若X轴为time类型，必须用Date对象或moment实例设置边距，不能直接用字符串：

• 先将X轴配置为time类型，再基于数据首尾日期计算min和max：

// 假设data是你的血压数据数组，取首尾项的日期
const firstDate = new Date(datasets[0].data[0].x);
const lastDate = new Date(datasets[0].data[datasets[0].data.length - 1].x);

options: ChartOptions = {
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'day',
        displayFormats: {
          day: 'YYYY-MM-DD'
        }
      },
      // 给首尾日期各加减1天作为边距
      min: new Date(firstDate.getTime() - 24 * 60 * 60 * 1000),
      max: new Date(lastDate.getTime() + 24 * 60 * 60 * 1000),
      offset: true // 避免轴标签被容器截断
    }
  }
};

• 若使用moment.js，可通过moment(firstDate).subtract(1, 'day').toDate()生成min值，确保格式与数据的x值类型完全一致，避免Chart.js无法识别导致线条不渲染。

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