如何在NVD3饼图中自定义颜色

27

要使用你自己的颜色，你将不得不重写现有的颜色，我不喜欢修补原代码。

~~所以这就是我所做的。~~

var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]; 
    d3.scale.myColors = function() { 
     return d3.scale.ordinal().range(myColors); 
    }; 

    nv.addGraph(function() { 
     var chart = nv.models.pieChart() 
      .x(function(d) { return d.label }) 
      .y(function(d) { return d.value }) 
      .showLabels(true).color(d3.scale.myColors().range()); 

     d3.select("#chart svg") 
      .datum(data) 
      .transition().duration(1200) 
      .call(chart); 

     return chart; 
    });

~~我所做的只是由克里斯托弗CHICHE添加.color(d3.scale.myColors().range())~~

UPDATE :

检查答案，完美的解决方案。

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

希望这会有所帮助。

来源

2013-04-24 12:42:24 shabeer90

+0

我使用这个，但我有一个问题，当我更改图表的度量标准并重新绘制它（使用新颜色，我有一个基于标签计算颜色的函数）时，图表绘制错误的颜色。当我点击显示/隐藏某些值时，有时候会重新绘制，有时会重绘错误。你有一些想法，为什么会这样？这只发生在饼图上。 – Nikola 2013-08-29 07:51:04

+0

我会尽我所能解释这一点，例如说你有5个类别在加载，图表采取数组的前5种颜色。因此，您的clour 1将始终分配给数据的第一个元素。这可能不是最好的方法，但尝试有一个数组并映射馅饼的颜色，因此您可以使用ledgend上的onclick函数并获取哪些元素处于活动状态，哪些不是，它会返回一个包含位置的数组，您可以使用它来过滤掉重绘图表时需要通过的颜色。 – shabeer90 2013-08-29 20:33:16

+0

不，不，问题是我想做别人，例如我一组数据与其中不同的领域，例如前。（IP，国家，还有更多），当我显示ip度量（我有4个不同的IPS）我分组数据，创建饼图的颜色和呈现它。当我从IP度量转换到国家时，我再次汇总数据（我得到10个不同的国家），我为它们创建颜色，然后重新绘制饼图，首先呈现它的确定，它需要新颜色（这些颜色没有任何东西处理ip饼的颜色），但是当我隐藏或显示部分饼图时，显示来自ip饼的颜色 – Nikola 2013-08-30 07:27:42

43

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

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

如果您想为3个元素使用这些颜色。

注意：如果您有超过3个元素，则会多次使用某些颜色。

来源

2013-04-24 16:18:47

+0

我们需要在哪里添加颜色（）;？ – GOK 2014-12-16 13:23:39

+0

@GOK您需要将'color（）'添加到'chart'。所以它给了'chart.color（['blue'，'green'，'red']）''。 – 2014-12-16 13:52:27

47

如果你想使用特定的颜色并派

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" 
     } 
    ] 
    } 
]

来源

2013-10-04 10:38:11 nicky

+1

伟大的提示，为我节省了相当一段时间。谢谢。 – 2013-12-20 19:04:36

+1

这是最好的答案，它利用了d3的功能，因为在我的特殊情况下，颜色值被存储在数据库中，所以我不能像在克里斯托弗的回答中那样在我的js文件上硬编码它们。 – svarog 2015-04-14 12:48:24

+0

我用'return d.color'使它工作。 – rikpg 2015-10-09 09:15:52

0

这里有一张纸条，上面有我，我设置的内部chart.color nv.addGraph，这不能正常工作，而是使用默认值。然后我把它设置在这之外，它工作得很好。

来源

2014-01-09 18:45:59

0

我使用.color(function(d) {return [d.value > 0 ? 'blue' : 'red']});使其根据数据值改变颜色。

希望这可以帮助别人。

来源

2015-10-22 13:54:32

0

这是类似于JS版本的Typescript解决方案。比方说，你希望你的结果与10种不同颜色的前10名：

在这里，我会给你，对于我的饼图或MultiBarChart工作

创建喜欢的颜色颜色的全局数组的例子= [ “＃D9D9D9”，“＃4B11A6”，....]。
的数据在一个对象进行格式化：myGraph {关键：“标题”，值：{流推}}
然后创建数据表时，只需按颜色为每个数据流：

let stream = {};让data = [];让我= 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条件是只是为了防止空片在

来源

2017-07-19 12:59:05

0

我已经使用以下概念来添加自定义颜色的图形：

// 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 
    }, 
    ... 
];

来源

2017-12-13 13:00:10 santoshK

如何在NVD3饼图中自定义颜色

回答

相关问题