Chartjs 多个条形图对应一个标签

Question

我有一个关于 Chartjs 中条形图的问题。

我想为每个标签显示多个条形图，但由于某种原因，事实证明这非常困难。

我正在构建一个图表来显示重复次数和某人完成的设置，作为日期的函数。

所以在 X 轴上我有日期 - 在 Y 轴上我有重复次数。如果该人当天完成了 3 组，则该日期应显示 3 个条形图，其中值（条形图的高度）是重复次数。

出于测试目的，我有三个日期和每个日期的几组/代表：

"2017-05-25" - Set 1: 7 reps "2017-05-30" - Set 1: 8 reps - Set 2: 9 reps - Set 3: 10 reps "2017-05-31" - Set 1: 3 reps - Set 2: 7 reps - Set 3: 12 reps - Set 4: 8 reps

这是我当前的 chartData 对象。

var chartData = {
      labels: Object.keys(items.dates),
      datasets: [{
           label: "Reps",
           backgroundColor: "blue",
           data: [7]
      }, {
           label: "Reps",
           backgroundColor: "red",
           data: [8, 9, 10]
      }, {
           label: "Reps",
           backgroundColor: "green",
           data: [3, 7, 12, 8]
      }]
};

日期显示正确，但我似乎无法正确设置代表/组。我相信我必须以某种方式将它们分组或其他方式。

所有帮助表示赞赏！

更新 做了一个 jsfiddle：https ://jsfiddle.net/ytkqwL9x/1/

如您所见，这些集合属于错误的日期 - 在第一个日期：2017-05-25，应该只有 1 个集合，但它显示了 3 (7,8,3)。

Answer 1

您需要data像这样排列数据集的数组...

var chartData = {
   labels: Object.keys(items.dates),
   datasets: [{
      label: "Reps",
      backgroundColor: "blue",
      data: [7, 8, 3]
   }, {
      label: "Reps",
      backgroundColor: "red",
      data: [0, 9, 7]
   }, {
      label: "Reps",
      backgroundColor: "green",
      data: [0, 10, 12]
   }]
};

注：如果有一个特定的标签（日期）没有数据，那么你就必须添加0为

这是jsFiddle 上的工作示例