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

这里是working example on jsFiddle