如何获取 Plotly.js 默认颜色列表？

Question

我正在网页上绘制一个绘图气泡图。我想获取默认颜色列表，绘图用于绘制气泡。

Answer 1

根据Plotly.js的源码（src/components/color/attributes.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 个系列，你会回到第一个颜色。

Answer 2

Plotly 使用与 d3 的 scale.category10() 函数中相同的 colors。 10种颜色后，整个配色方案又从0开始。

颜色代码可在KDD's answer 中找到。下面的 sn-p 给出了 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>

Answer 3

当您问气泡图时，我问的是关于 Plotly.js 饼图的相同问题。搜索为我提出了您的问题。

令人惊讶的是，它与其他图表的工作方式不同，因此我想在此处发布此信息，因为我认为它可能对我自己正在搜索饼图中默认颜色的工作方式的人有用。这个问题有“如何获取 Plotly.js 默认颜色列表？”作为标题，我的回答是这个问题的特例。

8 月 3 日，there was a commit 在 Plotly.js 中引入了饼图的扩展颜色，为基础 category10 色标增加了 20 种颜色。

现在有用于饼图的extendpiecolors 布局属性。它在the source code 的描述说：

如果true，则饼图的颜色（无论是由piecolorway 还是 继承自colorway) 将扩展为其三倍 原始长度首先重复每种颜色，然后轻 20% 每种颜色深 20%。这是为了减少可能性 当你有很多切片时重复使用相同的颜色，但你可以 将false 设置为禁用。 跟踪中使用marker.colors 提供的颜色永远不会扩展。

我没有发现从 Plotly.js 数据中获取实际颜色集的简单方法。但是，该函数有the source code，它会生成扩展的颜色，复制它并在您自己的源代码中使用非常简单，以获得与 Plotly.js 默认用于饼图的颜色列表相同的颜色列表。 Plotly.js 已获得 MIT 许可，因此可以在您的项目中使用他们的代码。

我用以下方式重写了这个函数，现在它只生成与默认情况下 Plotly.js 用于饼图的颜色范围相同的颜色范围。我使用了 ES2015 表示法。它也依赖于tinycolor，但这也是 Plotly.js 的依赖，所以如果你已经在使用 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;
}

Answer 4

对于任何寻找默认 python 色标的人来说，这对我有用：

import plotly as px

px.colors.qualitative.Plotly

['#636EFA',
'#EF553B',
'#00CC96',
'#AB63FA',
'#FFA15A',
'#19D3F3',
'#FF6692',
'#B6E880',
'#FF97FF',
'#FECB52']

这是我找到它的地方：https://plotly.com/python/discrete-color/

Answer 5

您还可以使用类似的方法来检索绘图中使用的颜色：

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

Answer 6

注意：从 Plotly v2 开始，这不再有效，因为 Plotly.d3 不再公开，因此 Plotly.d3.scale.category10() 不起作用。 https://github.com/plotly/plotly.js/pull/5400

可能有更好的方法，但为简单起见，我只是硬编码：

const D3Colors = [
  '#1f77b4',
  '#ff7f0e',
  '#2ca02c',
  '#d62728',
  '#9467bd',
  '#8c564b',
  '#e377c2',
  '#7f7f7f',
  '#bcbd22',
  '#17becf'
];

Answer 7

另请参阅 https://github.com/d3/d3-scale-chromatic

例如： https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/category10.js 指定字符串 1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf。拆分此字符串产生

colors = "1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf".match(/.{1,6}/g)

for (c of colors) {
    div = document.createElement('div')
    div.style.backgroundColor = "#" + c
    div.innerHTML = "#" + c
    document.getElementsByTagName("body")[0].append(div)
}