web-dev-qa-db-ja.com

Plotly.jsのデフォルトの色リストを取得する方法は？

私はWebページに陰謀的なバブルチャートをプロットしています。デフォルトの色のリストを取得したいのですが、陰謀を使ってバブルを描画します。

javascriptplotly
16
Sushil Kumar

Plotlyは、_d3_のscale.category10()関数と同じ colors を使用します。 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>_
11
Maximilian Peters

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を超えるシリーズがある場合は、最初の色に戻ります。

38
KDD

次のようなものを使用して、プロットで使用されている色を取得することもできます。

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
Yorye2013

バブルチャートについて質問しているときに、Plotly.jsの円グラフについても同じ質問をしていました。検索はあなたのためにあなたの質問をもたらしました。

驚いたことに、他のグラフの仕組みとは異なるため、ここでこの情報を投稿したいと思います。なぜなら、円グラフでデフォルトの色がどのように機能するかを自分で探している人にとって役立つと思うからです。この質問には、「Plotly.jsのデフォルトの色リストを取得する方法は？」タイトルとして、私の答えはこの質問の特別なケースです。

8月3日 コミットがありました Plotly.jsで、円グラフの拡張色が導入され、ベースcategory10カラースケールにさらに20色が追加されました。

円グラフのextendpiecolorsレイアウト属性が追加されました。 ソースコード の説明は次のとおりです。

trueの場合、パイスライスの色（piecolorwayによって与えられるか、colorwayから継承されるか）は、最初にすべての色を20％明るくしてから元の長さの3倍に拡張されます。各色が20％濃くなります。これは、多数のスライスがある場合に同じ色を再利用する可能性を減らすことを目的としていますが、falseを無効に設定できます。 marker.colorsを使用してトレースで提供される色は拡張されません。

Plotly.jsデータから実際の色セットを取得する簡単な方法は見つかりませんでした。ただし、拡張カラーを生成する関数の ソースコード があり、それをコピーして独自のソースコードで使用すると、Plotly.jsがpieで使用するのと同じカラーリストを取得できますデフォルトでチャート。 Plotly.jsはMITライセンスであるため、プロジェクトでコードを使用できます。

この関数を次のように書き直し、Plotly.jsがデフォルトで円グラフに使用するのと同じ色範囲を生成するようになりました。 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;
}
0
senya