Chart.js图表未显示全部数据点求助：3个数据点仅显示2个

嘿，我一眼就揪出问题所在啦！你用了带时间维度的数据点，但没明确告诉Chart.js你的x轴是时间轴类型，导致它没法正确解析并渲染全部数据。

问题根源 #

你的数据集里用了t（时间）+y（数值）的对象格式，但默认情况下Chart.js的x轴是线性轴——它会把时间对象转成时间戳数值来处理。由于第三个数据点（4月27日）和前两个（4月1日、4月10日）的时间间隔较大，超出了默认计算的轴范围，所以这个点就被“藏”起来了。

解决方案 #

只需要在options的scales里添加x轴配置，明确指定x轴类型为time，同时确保你的项目引入了对应依赖（Chart.js 2.x版本需要引入moment.js，3+版本内置了时间处理模块）。

修改后的完整代码如下：

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
  type: 'line', 
  data: { 
    datasets: [{ 
      label: 'Submission', 
      data: [
        { t: new Date("April 1, 2018"), y: 2 }, 
        { t: new Date("April 10, 2018"), y: 1 }, 
        { t: new Date("April 27, 2018"), y: 1 }
      ], 
      backgroundColor: ["rgba(90, 150, 200, 0.6)"] 
    }] 
  }, 
  options: { 
    scales: { 
      xAxes: [{
        type: 'time', // 明确指定x轴为时间轴
        time: {
          unit: 'day', // 按天显示刻度，可选week、month等
          displayFormats: {
            day: 'MMM D' // 自定义日期显示格式，比如"Apr 1"
          }
        }
      }],
      yAxes: [{ 
        ticks: { beginAtZero: true } 
      }] 
    } 
  } 
});

额外小贴士 #

如果是Chart.js 3.x及以上版本，配置写法略有调整，scales下的xAxes和yAxes要改成x和y，示例如下：

scales: {
  x: {
    type: 'time',
    time: { /* 时间轴配置项 */ }
  },
  y: {
    beginAtZero: true
  }
}

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