34

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

4

7 に答える 7

50

パイに特定の色を使いたい場合

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"
      } 
    ]
  }
]
于 2013-10-04T10:38:11.780 に答える
44

「color()」オプションに配列を渡すことで、色を追加できます。追加するだけです：

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

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

注: 3 つ以上の要素がある場合、一部の色は複数回使用されます。

于 2013-04-24T16:18:47.227 に答える
27

独自の色を使用するには、既存の色をオーバーライドする必要があります。元のコードをいじくり回すのは避けたいと思います。

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

    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'])

お役に立てれば。

于 2013-04-24T12:42:24.067 に答える
0

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

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

于 2015-10-22T13:54:32.517 に答える
0

nv.addGraph 内で chart.color を設定していましたが、これは正しく機能せず、代わりにデフォルトを使用していました。次に、これの外に設定しましたが、うまくいきました。

于 2014-01-09T18:45:59.180 に答える
0

カスタムカラーを追加するために以下のコンセプトを使用しました:

// 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 データに基づく動的な色についてはcolor、以下のコンセプトのような新しい json obj を追加するだけです。

// 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
    },
     ...
];
于 2017-12-13T13:00:10.460 に答える