1

我正在开发一个 AngularJS 1.5.3 项目,我使用 Angular-nvd3(1.0.7)。我遇到了2个问题:

1,当我使用adiscreteBarChart时,我需要为每一列分配不同的颜色,像这样:(好像图片无法显示,你可以成像它,它是一个简单的图表,如http://krispo.github.io /angular-nvd3/#/discreteBarChart )

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

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

4

1 回答 1

0

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

1. 第一种方法:

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

查看This Plunkr以获取第一种方法的工作演示。请在阅读说明之前查看 plunkr。

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

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


2.第二种方法:

查看此 Plunkr以获取第二种方法的工作演示。请在阅读说明之前查看 plunkr。

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

希望这可以帮助!!
很快就会为您的第二个问题提供解决方案。

于 2019-04-16T20:08:00.297 回答