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

Question

我对 Chartjs 中的条形图有疑问。

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

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

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

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

“2017-05-25”
- 第 1 组:7 次
《2017-05-30》
- 第 1 组:8 次
- 第 2 组:9 次
- 第 3 组:10 次
《2017-05-31》
- 第 1 组:3 次
- 第 2 组:7 次
- 第 3 组:12 次
- 第 4 组:8 次

这是我当前的 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