Chart.js v2.9.4柱状图双数据集日期映射错位问题求助

问题根因 #

你遇到的数据错位问题核心原因是两个数据集的元素顺序没有和最终的x轴日期标签严格绑定：原始SQL仅返回有数据的日期，导致calls、b_calls两个数组的长度、元素顺序和去重后的标签数组不匹配，Chart.js默认按数组索引对应位置匹配标签与数值，就会出现数据错配的情况。

修复思路 #

1. 将总通话、付费通话数据转换为「格式化后日期字符串: 对应数值」的映射对象，方便快速按日期查询取值
2. 遍历所有去重后的唯一日期，分别从两个映射中取值，不存在对应记录则填充0，保证最终传入Chart的两个数据集长度和标签数组完全一致、顺序完全对应

修改后完整代码 #

var data_s = response.call_data;
var data_b = response.bill_data;
// 构建日期-数值映射
var callMap = {};
var billMap = {};

// 处理总通话数据，填充映射
for (var i in data_s) {
  var date = data_s[i].dated;
  var res = date.split("-");
  var month = res[1];
  var day = res[2];
  var dm = day + "/" + month;
  callMap[dm] = data_s[i].calls;
}

// 处理付费通话数据，填充映射
for (var i in data_b) {
  var date = data_b[i].b_dated;
  var res = date.split("-");
  var month = res[1];
  var day = res[2];
  var dm = day + "/" + month;
  billMap[dm] = data_b[i].b_calls;
}

// 提取所有唯一日期
var allDates = [...new Set([...Object.keys(callMap), ...Object.keys(billMap)])];
// （可选）如果需要按日期升序排列可以开启下一行注释
// allDates.sort((a,b) => new Date(a.split("/").reverse().join("-")) - new Date(b.split("/").reverse().join("-")))

// 按唯一日期顺序构建匹配的数据集，无数据则填0
var calls = [];
var b_calls = [];
allDates.forEach(date => {
  calls.push(callMap[date] || 0);
  b_calls.push(billMap[date] || 0);
})

var chartdata = {
  labels: allDates,
  datasets: [{
      label: 'Total Calls',
      backgroundColor: '#007bff',
      borderColor: '#007bff',
      hoverBackgroundColor: '#007bff',
      hoverBorderColor: '#666666',
      responsive: true,
      maintainAspectRatio: false,
      datasetFill: false,
      data: calls
    },
    {
      label: 'Billed Calls',
      backgroundColor: '#28a745',
      borderColor: '#28a745',
      hoverBackgroundColor: '#28a745',
      hoverBorderColor: '#666666',
      responsive: true,
      maintainAspectRatio: false,
      datasetFill: false,
      data: b_calls
    }
  ]
};

var graphTarget = $("#barChart");
var barGraph = new Chart(graphTarget, {
  type: 'bar',
  data: chartdata,
  options: barChartOptions
});

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