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

How to customize color in pie chart of NVD3


如何自定义NVD3饼图中的颜色 已获得7个解决方法 2020-08-18 18:08:37 javascript

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


如何自定义NVD3饼图中的颜色 方法1

要使用您自己的颜色,您将不得不覆盖现有的颜色,我不想修改原始代码.

这就是我所做的.

    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 :

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

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

希望这有所帮助.


如何自定义NVD3饼图中的颜色 方法2

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

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

如何自定义NVD3饼图中的颜色 方法3

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

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

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

注意: 如果您有3个以上的元素,那么某些颜色将被多次使用.


如何自定义NVD3饼图中的颜色 方法4

这是一个让我感到不安的注释,我正在nv.addGraph内部设置chart.color,但无法正常工作,而是使用默认值.然后,我将其设置在此之外,并且工作正常.


如何自定义NVD3饼图中的颜色 方法5

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

希望这对某人有所帮助.


如何自定义NVD3饼图中的颜色 方法6

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

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

  • 创建一个全局数组颜色,如colors = ["# D9D9D9","#4B11A6",....];
  • 数据必须在对象中格式化: myGraph { key: "Title",values : {流推送}}
  • 然后在创建数据表时,只需推送每个流的颜色:
  • 让stream = {}; 让data = []; 让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条件只是为了防止图中空块


    如何自定义NVD3饼图中的颜色 方法7

    我已经使用以下概念添加自定义颜色:

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

    .htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation