私はウェブページ上にプロットバブルチャートをプロットしています。私はデフォルトカラーのリストを取得したい、プロンプティではバブルを描画するために使用します。Plotly.jsのデフォルトカラーリストを取得するには?
7
A
答えて
7
Plotlyがd3
のscale.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
関連する問題
- 1. Plotly.js Hovertextをアクティブにする
- 2. Plotly.js
- 3. Plotly.jsクロスフィルタリング
- 4. Plotly.js autoscale
- 5. null値の色を設定するplotly.js
- 6. Plotly.js:初期ズーム
- 7. Plotly.js Choroplethマップサイズ
- 8. Plotly.js、plotly.jsのテキストに費やされる領域を増やす方法バーx軸?
- 9. Plotly.js - 頻度でプロットヒストグラム
- 10. 限界点がplotly.js
- 11. plotly.js axis 'anchor'属性
- 12. plotly.jsのカテゴリ軸の順序
- 13. Plotly.js凡例を2番目のy軸から外すには
- 14. hover layerはplotly.jsのグラフを非表示にします
- 15. Plotly.jsクリックでポイントを作成
- 16. plotly.jsアニメーション機能の使用
- 17. plotly.jsの範囲範囲
- 18. Plotly.js - 値の間にティックを設定する
- 19. Plotly.js - 棒グラフのカテゴリラベルのイベントをクリック
- 20. plotly.jsの時系列は失敗する、フィドルで
- 21. plotly.js:最初のx軸ティックラベルを表示
- 22. Plotly.jsで日付軸の最小ズームスケールを
- 23. plotly.jsのカテゴリのデータ配列にマーカーの色をマップします
- 24. Androidイメージを取得する方法を取得するには?
- 25. plotly.jsの同じ図の2つのプロットをプロットする方法
- 26. 取得値のカウントの値を取得するには...
- 27. plotly.jsグラフでロングティックラベルが途切れる
- 28. plotly.js - barchartのバー間のスペースを修正する方法
- 29. Plotly.js円グラフの値の書式
- 30. Plotly.jsを使用したカスタム垂直線
が色を生成する関数を手に入れた、あなたはGETCOLOR関数に整数を渡す必要があります。 var getColor = Plotly.d3.scale.category20(); –