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

Question

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

原文由 Sushil Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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>

原文由 Maximilian Peters 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 源代码，默认的颜色列表是：

 '#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个系列，你会回到第一个颜色。

原文由 KDD 发布，翻译遵循 CC BY-SA 4.0 许可协议