Question

我正在使用dc.js创建多个折线图。我创建了一个图表，它是一个堆栈图，我想将其更改为多条折线图。

例如，当前这里的线堆叠在彼此之上，我希望它们不要彼此堆叠，而应像序列图一样流动（它可以根据数据相互覆盖）。

我使用以下代码在图表中显示了堆栈

for(let key in curr) {
   if(index === 0) {
      subscriptionChart.group(curr[key], key)
   } else {
      subscriptionChart.stack(curr[key], key)
   }
}

我在下面添加了一个JS小提琴，请为此提供帮助。谢谢。

Stack chart JS Fiddle

Answer 1

我认为您的问题的核心是：为了绘制序列图而不是堆叠图，是否真的需要完全不同的数据格式？

不幸的是，答案是“是”。

请尝试展平transformedSubscriptionData，使其具有一个“多键”和每行一个值，例如当前转换数据的第三行将扩展为：

[
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'canceled', count: 22},
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'active', count: 2},
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'skip', count: 10},
   ...
]

然后，从series chart example到如何生成该图表应该很明显。

重要的设置是

chart.seriesAccessor(d => d.result)

使用上面详细介绍的新结果列。

如果遇到麻烦，请在问题中添加一个小节，我们可以对其进行迭代。

使用dc.js将堆叠折线图转换为多个折线图（非堆叠）

1 个答案: