2016-11-18 11 views
7

私はウェブページ上にプロットバブルチャートをプロットしています。私はデフォルトカラーのリストを取得したい、プロンプティではバブルを描画するために使用します。Plotly.jsのデフォルトカラーリストを取得するには?

+0

が色を生成する関数を手に入れた、あなたはGETCOLOR関数に整数を渡す必要があります。 var getColor = Plotly.d3.scale.category20(); –

答えて

7

Plotlyがd3scale.category20()関数と同じcolorsを使用するだけで、すべての第2の色が実際に使用され、以下の例を参照、すなわちtrace0は、trace1色2を取得し、カラー0を取得trace2カラー4を取得し、等と後全体の配色がPlotly.jsのソースコード(SRC /構成要素/カラー/属性に応じて0

var colors = Plotly.d3.scale.category20(); 
 
var color_div = document.getElementById("colors"); 
 
var data = []; 
 
var i = 0; 
 

 
for (i = 0; i < 12; i += 1) { 
 
    data.push({ 
 
    x: [i, i + 1], 
 
    y: [0, i + 1], 
 
    name: "Trace: " + i + "<br />Color: " + colors(i) 
 
    }); 
 
} 
 
Plotly.plot(color_div, data); 
 

 
var node; 
 
var textnode; 
 
for (i = 0; i < 20; i += 1) { 
 
    node = document.createElement("LI"); 
 
    node.style.color = colors(i); 
 
    textnode = document.createTextNode(colors(i)); 
 
    color_div.appendChild(node); 
 
    node.appendChild(textnode); 
 
}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="colors"></div>

8

から再び開始trace9 .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個を超えるシリーズの場合は、最初の色に戻ります。

1

また、あなたのプロットに使用する色を取得するために、このようなものを使用することができます。

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 
関連する問題