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

Question

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

Answer 1

对于 Plotly.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

对于 Plotly Python，请参阅 这个答案。

如果一个图有超过 10 个系列，它将循环回到第一个颜色。

Answer 2

Plotly 使用与 d3 的

scale.category10()

函数相同的

colors

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

Answer 3

对于任何寻找默认 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 4

当您询问气泡图时，我也问了有关 Plotly.js 饼图的相同问题。搜索向我提出了你的问题。

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

8 月 3 日Plotly.js 中有一个提交，它引入了饼图的扩展颜色，为基础

category10

色阶添加了 20 多种颜色。

饼图现在有

extendpiecolors

布局属性。它在源代码的描述说：

如果

true

，则饼图切片颜色（无论是由

piecolorway

或 继承自

colorway

）将扩展到其三倍 原始长度，首先重复每种颜色，然后淡 20% 每种颜色深 20%。这样做的目的是为了减少可能性 当你有很多切片时重复使用相同的颜色，但是你可以 将

false

设置为禁用。 使用

marker.colors

跟踪中提供的颜色永远不会被扩展。

我发现没有简单的方法可以从 Plotly.js 数据中获取实际颜色集。然而，该函数有源代码，它生成扩展颜色，复制它并在您自己的源代码中使用非常简单，以获得与 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 5

注意：从 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 6

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

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 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)
}

编辑：

colors

数组以前可以从

Plotly.d3.scale.category10().range()

检索，而现在似乎可以从

Plotly.PlotSchema.get().layout.layoutAttributes.colorway.dflt

。

Answer 8

有一个属性

colorway

。但只有在创建绘图后才可用（

graph._fullLayout.colorway

）。

可以修改色系（https://plotly.com/javascript/colorway）。