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

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it.

我正在尝试使用NVD3 http://nvd3.org/livecode/#codemirrorNav一个饼图。但我想改变默认颜色。我该如何改变颜色。我无法做到。

7 个解决方案

#1

To use your own colours you will have to override the existing colours, I prefer not to tinker around with the original code.

要使用自己的颜色,你必须覆盖现有的颜色,我不想修改原始代码。

~~So this is what I did.~~

所以这就是我所做的。

    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;
    });

~~All I did was add .color(d3.scale.myColors().range())~~

我所做的就是添加.color(d3.scale.myColors()。range())

UPDATE :

Check answer by Christopher Chiche, for the perfect solution.

查看Christopher Chiche的答案,获得完美的解决方案。

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

Hope this helps.

希望这可以帮助。

#2

If you want to use specific color for pie

如果你想使用特定颜色的馅饼

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

Then, organize your data as:

然后,将您的数据整理为:

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

#3

You can add colors by passing an array to the 'color()' option. So just add:

您可以通过将数组传递给'color()'选项来添加颜色。所以只需添加:

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

If you want to use these colors for 3 elements.

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

Note: if you have more than 3 elements, then some colors will be used multiple times.

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

#4

Here is a note that got me, I was setting chart.color inside of nv.addGraph, this was not working correctly and would instead use the defaults. I then set it outside of this and it worked fine.

这是一个注释,让我,我在nv.addGraph中设置chart.color,这不能正常工作,而是使用默认值。然后我将它设置在此之外,它工作正常。

#5

I use .color(function(d) {return [d.value > 0 ? 'blue' : 'red']}); to make it change color depending on data value.

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

Hope this help someone.

希望这有助于某人。

#6

Here is the Typescript solution which is similar to the JS version. Let's say you want a Top 10 of your results with 10 different colors :

这是Typescript解决方案,类似于JS版本。假设您想要10种不同颜色的前10名结果:

Here i'll give you the example that work for my PieChart or MultiBarChart

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

Create a global array of color like colors = ["#D9D9D9", "#4B11A6", ....];

创建一个全局颜色数组,如colors = [“#D9D9D9”,“#4B11A6”,....];

The data has to be formatted in an Object : myGraph { key: "Title", values : { streams to push }}

数据必须格式化为Object:myGraph {key:“Title”,values:{streams to push}}

Then when creating your data table just push the color for each stream :

然后在创建数据表时,只需按下每个流的颜色:

let stream = {}; let data = []; let i=0;

let stream = {}; let 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;

The if condition is just there to prevent empty piece in the graph

if条件只是为了防止图中的空块

#7

I have used below concept to add custom color:

我用下面的概念来添加自定义颜色:

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

For dynamic color based on JSON Data just add New json obj color such as below concept..

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

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

#1