web-dev-qa-db-ja.com

NVD3の円グラフの色をカスタマイズする方法

NVD3を使用しようとしています http://nvd3.org/livecode/#codemirrorNav 円グラフ。しかし、デフォルトの色を変更したいです。色を変更するにはどうすればよいですか。できません。

javascriptd3.jsnvd3.js
33
user2315392

独自の色を使用するには、既存の色を上書きする必要がありますが、元のコードをいじるのは避けたいです。

これが私がしたことです。

_    var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
    d3.scale.myColors = function() {
        return d3.scale.ordinal().range(myColors);
    };

    nv.addGraph(function() {
      var chart = nv.models.pieChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .showLabels(true).color(d3.scale.myColors().range());

        d3.select("#chart svg")
            .datum(data)
          .transition().duration(1200)
            .call(chart);

      return chart;
    });
_

私がしたことは.color(d3.scale.myColors().range())を追加することだけでした


_UPDATE :_

完璧なソリューションについては、Christopher Chicheの回答をご覧ください。

_.color(['blue', 'green', 'yellow'])
_

お役に立てれば。

27
shabeer90

パイに特定の色を使用する場合

chart.color(function(d){
    return d.data.color
});

次に、データを次のように整理します。

[
  {
    key: "Cumulative Return",
    values: [
      { 
        "label": "One",
        "value" : 29.765957771107,
        "color" : "#8c564b"
      } ,
      { 
        "label": "Three",
        "value" : 32.807804682612,
        "color" : "#e377c2"
      } 
    ]
  }
]
50
nicky

配列を 'color（）'オプションに渡すことで色を追加できます。追加するだけです：

.color(['blue', 'green', 'yellow'])

これらの色を3つの要素に使用する場合。

注：3つ以上の要素がある場合、いくつかの色が複数回使用されます。

44
Christopher Chiche

以下の概念を使用してカスタムカラーを追加しました。

// for define variable of custom colors 
var colors = ["red", "green", "blue"];
...
chart {
    color: function(d,i){
        return (d.data && d.data.color) || colors[i % colors.length]
    }
}

JSONデータに基づく動的な色の場合、次の概念のような新しいjson obj colorを追加するだけです。

// or set custom colors directly in the data
data = [{
        key: "One",
        y: 5,
        color: "yellow"
    },{
        key: "Two",
        y: 2,
        color: "gray"
    },{
        key: "Three",
        y: 9
    },
     ...
];
0
SantoshK

.color(function(d) {return [d.value > 0 ? 'blue' : 'red']});を使用して、データ値に応じて色を変更します。

これが誰かを助けることを願っています。

0
Manh Tai

これは、JSバージョンに類似したTypeScriptソリューションです。結果のトップ10を10種類の色で表示するとします。

ここでは、PieChartまたはMultiBarChartで機能する例を紹介します

  • Colors = ["＃D9D9D9"、 "＃4B11A6"、....];のような色のグローバル配列を作成します。
  • データはObject：myGraph {key： "Title"、values：{streams to Push}}でフォーマットする必要があります
  • 次に、データテーブルを作成するときに、各ストリームの色をプッシュするだけです。

let stream = {}; let data = []; i = 0;

dataTable.forEach((period) => {
    stream = { 'label': period.key, 'value': period.value, 'color': this.colors[i] };

if(period.value !== 0) {
 data.Push(stream);}
 i++;
});
this.myGraph = data;

グラフの空の部分を防ぐためにif条件があります

0
Andrea Martines

ここに私が得たメモがあります、私はnv.addGraph内でchart.colorを設定していましたが、これは正しく機能していなかったため、代わりにデフォルトを使用します。それからこれの外にそれを設定し、それはうまく働きました。

0
Chris Stephens