¿Cómo obtener la lista de colores predeterminados de Plotly.js?

Solución:

De acuerdo con el código fuente de Plotly.js (src / components / color / attributes.js), la lista de colores predeterminada es

    '#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 tiene más de 10 series, volverá al primer color.

Plotly usa los mismos colores que en d3‘s scale.category10() función. Después de 10 colores, todo el esquema de colores comienza de nuevo desde 0.

Los códigos de colores se pueden encontrar en la respuesta de KDD. El fragmento de abajo proporciona los colores d3 y toma los colores de Plotly de forma dinámica de un gráfico, es decir, incluso si Plotly cambia, los códigos de color serán correctos.

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>

Mientras pregunta acerca de los gráficos de burbujas, yo estaba haciendo la misma pregunta sobre los gráficos circulares de Plotly.js. La búsqueda me sacó a relucir tu pregunta.

Sorprendentemente, difiere de cómo funcionan otros gráficos, por lo que me gustaría publicar esta información aquí, porque creo que podría ser útil para alguien que, como yo, esté buscando cómo funcionan los colores predeterminados en los gráficos circulares. Esta pregunta tiene “¿Cómo obtener la lista de colores predeterminados de Plotly.js?” como título y mi respuesta es un caso especial para esta pregunta.

El 3 de agosto hubo un compromiso en Plotly.js que introdujo colores extendidos para gráficos circulares que agrega 20 colores más a la base. category10 escala de color.

Ahora existe el extendpiecolors atributo de diseño para gráficos circulares. Su descripción en el código fuente dice:

Si true, los colores de las rebanadas de pastel (ya sea que estén dados por piecolorway o heredado de colorway) se extenderá a tres veces su longitud original repitiendo primero cada color un 20% más claro y luego cada color un 20% más oscuro. Esto tiene como objetivo reducir la probabilidad de reutilizar el mismo color cuando tiene muchos cortes, pero puede configurar false deshabilitar. Colores proporcionados en la traza, utilizando marker.colors, nunca se amplían.

No encontré una forma sencilla de obtener el color real establecido a partir de los datos de Plotly.js. Sin embargo, existe el código fuente de la función, que genera los colores extendidos y es bastante simple copiarlo y usarlo en su propio código fuente para obtener la misma lista de colores que Plotly.js usa para los gráficos circulares por defecto. Plotly.js tiene licencia del MIT, por lo que se le permite usar su código en su proyecto.

Reescribí esta función de la siguiente manera y ahora simplemente genera el rango de color idéntico al que Plotly.js usa para gráficos circulares por defecto. Usé la notación ES2015. También depende de tinycolor pero esto también es una dependencia de Plotly.js, por lo que no debería ser un problema si ya está usando 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;
}

---

---

Utiliza Nuestro Buscador