34

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

4

7 回答 7

50

如果您想为饼图使用特定颜色

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-04T10:38:11.780 回答
44

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

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

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

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

于 2013-04-24T16:18:47.227 回答
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;
    });

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


UPDATE :

检查 Christopher Chiche 的答案，以获得完美的解决方案。

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

希望这可以帮助。

于 2013-04-24T12:42:24.067 回答
0

这是一个让我知道的注释，我在 nv.addGraph 中设置了 chart.color，这不能正常工作，而是使用默认值。然后我把它设置在这个之外，它工作得很好。

于 2014-01-09T18:45:59.180 回答
0

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

希望这对某人有所帮助。

于 2015-10-22T13:54:32.517 回答
0

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

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

  • 创建一个全局颜色数组，例如 colors = ["#D9D9D9", "#4B11A6", ....];
  • 数据必须格式化为 Object : myGraph { key: "Title", values : { streams to push }}
  • 然后在创建数据表时，只需推送每个流的颜色：

让流 = {}; 让数据 = []; 让我=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-19T12:59:05.397 回答
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-13T13:00:10.460 回答