web-dev-qa-db-fra.com

Comment obtenir la liste de couleurs par défaut Plotly.js?

Je dessine un graphique à bulles sur une page Web. Je souhaite obtenir la liste des couleurs par défaut que Trace utilise pour dessiner les bulles.

javascriptplotly
14
Sushil Kumar

Plotly utilise les mêmes couleurs que dans la fonction scale.category10() de d3. Après 10 couleurs, tout le jeu de couleurs reprend à partir de 0.

Les codes de couleurs se trouvent dans Réponse de KDD . L'extrait ci-dessous donne les couleurs d3 et prend les couleurs tracées de manière dynamique à partir d'un tracé, c'est-à-dire que même si le tracé change, les codes de couleur seront corrects.

var d3colors = Plotly.d3.scale.category10();
var color_div = document.getElementById('colors');
var data = [];

for (var i = 0; i < 11; i += 1) {
  data.Push({
x: [i],
y: [i + 1],
name: i + ": Color: " + d3colors(i),
type: 'bar'
  });
}
Plotly.plot('colors', data);

var node;
var textnode;
for (var i = 0; i < 10; i += 1) {
  var color = d3colors(i);
  node = document.createElement("div");
  node.style.color = color;
  var text = "D3: " + color;
  textnode = document.createTextNode(text);
  node.appendChild(textnode);
  node.appendChild(document.createElement("br"));
  var rgb = Plotly.d3.selectAll('.point').selectAll('path')[i][0].style.fill;
  color = Plotly.d3.rgb(rgb).toString()
  var text = "Plotly: " + color + " ; " + rgb;
  textnode = document.createTextNode(text);
  node.appendChild(textnode);
  color_div.appendChild(node); 
}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="colors"></div>

10
Maximilian Peters

Selon le code source de Plotly.js (src/components/color/attributs.js), la liste de couleurs par défaut est

    '#1f77b4',  // muted blue
    '#ff7f0e',  // safety orange
    '#2ca02c',  // cooked asparagus green
    '#d62728',  // brick red
    '#9467bd',  // muted purple
    '#8c564b',  // chestnut brown
    '#e377c2',  // raspberry yogurt pink
    '#7f7f7f',  // middle gray
    '#bcbd22',  // curry yellow-green
    '#17becf'   // blue-teal

Si vous avez plus de 10 séries, vous revenez à la première couleur. 

30
KDD

Vous pouvez également utiliser quelque chose comme ceci pour récupérer les couleurs utilisées dans votre tracé:

return.plot_ly.ColorsUsed <- function( plotlyObject ) {

      explorePlot = plotly_json(plotlyObject)
      explorePlot = jsonlite::fromJSON(explorePlot$x$data)

      # Extract colors, names and fillcolors
      colors = explorePlot$data$marker$color
      names = explorePlot$data$name
      fillcolors = explorePlot$data$marker$fillcolor



      # Returns a list with the names, colors and fillcolors used in the plot
      toReturn = list( "names" = names,
                       "colors" = colors,
                       "fillcolors" = fillcolors )

      return(toReturn)


} # End FUnction return.plot_ly.ColorsUsed
1
Yorye2013

Pendant que vous posez des questions sur les graphiques à bulles, je posais la même question sur les graphiques à secteurs de Plotly.js. La recherche a soulevé votre question pour moi.

Étonnamment, cela diffère de la façon dont fonctionnent les autres graphiques. J'aimerais donc publier ces informations ici, car je pense que cela pourrait être utile à quelqu'un qui, lui-même, cherche à savoir comment fonctionnent les couleurs par défaut dans les camemberts. Cette question a "Comment obtenir la liste de couleurs par défaut Plotly.js?" en tant que titre et ma réponse est un cas particulier pour cette question.

Le 3 août, il y avait un commit dans Plotly.js qui introduisait des couleurs étendues pour les graphiques à secteurs qui ajoute 20 couleurs supplémentaires à l'échelle de couleurs category10 de base.

Il existe maintenant l'attribut de présentation extendpiecolors pour les graphiques à secteurs. Sa description sur le code source } indique:

Si true, les couleurs de la tranche de camembert (qu'elles soient données par piecolorway ou Héritées de colorway) seront étendues à trois fois sa longueur originale en répétant d’abord chaque couleur 20% plus claire, puis chaque couleur est 20% plus sombre. Ceci est destiné à réduire la probabilité de réutiliser la même couleur lorsque vous avez plusieurs tranches, mais vous pouvez définissez false pour désactiver . Les couleurs fournies dans la trace, à l'aide de marker.colors, ne sont jamais étendues.

Je n’ai trouvé aucun moyen simple d’obtenir la couleur réelle à partir des données de Plotly.js. Cependant, il y a le code source } de la fonction, qui génère les couleurs étendues et il est assez simple de le copier et de l'utiliser dans votre propre code source pour obtenir la même liste de couleurs que celle utilisée par Plotly.js pour les graphiques à secteurs. par défaut. Plotly.js est sous licence MIT, il est donc autorisé à utiliser leur code dans votre projet.

J'ai réécrit cette fonction de la manière suivante et maintenant, elle génère simplement la plage de couleurs identique à celle utilisée par Plotly.js pour les mises en plan par défaut. J'ai utilisé la notation ES2015. Cela dépend aussi de tinycolor mais ceci est une dépendance de Plotly.js aussi, donc ça ne devrait pas être un problème si vous utilisez déjà Plotly.js

import Plotly from 'plotly.js/lib/core'
import tinycolor from 'tinycolor2'

function piechartExtendedColors() {
  var colorList = Plotly.d3.scale.category10().range();
  var pieColors = colorList.slice();

  colorList.forEach(color => {
      pieColors.Push(tinycolor(color).lighten(20).toHexString());
  });

  colorList.forEach(color => {
      pieColors.Push(tinycolor(color).darken(20).toHexString());
  });

  return pieColors;
}
0
senya