如何获取Plotly.js默认颜色列表? [英] How to get Plotly.js default colors list?

问题描述

我在网页上绘制了一个气泡图..我想获取默认颜色的列表，用它来绘制气泡.

I am plotting a plotly bubble chart on a webpage.. I want to get the list of default colors, plotly uses to draw the bubbles.

推荐答案

Plotly使用相同的

Plotly uses the same colors as in d3's scale.category10() function. After 10 colors the whole color scheme starts again from 0.

可以在 KDD的答案中找到颜色代码.下面的代码段提供了d3颜色，并从绘图中动态获取Plotly颜色，即，即使Plotly更改了颜色代码也将是正确的.

The colors codes can be found in KDD's answer. The snippet below gives the d3 colors and takes the Plotly colors dynamically from a plot, i.e. even if the Plotly changes the color codes will be correct.

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>

这篇关于如何获取Plotly.js默认颜色列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！