Chart.js：不同采样间隔传感器数据的时间轴图表适配问题

关于不同采样间隔数据的展示 #

完全可以在同一Chart.js时间轴图表中展示不同采样间隔的传感器数据。只要每个数据集的每个数据点都包含正确的时间戳（如ISO格式字符串或Unix时间戳），Chart.js的时间类型x轴会自动根据时间值定位数据点，无需强制数据集的数量一致或起始时间相同。

修复Tooltip显示错误的问题 #

你遇到的Tooltip显示数据集第x个值而非对应时间实际值的问题，是因为Chart.js默认的Tooltip匹配模式是按数据点索引关联，而非时间。只需修改Tooltip的配置即可解决：

核心配置修改

在图表的options中调整Tooltip的模式和触发逻辑：

options: {
  plugins: {
    tooltip: {
      // 基于x轴（时间轴）位置匹配数据点，而非索引
      mode: 'x',
      // 鼠标悬停到x轴对应区域即触发Tooltip，无需精准点击数据点
      intersect: false,
      // 可选：自定义Tooltip内容，确保显示正确的时间与数值
      callbacks: {
        title: function(context) {
          // 格式化显示Tooltip的时间标题
          return new Date(context[0].parsed.x).toLocaleString();
        },
        label: function(context) {
          // 显示对应数据集的标签和实际数值
          return `${context.dataset.label}: ${context.parsed.y}`;
        }
      }
    }
  },
  scales: {
    x: {
      type: 'time',
      time: {
        // 配置Tooltip中时间的显示格式
        tooltipFormat: 'yyyy-MM-dd HH:mm:ss',
        // 根据你的数据时间粒度调整单位（如minute、second）
        unit: 'minute'
      }
    }
  }
}

完整示例代码

const sensorChart = new Chart(document.getElementById('sensorChart'), {
  type: 'line',
  data: {
    datasets: [
      {
        label: '传感器1',
        data: [
          {x: '2024-05-20 08:00:00', y: 24},
          {x: '2024-05-20 08:05:00', y: 26},
          {x: '2024-05-20 08:10:00', y: 25}
        ],
        borderColor: '#ff6384',
        fill: false
      },
      {
        label: '传感器2',
        data: [
          {x: '2024-05-20 08:02:00', y: 23},
          {x: '2024-05-20 08:07:00', y: 27},
          {x: '2024-05-20 08:12:00', y: 24}
        ],
        borderColor: '#36a2eb',
        fill: false
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'x',
        intersect: false,
        callbacks: {
          title: (ctx) => new Date(ctx[0].parsed.x).toLocaleString(),
          label: (ctx) => `${ctx.dataset.label}: ${ctx.parsed.y}`
        }
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          tooltipFormat: 'yyyy-MM-dd HH:mm:ss',
          unit: 'minute'
        },
        title: {
          display: true,
          text: '采样时间'
        }
      },
      y: {
        title: {
          display: true,
          text: '测量值'
        }
      }
    }
  }
});

原理说明 #

• mode: 'x'：让Tooltip根据鼠标在时间轴上的位置，自动匹配所有数据集中最接近该时间点的数据，彻底摆脱索引匹配的限制。
• intersect: false：降低Tooltip的触发门槛，鼠标悬停到对应时间区域即可显示所有传感器的数值，提升交互体验。
• 自定义回调函数：确保Tooltip显示的时间和数值都是对应数据集的实际值，避免出现索引不匹配导致的错误展示。

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