React-ChartJs-2中如何匹配数据与日期标签实现分组柱状图

Chart.js 2完全支持你描述的需求——按日期分组展示单日多条提交数据，核心是正确整理API返回的数据，让labels和datasets的索引对应上，无数据的位置用null占位即可。

步骤1：处理API返回的数据 #

假设你的API返回的数据结构如下（如果是其他结构，可按类似逻辑调整）：

// 示例API数据
const apiRawData = [
  { date: '2022-11-20', value: 15 },
  { date: '2022-11-20', value: 22 },
  { date: '2022-11-20', value: 18 },
  { date: '2022-11-21', value: 30 },
  { date: '2022-11-22', value: 10 },
  { date: '2022-11-22', value: 25 }
];

先按日期分组数据，提取唯一日期作为X轴标签，再根据单日最多提交数创建对应数据集：

// 1. 按日期分组数据
const groupedByDate = {};
apiRawData.forEach(item => {
  if (!groupedByDate[item.date]) {
    groupedByDate[item.date] = [];
  }
  groupedByDate[item.date].push(item.value);
});

// 2. 获取排序后的日期作为labels
const xLabels = Object.keys(groupedByDate).sort((a, b) => new Date(a) - new Date(b));

// 3. 确定单日最多的提交条数，以此创建对应数量的dataset
const maxDailyEntries = Math.max(...Object.values(groupedByDate).map(arr => arr.length));

// 4. 生成datasets数组
const chartDatasets = [];
for (let i = 0; i < maxDailyEntries; i++) {
  chartDatasets.push({
    label: `提交记录${i + 1}`, // 若有提交类型，可替换为实际类型名称
    data: xLabels.map(date => groupedByDate[date][i] || null), // 无数据则填null
    backgroundColor: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`
  });
}

步骤2：初始化Chart.js柱状图 #

将整理好的xLabels和chartDatasets传入图表配置：

const chartCtx = document.getElementById('dailySubmissionsChart').getContext('2d');
new Chart(chartCtx, {
  type: 'bar',
  data: {
    labels: xLabels,
    datasets: chartDatasets
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false, // 避免日期标签被自动省略
          maxRotation: 45,
          minRotation: 45
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 5 // 根据你的数据范围调整步长
        }
      }]
    }
  }
});

特殊情况：提交数据有分类 #

如果你的提交数据带有类型（比如表单提交、评论提交），可直接按类型分组生成dataset，逻辑更清晰：

// 带类型的示例API数据
const apiRawDataWithType = [
  { date: '2022-11-20', type: '表单', value: 15 },
  { date: '2022-11-20', type: '评论', value: 22 },
  { date: '2022-11-20', type: '上传', value: 18 },
  { date: '2022-11-21', type: '表单', value: 30 }
];

// 提取唯一日期和类型
const xLabels = [...new Set(apiRawDataWithType.map(item => item.date))].sort();
const submissionTypes = [...new Set(apiRawDataWithType.map(item => item.type))];

// 按类型生成datasets
const chartDatasets = submissionTypes.map(type => {
  return {
    label: type,
    data: xLabels.map(date => {
      const matchItem = apiRawDataWithType.find(i => i.date === date && i.type === type);
      return matchItem ? matchItem.value : null;
    }),
    backgroundColor: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`
  };
});

关键说明 #

• Chart.js 2通过null值来标记某一标签位置无对应数据，这样就能保证labels和datasets的索引完全匹配，不会出现错位。
• 同一日期下的多条数据会以并排柱子的形式展示，若需要堆叠展示，可将options.scales.xAxes[0].stacked设为true。

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