2017-05-31 21 views
0

Chartjsのbarchartsに関する質問があります。Chartjs 1つのラベルに対応する複数のbarcharts

ラベルごとに複数のbarchartを表示したいのですが、何らかの理由で非常に難しいと判明しました。

私は、繰り返しの量と誰かが行ったセットを日付の関数として表示するグラフを作成しています。

X軸には日付がありますが、Y軸には繰り返しの量があります。その日に3つのセットを完了した場合、その日付に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] 
     }] 
}; 

日付は正しく表示されますが、担当者/セットが正しく表示されないようです。私はどういうわけか、彼らを何か別のやり方でグループ化しなければならないと信じています。

すべてのお役に立ちました! https://jsfiddle.net/ytkqwL9x/1/

あなたが見ることができるように、セットが間違った日付に落ちる - 最初の日に:jsfiddle製

UPDATE 2017年5月25日、唯一の1セットがあるようになっていますそれは3(7,8,3)を示しています。

+0

確かです!今すぐやります、2秒 –

+0

更新された質問を確認してください –

答えて

2
あなたはこのようなあなたのデータセットの 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] 
    }] 
}; 

注:特定のラベル(日)のためのデータが存在しない場合、あなたは追加する必要があるだろうここではその

ため0working example on jsFiddle

+1

母はそれほど明白です!どうもありがとう ! :) –

+0

あなたはようこそです:) –

関連する問題