Question

我想创建一个堆积条形图，但不是通常的系列方式，谁会堆叠。

确切的数据示例：

[  
{"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（问题）着色。

问题是我发现正在进行系列堆叠的所有示例

我每天有不同数量的值：0＆lt; = #values（day）

有人可以向我展示一个简短的例子（http://jsfiddle.net/qbmy76on/3/），用d3从这些数据中获取堆积条（值也可以是一个简单的整数值，如下例所示）

使用Charts.js我实现了一个Prototype（有分钟），但我想切换到d3以备将来的功能。

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

Answer 1

我现在有以下数据，并希望每天绘制堆积（values.object.time）：

[
{
"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
  }
]
}
]

得到这样的结果：http://i.imgur.com/xZ5oMAo.png 小提琴：https://jsfiddle.net/vt3990yr/26/

d3堆积条带有异常数据

1 个答案: