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

Question

我正在开发AngularJS 1.5.3项目，我使用Angular-nvd3（1.0.7）。我遇到了两个问题：

1，当我使用discreteBarChart时，我需要为每一列分配不同的颜色，如下所示:(似乎图片无法显示，你可以对其进行成像，这是一个简单的图表，如http://krispo.github.io/angular-nvd3/#/discreteBarChart）

和我没有找到任何地方，让我添加一组颜色。所以我想知道如何为每一列添加不同的颜色。

第二个问题是，我需要使用多图表，如下所示：http://krispo.github.io/angular-nvd3/#/multiChart。不需要像链接那么复杂。只需要一对直方图。但我不知道数据的正确结构。它不在文档中。所以我希望有人可以帮助我解决这两个问题。

Answer 1

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

1.第一种方法：

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

查看qazxsw poi，了解第一种方法的工作演示。在阅读说明之前，请参阅plunker。

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

在这里，您应该注意：如果图表中有更多数量的条形图，那么条形图的颜色数量将按照您在列表中提供的顺序重复开始重复。

---

2.第二种方法：

查看$scope.options的第二种方法的工作演示。在阅读说明之前，请参阅plunkr。

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

希望这可以帮助！！ 对于您的第二个问题，我们会尽快回来解决问题。