Come personalizzare il colore nel grafico a torta di NVD3

Question

Sto tentando di utilizzare il grafico a torta NVD3 http://nvd3.org/livecode/#codemirrorNav. Ma voglio cambiare il colore predefinito. Come posso cambiare il colore. non sono in grado di farlo

Answer 1

Per utilizzare i propri colori, è necessario sovrascrivere i colori esistenti, preferisco non armeggiare con il codice originale.

Quindi questo è quello che ho fatto.

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

Tutto quello che ho fatto è stato aggiungere .color(d3.scale.myColors().range())

UPDATE :

Controllare risposta da Christopher Chiche, per la soluzione perfetta.

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

Spero che questo aiuti.

Answer 2

È possibile aggiungere colori passando una matrice all'opzione "color()". Quindi aggiungi:

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

Se si desidera utilizzare questi colori per 3 elementi.

Nota: se si dispone di più di 3 elementi, alcuni colori verranno utilizzati più volte.

Answer 3

Se si desidera utilizzare il colore specifico per la torta

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

Poi, organizzare i dati come:

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

Answer 4

Ecco una nota che mi ha fatto, stavo installando chart.color interno nv.addGraph, questo non funzionava correttamente e invece utilizzava i valori predefiniti. Poi l'ho impostato al di fuori di questo e ha funzionato bene.

Answer 5

Io uso .color(function(d) {return [d.value > 0 ? 'blue' : 'red']}); per farlo cambiare colore in base al valore dei dati.

Spero che questo aiuti qualcuno.

Answer 6

Ecco la soluzione di dattiloscritto che è simile alla versione di JS. Diciamo che si desidera un Top 10 dei vostri risultati con 10 diversi colori:

Qui ti darò l'esempio che il lavoro per la mia PieChart o MultiBarChart

• creare un array globale del colore come i colori = [ "# D9D9D9", "# 4B11A6", ....];
• I dati deve essere formattato in un oggetto: MyGraph {key: "Titolo", valori: {flussi per spingere}}
• Poi quando si crea la tabella dei dati basta premere il colore per ciascun flusso:

let stream = {}; let data = []; sia io = 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; 

Il se la condizione è solo lì per evitare che parte vuota nel grafico

Answer 7

ho usato sotto concetto per aggiungere colore personalizzato:

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

Per colore dinamico sulla base di JSON dati è sufficiente aggiungere New json obj color come sotto il concetto ..

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