如何在NVD3的饼图中自定义颜色 [英] How to customize color in pie chart of NVD3

问题描述

我想使用NVD3 http://nvd3.org/livecode/#codemirrorNav 饼图。但我想改变默认颜色。如何更改颜色。

解决方案

要使用自己的颜色，你必须覆盖现有的颜色，我不喜欢

pre> 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']）
  

希望这有助于。

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it.

解决方案

To use your own colours you will have to override the existing colours, I prefer not to tinker around with the original code.

So this is what I did.

    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;
    });

All I did was add .color(d3.scale.myColors().range())

UPDATE :

Check answer by Christopher Chiche, for the perfect solution.

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

Hope this helps.

这篇关于如何在NVD3的饼图中自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！