如何在Chart.js中展示基于日期分组的权重数据

看起来你是想用Chart.js绘制按日期分组的权重柱状图，但当前的datasets结构不太合理——你把每个日期单独做成了一个数据集，而且数据数组的长度和labels不匹配，这会导致图表显示异常。下面是调整后的完整解决方案：

1. 先明确分组后的数据结构 #

假设你的分组后数据是类似这样的（替换成你实际的分组结果）：

// 示例：key是日期，value是包含权重的对象
const groupedData = {
  '21/03/2018': { weight: 12 },
  '01/04/2018': { weight: 8 },
  '02/04/2018': { weight: 15 },
  '04/04/2018': { weight: 5 },
  '05/04/2018': { weight: 20 },
  '06/04/2018': { weight: 10 }
};

2. 生成匹配labels的权重数组 #

你的labels已经是所有要展示的日期列表，我们需要生成一个和labels长度完全对应的权重数组，确保每个日期在图表上都有对应的数据点：

const labels = ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'];

// 遍历labels，提取对应日期的权重，没有则填0
const weightData = labels.map(date => groupedData[date]?.weight || 0);

3. 配置正确的Chart.js数据结构 #

我们只需要一个数据集来展示所有日期的权重，这样图表会呈现“每个日期对应一个柱子”的效果，符合你“每组数据仅需绘制权重值”的需求：

var ctx = document.getElementById("barChart").getContext("2d");

var data = {
  labels: labels,
  datasets: [
    {
      label: '日期权重', // 可自定义系列名称
      data: weightData,
      backgroundColor: 'rgba(54, 162, 235, 0.6)', // 柱子背景色
      borderColor: 'rgba(54, 162, 235, 1)', // 柱子边框色
      borderWidth: 1
    }
  ]
};

// 初始化柱状图
var barChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true, // Y轴从0开始，更直观展示权重差异
        title: {
          display: true,
          text: '权重值' // Y轴标题
        }
      },
      x: {
        title: {
          display: true,
          text: '日期' // X轴标题
        }
      }
    }
  }
});

关键说明 #

• 确保weightData数组的长度和labels完全一致，这样每个日期在X轴上都会对应一个柱子
• 用单个数据集来承载所有权重数据，避免生成多个重叠的系列
• 如果你的分组数据结构和示例不同（比如每个日期直接对应权重值，而非对象），只需调整map函数里的逻辑，比如改成return groupedData[date] || 0即可

内容的提问来源于stack exchange，提问作者Ronald Araújo