2017-01-12 4 views
0

スタックされた棒グラフを作成したいが、積み重ねられるシリーズの通常の方法ではない。d3スタックバーの異常なデータ

正確なデータ例:

[ 
{"issue":19,"created_at":"2017-01-06T14:24:04.247Z","time":"00:30:00"}, 
{"issue":18,"created_at":"2017-01-06T14:24:04.247Z","time":"02:00:00"}, 
{"issue":18,"created_at":"2017-01-07T14:24:04.247Z","time":"00:10:00"}, 
{"issue":19,"created_at":"2017-01-07T14:24:04.247Z","time":"00:10:00"}, 
{"issue":17,"created_at":"2017-01-07T14:24:04.247Z","time":"02:00:00"}, 
{"issue":17,"created_at":"2017-01-07T14:24:04.247Z","time":"06:00:00"}, 
{"issue":17,"created_at":"2017-01-08T14:24:04.247Z","time":"06:00:00"}, 
{"issue":17,"created_at":"2017-01-09T14:24:04.247Z","time":"06:00:00"}, 
{"issue":17,"created_at":"2017-01-09T14:24:04.247Z","time":"00:30:00"}, 
{"issue":18,"created_at":"2017-01-10T14:24:04.247Z","time":"00:10:00"}, 
{"issue":19,"created_at":"2017-01-10T14:24:04.247Z","time":"02:00:00"}, 
{"issue":17,"created_at":"2017-01-10T14:24:04.247Z","time":"06:00:00"}, 
{"issue":19,"created_at":"2017-01-10T14:24:04.247Z","time":"02:00:00"}, 
{"issue":19,"created_at":"2017-01-11T14:24:04.247Z","time":"00:10:00"} 
] 

私は今、値(時間フィールド)が日ごとに積み重ねてID(問題)で着色されている最後の7日間、用積み上げ棒グラフを作成します。

問題は、私が積み重ねシリーズをやっている検出されたすべての例である

私は一日あたりの値の異なる量の持っている:0 < = #values(日)

誰かが私に簡単な例を示すことができる(http://jsfiddle.net/qbmy76on/3/)をこのデータからスタックバーをd3(値は次の例のように単純な整数値にすることもできます)

with Charts.jsプロトタイプを分かりましたが分かりました。将来の機能のためのd3。

http://i.imgur.com/LdtsusH.png

+0

ちょうどいいヒント:これを有効なオブジェクトにし、オブジェクトを配列にラップするには '='ではなく '='を使います。 –

+0

ええ、ちょっとした例のデータですが、それは問題ではありません。私はちょうどd3でそのようなケースを実現する方法を知らない。 –

+0

これは私のjsファイルに今あるデータ構造です:http://i.imgur.com/tljd89p.png –

答えて

0

私は今、次のデータを持っており、一日あたりのそれは(values.object.time)スタックプロットしたい:http://i.imgur.com/xZ5oMAo.png フィドル:https://jsfiddle.net/vt3990yr/26/

[ 
{ 
"key": "2017-01-07", 
"values": [ 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-07", 
    "time": 10 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-07", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-08", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-08", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 10 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-09", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-09", 
    "time": 120 
    }, 
    { 
    "user": 1, 
    "issue": 22, 
    "created_at": "2017-01-09", 
    "time": 120 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-09", 
    "time": 30 
    } 
] 
}, 
{ 
"key": "2017-01-10", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-10", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-10", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-11", 
"values": [ 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-11", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-12", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-12", 
    "time": 120 
    } 
] 
}, 
{ 
"key": "2017-01-13", 
"values": [ 
    { 
    "user": 1, 
    "issue": 22, 
    "created_at": "2017-01-13", 
    "time": 30 
    }, 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-13", 
    "time": 60 
    }, 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-13", 
    "time": 10 
    } 
] 
} 
] 

はこのような何かを得るために、

関連する問題