Как получить Plotly.список цветов по умолчанию js?

Я строю плотную пузырьковую диаграмму на веб-странице.. Я хочу получить список цветов по умолчанию, которые плотли использует для рисования пузырьков.

3 10
javascript plotly

3 ответа:

Плотли использует те жецвета , что и в функции d3 scale.category10(). После 10 цветов вся цветовая схема снова начинается с 0.

Коды цветов можно найти в ответеKDD . Фрагмент ниже дает цвета d3 и берет цвета Plotly динамически из графика, т. е. даже если Plotly изменяет цветовые коды будут правильными. 

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>
8

Согласно исходному коду Plotly.js (src / компоненты / цвет / атрибуты.js), список цветов по умолчанию

    '#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
Если у вас есть более 10 серий, вы вернетесь к первому цвету.
20

Вы также можете использовать что-то вроде этого, чтобы восстановить цвета, используемые в вашем сюжете: 

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