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

问题描述

我正在尝试使用 NVD3 http://nvd3.org/livecode/#codemirrorNav 饼图.但我想更改默认颜色.我如何改变颜色.我做不到.

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.

这就是我所做的.

    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())

更新:

查看 Christopher Chiche 的回答，以获得完美的解决方案.

Check answer by Christopher Chiche, for the perfect solution.

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

希望这会有所帮助.

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