Javascript 如何定制NVD3饼图中的颜色

我正在尝试使用NVD3的饼图。但是我想更改默认颜色。我如何改变颜色。我不能这样做。

要使用您自己的颜色，您必须覆盖现有的颜色，我不希望修改原始代码

这就是我所做的

我所做的就是添加

.color（d3.scale.myColors（）.range（））

更新：

检查克里斯托弗·奇奇的答案，寻找完美的解决方案

.color(['blue', 'green', 'yellow'])

---

希望这有帮助。

您可以通过向“color（）”选项传递数组来添加颜色。因此，只需添加：

.color(['blue', 'green', 'yellow'])

如果要将这些颜色用于3个元素

---

注意：如果有3个以上的元素，则某些颜色将被多次使用

如果要为饼图使用特定颜色

chart.color(function(d){
    return d.data.color
});

然后，将数据组织为：

[
  {
    key: "Cumulative Return",
    values: [
      { 
        "label": "One",
        "value" : 29.765957771107,
        "color" : "#8c564b"
      } ,
      { 
        "label": "Three",
        "value" : 32.807804682612,
        "color" : "#e377c2"
      } 
    ]
  }
]

---

这是一个提示，我在nv.addGraph中设置chart.color，这无法正常工作，将使用默认值。然后我将它设置在这个范围之外，它工作正常。

我使用

.color（函数（d）{return[d.value>0？'blue'：'red']}）使其根据数据值更改颜色

希望这对其他人有所帮助。
这是一个类似于JS版本的Typescript解决方案。比如说，您希望使用10种不同的颜色获得结果的前10名：

在这里，我将为您提供一个适用于我的PieChart或MultiBarChart的示例


创建类似颜色的全局数组=[“#D9D9D9”、“#4B11A6”、…]
数据必须在一个对象中格式化：myGraph{key:“Title”，value:{streams to push}
然后，在创建数据表时，只需按每个流的颜色即可：

让stream={}；让数据=[]；设i=0

dataTable.forEach((period) => {
    stream = { 'label': period.key, 'value': period.value, 'color': this.colors[i] };

if(period.value !== 0) {
 data.push(stream);}
 i++;
});
this.myGraph = data;

if条件只是为了防止图中出现空块
我使用了以下概念来添加自定义颜色：

// for define variable of custom colors 
var colors = ["red", "green", "blue"];
...
chart {
    color: function(d,i){
        return (d.data && d.data.color) || colors[i % colors.length]
    }
}

对于基于JSON数据的动态颜色，只需添加新的JSON obj
color
，如下面的概念

// or set custom colors directly in the data
data = [{
        key: "One",
        y: 5,
        color: "yellow"
    },{
        key: "Two",
        y: 2,
        color: "gray"
    },{
        key: "Three",
        y: 9
    },
     ...
];

你已经试过什么了？我正在使用这个，但我有一个问题，当我更改图表的度量并重新绘制它时（使用新颜色，我有一个基于标签计算颜色的函数），图表绘制错误的颜色。当我单击以显示/隐藏某些值时，有时会像应该的那样重新绘制，有时会重新绘制错误。你知道为什么会这样吗？这只发生在饼图上。我会尽力解释这一点，比如说你有5个类别在加载，图表采用数组的前5种颜色。因此，clour 1将始终分配给数据的第一个元素。这可能不是最好的方法，但尝试使用数组并将颜色映射到饼上，这样您就可以使用Ledged上的onclick函数来获取哪些元素处于活动状态，哪些元素处于非活动状态，它将返回一个带有位置的数组，当你重新绘制图表时，你可以用它过滤掉你需要传递的颜色。不，问题是我想做其他的事情，例如，我需要一组数据，其中包含不同的字段，例如（ip、国家或更多），当我显示ip度量（我有4个不同的ip）时，我对数据进行分组，为饼图创建颜色并渲染它。当我从ip度量更改为国家时，我再次聚合数据（我得到10个不同的国家），我为它们创建颜色，然后重新绘制饼图，首先渲染ok，它采用新颜色（这些颜色与ip饼图的颜色无关），但是当我隐藏或显示饼图的部分时，ip饼图中的颜色显示出来了。我不明白你为什么要创建一个
d3.scale
，而不是仅仅使用原始数组作为颜色方法的参数。@PauloScardine-我同意你的看法，当我回答这个问题时，我不太了解，Christopher Chiche有一个完美的答案。我对他的答案投了赞成票。将更新我的。很棒的提示，为我节省了不少时间。谢谢。这是最好的答案，它利用了d3功能，因为在我的特殊情况下，颜色值存储在数据库中，所以我不能像Christopher的答案那样在我的js文件中硬编码。我们需要在哪里添加颜色（）@GOK您需要将
color（）
添加到
图表中。所以它给出了
chart.color（['blue'，'green'，'red']）
。
// or set custom colors directly in the data
data = [{
        key: "One",
        y: 5,
        color: "yellow"
    },{
        key: "Two",
        y: 2,
        color: "gray"
    },{
        key: "Three",
        y: 9
    },
     ...
];