【问题标题】:how to set color to Angular-nvd3 (1.0.7)如何将颜色设置为 Angular-nvd3 (1.0.7)
【发布时间】:2019-04-16 16:18:27
【问题描述】:

我正在开发一个 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。不需要像链接那样复杂。只需要一对直方图。但我不知道数据的正确结构。它不在文档中。所以我希望有人可以帮助我解决这两个问题。

【问题讨论】:

    标签: angularjs nvd3.js angular-nvd3 angular1.6 ng2-nvd3


    【解决方案1】:

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

    1.第一种方法:

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

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

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

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


    2。第二种方法:

    查看This Plunkr 了解第二种方法的工作演示。请在阅读说明前查看 plunkr。

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

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

    【讨论】:

    • 谢谢你的回答,我试过了,复制了所有的选项和数据。图表显示..但我只能看到那里的数据,但没有显示条形图。但是当我将鼠标悬停在它旁边时,它给了我一个工具提示,所以该栏存在,但我看不到它。
    • 你可以为你所做的事情创建一个 plunkr。可能是你错过了包括一些依赖。一个工作的 plunkr 将有助于了解正在发生的事情。