如何解决Chart.js的X轴自动展示数据集中不存在的周末等无效日期的问题

问题根因 #

你当前X轴显示空周末的核心原因有两个：

• 你配置了distribution: 'timeseries'，该模式下X轴是连续时间轴，会按照实际时间间隔自动填充无数据的时间空档
• 你手动强制设置了ticks.min和ticks.max为过去8天到今日的范围，不管这个区间内有没有对应数据，都会覆盖整个时间范围

方案1：改用非连续序列分布（推荐，适配股票场景） #

直接修改X轴配置即可，不需要改动数据逻辑：

var min_x = new Date();
var max_x = new Date();
min_x.setDate(min_x.getDate() - 8);
myChart.options.scales.xAxes[0].time.unitStepSize = 1;
myChart.options.scales.xAxes[0].time.isoWeekday = true;
myChart.options.scales.xAxes[0].ticks.maxTicksLimit = 8;
myChart.options.scales.xAxes[0].time.unit = 'day';
// 把timeseries改为series，只按实际传入的数据点排列，不会插入空时间刻度
myChart.options.scales.xAxes[0].distribution = 'series';
myChart.options.scales.xAxes[0].ticks.autoSkip = true;

// 删掉下面两行手动设置min、max的代码，避免强制覆盖时间范围
// myChart.options.scales.xAxes[0].ticks.min = min_x;
// myChart.options.scales.xAxes[0].ticks.max = max_x;
myChart.update();

for (var k = 1; k < data.datapoints.length; k++){
  var point = data.datapoints[data.datapoints.length - k].latest_price;
  var date = data.datapoints[data.datapoints.length - k].time;
  label_list.push(date);
  datalist_list.push(data.datapoints[k].latest_price);
  var new_small_dict = {'x':data.datapoints[k].time, 'y':data.datapoints[k].latest_price};
  dictionary_list.push(new_small_dict);
}
myChart.data.labels = label_list;
myChart.data.datasets[0].data = dictionary_list;
myChart.update();

改完之后X轴只会展示你实际传入了数据的日期，自动跳过周末休市的无数据日期。

方案2：保留时间轴模式，通过回调过滤刻度 #

如果你需要保留连续时间轴的特性，也可以通过ticks.callback过滤无数据的刻度：

// 先把所有有数据的日期存为集合，方便快速判断
const validDates = new Set(data.datapoints.map(item => item.time));
myChart.options.scales.xAxes[0].ticks.callback = function(value, index, ticks) {
  // 当前刻度对应的日期如果不在有效集合里，返回空字符串不显示
  if (validDates.has(value)) return value;
  return '';
}

这个方案可以保留连续时间轴的间隔，只是隐藏无数据的刻度文本，不会出现日期重叠的问题。

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