J'essaie d'utiliser NVD3 http://nvd3.org/livecode/#codemirrorNav un diagramme à secteurs. Mais je veux changer la couleur par défaut. Comment puis-je changer la couleur. je ne suis pas capable de le faire.
Pour utiliser vos propres couleurs, vous devrez remplacer les couleurs existantes, je préfère ne pas bricoler avec le code original.
Donc c'est ce que j'ai fait.
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;
});
Tout ce que j'ai fait a été d'ajouter .color(d3.scale.myColors().range())
UPDATE :
Vérifiez la réponse de Christopher Chiche pour la solution parfaite.
.color(['blue', 'green', 'yellow'])
J'espère que cela t'aides.
Si vous souhaitez utiliser une couleur spécifique pour la tarte
chart.color(function(d){
return d.data.color
});
Ensuite, organisez vos données comme suit:
[
{
key: "Cumulative Return",
values: [
{
"label": "One",
"value" : 29.765957771107,
"color" : "#8c564b"
} ,
{
"label": "Three",
"value" : 32.807804682612,
"color" : "#e377c2"
}
]
}
]
Vous pouvez ajouter des couleurs en passant un tableau à l'option 'color ()'. Alors ajoutez simplement:
.color(['blue', 'green', 'yellow'])
Si vous souhaitez utiliser ces couleurs pour 3 éléments.
Remarque: si vous avez plus de 3 éléments, certaines couleurs seront utilisées plusieurs fois.
J'ai utilisé le concept ci-dessous pour ajouter une couleur personnalisée:
// 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]
}
}
Pour une couleur dynamique basée sur les données JSON, ajoutez simplement New json obj color
tel que ci-dessous.
// 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
},
...
];
J'utilise .color(function(d) {return [d.value > 0 ? 'blue' : 'red']});
pour le faire changer de couleur en fonction de la valeur des données.
J'espère que cela aidera quelqu'un.
Voici la solution TypeScript similaire à la version JS. Disons que vous voulez un Top 10 de vos résultats avec 10 couleurs différentes:
Ici, je vais vous donner l'exemple qui fonctionne pour mon PieChart ou MultiBarChart
laissez stream = {}; let data = []; soit 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;
La condition if est juste là pour empêcher la pièce vide dans le graphique
Voici une note qui m'a eu, je mettais chart.color à l'intérieur de nv.addGraph, cela ne fonctionnait pas correctement et utiliserait plutôt les valeurs par défaut. Je l'ai ensuite mis en dehors de cela et cela a bien fonctionné.