Chart.js折线图数据与日期不匹配问题求助

问题描述 #

现有白色折线的日期与数值数组如下，日期数组缺失3月9日-3月12日的数据，但鼠标hover图表时，这些缺失日期却显示对应数据，导致日期与数值无法正确匹配：

日期数组 #

[
"Apr 02 2023, 12:04",
"Apr 01 2023, 12:04",
"Mar 31 2023, 12:03",
"Mar 30 2023, 12:03",
"Mar 29 2023, 12:03",
"Mar 27 2023, 12:03",
"Mar 26 2023, 12:03",
"Mar 24 2023, 12:03",
"Mar 13 2023, 12:03",
"Mar 08 2023, 12:03",
"Mar 06 2023, 12:03",
"Mar 05 2023, 12:03"
]

数值数组 #

[
"0.0177",
"0.41",
"0.301",
"0.1",
"0.016",
"0.0171",
"0.0176",
"0.0175",
"0.0169",
"0.0101",
"0.0179",
"0.09"
]

异常图表 #

问题原因 #

图表库默认会将时间轴处理为连续序列，自动补全数据中缺失的3月9日-3月12日这些日期节点，并通过插值或复制相邻数据的方式生成对应数值，导致hover时出现不存在的日期数据。

解决方案 #

核心思路是将x轴从连续时间轴改为离散类别轴，让图表严格按照提供的日期数组渲染，不自动补全缺失日期。以下是主流图表库的具体操作：

Chart.js #

在配置中把x轴类型设为category，直接使用提供的日期数组作为标签：

const chartConfig = {
  type: 'line',
  data: {
    labels: [/* 你的日期数组 */],
    datasets: [{
      label: '白色折线',
      data: [/* 你的数值数组 */],
      borderColor: '#ffffff'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'category', // 关键设置：切换为类别轴
        ticks: {
          autoSkip: true,
          maxRotation: 45 // 避免日期标签重叠
        }
      }
    }
  }
};

Highcharts #

在x轴配置中指定type: 'category'，关闭时间轴自动补全：

Highcharts.chart('chart-container', {
  xAxis: {
    type: 'category',
    categories: [/* 你的日期数组 */]
  },
  series: [{
    name: '白色折线',
    data: [/* 注意将数值转为数字类型，比如0.0177而非字符串 */],
    color: '#ffffff'
  }]
});

其他图表库 #

所有主流图表库都有类似设置：找到x轴的类型配置项，将其从time/date类切换为category类，确保图表仅使用你提供的日期作为轴节点，不自动填充缺失时间。

额外注意点 #

• 必须保证日期数组和数值数组的长度完全一致，一一对应；
• 如果需要日期按时间顺序排列，先对日期数组和数值数组同步排序后再传入图表；
• 部分库可能需要关闭gapSize或类似的间隙补全配置。

内容的提问来源于stack exchange，提问作者Berkay Güllyaz