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

我正在网页上绘出一幅生动的气泡图。。我想获得默认颜色列表，plotly用于绘制气泡。

plotly使用与

d3

的

scale.category10（）函数中相同的颜色。10种颜色后，整个配色方案再次从0开始

颜色代码可在中找到。下面的代码段给出d3颜色，并从绘图中动态获取绘图颜色，即即使绘图更改，颜色代码也将正确


var d3colors=Plotly.d3.scale.category10（）；
var color_div=document.getElementById（'colors'）；
var数据=[]；
对于（变量i=0；i<11；i+=1）{
数据推送({
x:[i]，
y:[i+1]，
名称：i+”：颜色：“+D3颜色（i），
类型：'bar'
});
}
Plotly.plot（'颜色'，数据）；
var节点；
var-textnode；
对于（变量i=0；i<10；i+=1）{
var color=d3colors（i）；
节点=document.createElement（“div”）；
node.style.color=颜色；
var text=“D3:”+颜色；
textnode=document.createTextNode（文本）；
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（文本）；
node.appendChild（textnode）；
颜色分区附加子节点；
}
根据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个以上的系列，您将返回到第一种颜色
 您也可以使用类似的方法检索绘图中使用的颜色：

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

return.plot\u ly.colorsed当你问气泡图时，我问了同样的关于Plotly.js饼图的问题。搜索结果向我提出了你的问题

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

8月3日，Plotly.js中引入了饼图的扩展颜色，为基础
类别10
颜色比例增加了20种颜色

现在有了饼图的
extendpicolors
layout属性。它在网站上的描述是：

如果
true
，则饼图切片颜色（无论是由
piecolorway
或
继承自
配色
）将扩展到其
初始长度：首先重复每种颜色20%的颜色，然后
每种颜色深20%。这是为了减少这种可能性
当你有许多切片时，重复使用相同的颜色，但是你可以
将
false
设置为禁用。
使用
标记在跟踪中提供的颜色。永远不会扩展颜色

我没有找到简单的方法来获取Plotly.js数据的实际颜色设置。但是，该函数的作用是生成扩展颜色，复制它并在您自己的源代码中使用它可以非常简单地获得与Plotly.js默认情况下用于饼图相同的颜色列表。Plotly.js是麻省理工学院授权的，因此可以在项目中使用它们的代码

我用下面的方法重写了这个函数，现在它只生成与Plotly.js默认情况下用于piecharts的颜色范围相同的颜色范围。我使用了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;
}

对于任何寻找默认python颜色比例的人来说，这对我来说都很有用：

以px格式打印导入
px.colors.quality.Plotly
[#636EFA'，
"EF553B",，
“#00CC96”，
"AB63FA",，
"FFA15A",，
"19D3F3",，
"FF6692",，
"B6E880",，
"FF97FF",，
“#FECB52”]

这就是我找到它的地方：
要得到生成颜色的函数，必须向getColor函数传递一个整数。var getColor=Plotly.d3.scale.category20（）；在Python中，此列表可以直接检索为
plotly.colors.DEFAULT\u plotly\u colors
其他可比较的预制颜色列表可以从plotly.colors.qualificial
plotly.d3.scale.category10（）。在此处添加，这样人们就不必手动尝试每种颜色。