如何将颜色设置为Angular-nvd3（1.0.7）

Question

我正在处理AngularJS 1.5.3项目，并使用Angular-nvd3（1.0.7）。我遇到了2个问题：

1，当我使用discreteBarChart时，我需要为每一列分配不同的颜色，例如：（似乎图片无法显示，您可以对其进行成像，它是一个简单的图表，例如{ {3}}）

http://krispo.github.io/angular-nvd3/#/discreteBarChart 我没有找到任何地方让我添加一组颜色。所以我想知道如何为每列添加不同的颜色。

第二个问题是，我需要使用多重图表，例如：。不需要像链接那样复杂。只需要一对直方图。但我不知道数据的正确结构。文档中也没有。所以我希望有人可以帮助我解决这两个问题。

Answer 1

回答第一个查询： 您可以通过多种方式为离散的条形图图表中的每个条形设置不同的颜色：

1。第一种方法：

配置您提供给 nvd3指令的$scope.options对象，并提供所需的条码颜色列表。您可以提供颜色名称，十六进制颜色代码或RGB颜色代码。

查看This Plunkr，获取第一种方法的有效演示。请先阅读plunkr，然后再阅读说明。

您可以在此演示中看到颜色在$scope.options对象中作为列表提供。提供第一种颜色作为颜色名称，即红色，提供第二种颜色作为RGB代码，其余所有颜色提供为十六进制代码。您可以在列表中提供任意数量的颜色。

在这里，您应该注意：如果图形中的条形数量更多，则颜色的数量和条形的颜色将以您在列表中提供的相同顺序开始重复。 < / p>

---

2。第二种方法：

查看This Plunkr，了解第二种方法的工作演示。请先阅读plunkr，然后再阅读说明。

在第二种方法中，颜色与$scope.data对象一起提供，该对象提供给 nvd3指令，并且我们对$scope.options配置对象进行了必要的更改。 在$scope.options对象中，这里的颜色字段被设置为一个函数，该函数返回$scope.data数组的各个对象的颜色字段，即“紫色”为第一，rgb（10,20,30）为第二，等等。 ..

希望这会有所帮助！
很快就会获得第二个问题的解决方案。