web-dev-qa-db-fra.com

Comment personnaliser la couleur dans le graphique à secteurs de NVD3

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.

javascriptd3.jsnvd3.js
33
user2315392

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.

27
shabeer90

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

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. 

43
Christopher Chiche

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

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.

0
Manh Tai

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

  • Créez un tableau global de couleurs comme colors = ["# D9D9D9", "# 4B11A6", ....];
  • Les données doivent être formatées dans un objet: myGraph {key: "Title", valeurs: {streams to Push}}
  • Ensuite, lors de la création de votre table de données, indiquez simplement la couleur de chaque flux:

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

0
Andrea Martines

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é.

0
Chris Stephens