如何获得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()功能.在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

对于Plotly Python，可以通过以下方式确定默认调色板：

>>> import plotly as px
>>> px.colors.qualitative.Plotly
[
    '#636EFA',
    '#EF553B',
    '#00CC96',
    '#AB63FA',
    '#FFA15A',
    '#19D3F3',
    '#FF6692',
    '#B6E880',
    '#FF97FF',
    '#FECB52',
]

...如文档中所述。

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