如何将颜色设置为 Angular-nvd3 (1.0.7)
how to set color to Angular-nvd3 (1.0.7)
我正在开发一个 AngularJS 1.5.3 项目,我使用 Angular-nvd3(1.0.7)。我遇到了 2 个问题:
1,当我使用discreteBarChart
的时候,我需要给每一列分配不同的颜色,像这样:(好像图片不能显示,你可以成像,这是一个简单的图表喜欢 http://krispo.github.io/angular-nvd3/#/discreteBarChart)
而且我没有找到任何地方让我添加一组颜色。所以我想知道如何为每一列添加不同的颜色。
第二个问题是,我需要使用多图表,如下所示:http://krispo.github.io/angular-nvd3/#/multiChart。不需要像link那么复杂。只需要一对直方图。但我不知道数据是否正确 structure.and 它不在文档中。所以我希望有人能帮我解决这两个问题。
回答您的第一个问题:
您可以通过多种方式为离散条形图图表中的每个条设置不同的颜色:
1.第一种方法:
配置您提供给 nvd3 指令 的 $scope.options
对象,并提供您想要的条形颜色代码列表。您可以提供颜色名称、十六进制颜色代码或 RGB 颜色代码。
查看 This Plunkr 第一种方法的工作演示。看解释前请先看plunkr
您可以在此演示中看到,颜色在 $scope.options
对象中作为列表提供。第一种颜色作为颜色名称提供,即红色,第二种颜色作为 RGB 代码提供,其余所有颜色作为十六进制代码提供。您可以在列表中提供任意数量的颜色。
在这里,你应该注意:如果你的图表中有更多的条形图,那么颜色的数量和条形图的颜色将按照你在列表中提供的相同顺序开始重复。
2。第二种方法:
查看 This Plunkr 以了解第二种方法的工作演示。看解释前请先看plunkr
在第二种方法中,颜色由您提供给 nvd3 指令 的 $scope.data
对象提供,我们对 $scope.options
配置进行了必要的更改目的。
这里在 $scope.options
对象中,颜色字段设置为 returns 颜色字段 $scope.data
数组的各个对象的颜色字段,即 'purple' 首先,rgb(10,20, 30) 第二等..
希望对您有所帮助!!
很快就会回来解决你的第二个问题。
我正在开发一个 AngularJS 1.5.3 项目,我使用 Angular-nvd3(1.0.7)。我遇到了 2 个问题:
1,当我使用discreteBarChart
的时候,我需要给每一列分配不同的颜色,像这样:(好像图片不能显示,你可以成像,这是一个简单的图表喜欢 http://krispo.github.io/angular-nvd3/#/discreteBarChart)
第二个问题是,我需要使用多图表,如下所示:http://krispo.github.io/angular-nvd3/#/multiChart。不需要像link那么复杂。只需要一对直方图。但我不知道数据是否正确 structure.and 它不在文档中。所以我希望有人能帮我解决这两个问题。
回答您的第一个问题: 您可以通过多种方式为离散条形图图表中的每个条设置不同的颜色:
1.第一种方法:
配置您提供给 nvd3 指令 的 $scope.options
对象,并提供您想要的条形颜色代码列表。您可以提供颜色名称、十六进制颜色代码或 RGB 颜色代码。
查看 This Plunkr 第一种方法的工作演示。看解释前请先看plunkr
您可以在此演示中看到,颜色在 $scope.options
对象中作为列表提供。第一种颜色作为颜色名称提供,即红色,第二种颜色作为 RGB 代码提供,其余所有颜色作为十六进制代码提供。您可以在列表中提供任意数量的颜色。
在这里,你应该注意:如果你的图表中有更多的条形图,那么颜色的数量和条形图的颜色将按照你在列表中提供的相同顺序开始重复。
2。第二种方法:
查看 This Plunkr 以了解第二种方法的工作演示。看解释前请先看plunkr
在第二种方法中,颜色由您提供给 nvd3 指令 的 $scope.data
对象提供,我们对 $scope.options
配置进行了必要的更改目的。
这里在 $scope.options
对象中,颜色字段设置为 returns 颜色字段 $scope.data
数组的各个对象的颜色字段,即 'purple' 首先,rgb(10,20, 30) 第二等..
希望对您有所帮助!!
很快就会回来解决你的第二个问题。