Wie Farbe in Kreisdiagramm von NVD3 anpassen

Question

Ich versuche NVD3 http://nvd3.org/livecode/#codemirrorNav ein Kreisdiagramm zu verwenden. Aber ich möchte die Standardfarbe ändern. Wie ändere ich die Farbe? Ich kann das nicht machen.

Answer 1

Um Ihre eigenen Farben zu verwenden, müssen Sie die vorhandenen Farben überschreiben, ich möchte lieber nicht mit dem Originalcode basteln.

Also das ist was ich getan habe.

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

Alles, was ich war .color(d3.scale.myColors().range())

UPDATE :

überprüfen Antwort von Christopher Chiche, für die perfekte Lösung hinzugefügt haben.

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

Hoffe, das hilft.

Answer 2

Sie können Farben hinzufügen, indem Sie ein Array an die Option 'color()' übergeben. Also einfach hinzufügen:

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

Wenn Sie diese Farben für 3 Elemente verwenden möchten.

Hinweis: Wenn Sie mehr als 3 Elemente haben, werden einige Farben mehrfach verwendet.

Answer 3

Wenn Sie Kuchen bestimmte Farbe verwenden möchten

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

Dann organisieren Sie Ihre Daten wie:

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

Answer 4

Hier ist eine Notiz, die mich bekam, war ich Einstellung chart.color innerhalb von nv.addGraph, das funktionierte nicht richtig und würde stattdessen die Standardeinstellungen verwenden. Ich stellte es dann draußen und es hat gut funktioniert.

Answer 5

Ich verwende .color(function(d) {return [d.value > 0 ? 'blue' : 'red']});, um die Farbe je nach Datenwert zu ändern.

Hoffe, dass diese jemandem helfen.

Answer 6

Hier ist die Typescript-Lösung, die der JS-Version ähnelt. Angenommen, Sie sind mit 10 verschiedenen Farben eine Top 10 Ihrer Ergebnisse wollen:

Hier werde ich Ihnen das Beispiel, das für meine PieChart oder MultiBarChart arbeiten

• Erstellen Sie eine globale Palette von Farben wie Farben = [ "# D9D9D9", "# 4B11A6", ....];
• hat die Daten in einem Objekt formatiert werden: MyGraph {key: „Titel“, Werte: {Ströme drücken}}
• Dann, wenn Sie Ihre Datentabelle Erstellen Drücken Sie einfach die Farbe für jeden Stream:

let stream = {}; Lassen Sie Daten = []; Lass 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; 

Die if Zustand gerade dort ist leer Stück in der Grafik

Answer 7

I unten Konzept verwendet habe, um zu verhindern benutzerdefinierte Farbe hinzuzufügen:

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

Für dynamische Farbe basierend auf JSON Daten nur hinzufügen New json obj color wie unter Konzept ..

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