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添加null该

以下是 working example on jsFiddle

Chartjs对应一个标签

1 个答案: