NVD3.js：带有两个y轴的堆积和分组条形图

Question

我正在使用NVD3.js并想要创建以下图表：

如您所见 - 条形堆叠，双轴和分组按x轴

使用multiChart我得到了：

它是堆叠的，两个轴，但是没有按x轴分组。

也许我需要使用不同的图表类型 - 而不是multiChart，但我找不到两个y轴的条形图。

1）如何使用NVD3.js实现此目的？

2）如果无法在NVD3.js中完成，那么我可以正确整合哪个解决方案？

谢谢！

Answer 1

NVD3 Javascript库引用他们的网站，“尝试构建可重复使用的图表和图表组件”。为了强调图表的可重用性，它的创建者做了几个关键决定：

• 他们专注于实施标准图表设计（折线图，条形图，散点图），但以灵活，互动的方式实施。

• 他们对所有图表使用了相同的数据结构要求：

  • 主数据数组包含多个数据系列，每个数据系列代表数据的逻辑分组;

  • 每个系列都是包含两个或多个变量的单个数据对象的数组。

• 所有图表都有类似的样式，并重用重要的代码片段。

NVD3库允许您创建分组条形图或堆积条形图，甚至a chart that interactively animates between the two。

调整该图表以创建堆叠的和分组条形图不是一项简单的任务，部分原因是数据结构会有所不同。您需要一个三级数据结构（series > sub-series > datapoints，代表groups > stacks > bars）而不是NVD3使用的两级（series > datapoints）结构。

然而，一切都不会丢失。 NVD3建立在d3 Javascript library之上。 D3更灵活，更开放;它没有定义特定的图表类型，它定义了一种操作网页以使其与您的数据匹配的方法。您可以使用它来创建可以使用HTML或SVG绘制的任何类型的图表。但是，当然，这意味着它需要更多的工作，因为你必须明确地创建图的所有部分，并自己做出所有的设计决定！

我强烈建议，如果您想使用d3，请从tutorials list或其中一个introductory books开始。但是，您还需要查看gallery of examples，然后您将找到以下特别感兴趣的图表：

• Mike Bostock's Stacked Bar Chart
• Bostock's Grouped Bar Chart of the same data
• Ali Gencay's adaptation of those examples to create a stacked, grouped bar chart

熟悉d3中的构建图表后，您可能需要打开NVD3源代码，看看是否可以借用一些可重复使用的代码组件（确保尊重他们的licence terms ，当然）。但是，作为初学者，我不建议这样做 - 这是很多代码，并且使用了许多复杂的技术将所有部分组合在一起。