Chart.js折线图time类型使用问题及数据显示异常排查

问题1：单条数据时无图表内容显示 #

原因：你在datasets里的data格式完全错误。当前写法是把所有x轴日期、y轴数值分别打包成数组塞进一个对象中，Chart.js无法识别这种结构，自然无法渲染出数据点或线条，只会显示坐标轴。

问题2：添加第二条数据后Y轴范围变为0-1 #

原因：同样是错误的data结构导致Chart.js无法解析传入的数组嵌套对象，会将其判定为无效数据。当没有有效数据时，Chart.js会默认使用0-1作为Y轴的默认范围。

修复后的代码 #

核心修正点：将datasets.data改为Chart.js要求的格式——每个数据点是独立的{x: 日期, y: 数值}对象；如果所有数据点颜色统一，borderColor和backgroundColor直接写单个字符串即可（需单个点不同颜色再用数组）。

import Chart from 'chart.js/auto'
import 'chartjs-adapter-date-fns';

const timeScaleChart = () => {
  const data = [
    { year: "2022-05-01", count: 30, borderColor: "red", backgroundColor: 'blue' },
    { year: "2026-05-01", count: 40, borderColor: "red", backgroundColor: 'blue' },
  ];

  new Chart(
    document.getElementById('timeline'),
    {
      type: 'line',
      options: {
        plugins: {
          title: {
            text: 'Chart.js Time Scale',
            display: true
          }
        },
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day'
            },
            title: {
              display: true,
              text: 'Date'
            }
          },
          y: {
            title: {
              display: true,
              text: 'count'
            }
          }
        },
      },
      data: {
        datasets: [
          {
            label: 'Time scale',
            // 修正：遍历原始数据生成每个独立的数据点
            data: data.map(row => ({
              x: row.year,
              y: row.count
            })),
            borderColor: "red",
            backgroundColor: 'blue',
            fill: false,
          }
        ]
      }
    }
  );
};

export default timeScaleChart;

修复后效果：

• 单条数据时会正常显示对应的数据点
• 多条数据时Y轴会根据实际数值自动计算范围（比如示例中的30-40）

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