NVD3饼图如何自定义颜色

Posted 2023-02-22

【中文标题】NVD3饼图如何自定义颜色

【英文标题】：How to customize color in pie chart of NVD3

【发布时间】：2013-04-17 23:27:52

【问题描述】：

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

【问题讨论】：

你已经尝试了什么？

【参考方案1】：

如果你想为饼图使用特定的颜色

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"
       
    ]
  
]

【讨论】：

很棒的提示，为我节省了很多时间。谢谢。

这是最好的答案，它利用了 d3 功能，因为在我的特殊情况下，颜色值存储在数据库中，所以我不能像克里斯托弗的回答那样在我的 js 文件中硬编码它们.

【参考方案2】：

您可以通过将数组传递给“color()”选项来添加颜色。所以只需添加：

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

如果您想将这些颜色用于 3 个元素。

注意：如果您有超过 3 个元素，那么某些颜色将被多次使用。

【讨论】：

我们需要在哪里添加color();？

@GOK 您需要将color() 添加到chart。所以它给了chart.color(['blue','green','red'])。

【参考方案3】：

要使用您自己的颜色，您必须覆盖现有颜色，我不喜欢修改原始代码。

所以这就是我所做的。

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

希望这会有所帮助。

【讨论】：

我正在使用这个，但我有一个问题，当我更改图表的指标并重新绘制它时（使用新颜色，我有一个基于标签计算颜色的函数），图表绘制错误的颜色。当我单击以显示/隐藏某些值时，有时会按应有的方式重绘，有时重绘错误。你知道为什么会这样吗？这只发生在饼图上。

我会尽力解释这一点，例如你有 5 个类别在加载，图表采用数组的前 5 种颜色。因此，您的 clour 1 将始终分配给数据的第一个元素。这可能不是最好的方法，但是尝试使用一个数组并将颜色映射到饼图上，这样您就可以使用 ledgend 上的 onclick 函数并获取哪些元素是活动的，哪些不是，它返回一个包含位置的数组，您可以使用它来过滤掉重绘图表时需要传递的颜色。

不不，问题是我想做其他事情，例如，我有一组数据，其中包含不同的字段。 （ip、国家等），当我显示 ip 指标（我有 4 个不同的 ip）时，我对数据进行分组，为饼图创建颜色并渲染它。当我从 ip 度量更改为国家/地区时，我再次汇总数据（我得到 10 个不同的国家/地区）我为它们创建颜色，然后重新绘制饼图，首先渲染它，它采用新颜色（这些颜色没有与 ip pie 的颜色有关），但是当我隐藏或显示 pie 的一部分时，会显示 ip pie 的颜色

我不明白您为什么要创建 d3.scale 而不是仅使用原始数组作为 colors 方法的参数。

@PauloScardine - 我同意你的观点，当我回答这个问题时，我没有太多的知识，克里斯托弗·奇切有完美的答案。我赞成他的回答。会更新我的。

【参考方案4】：

这是一个让我印象深刻的注释，我在 nv.addGraph 中设置了 chart.color，这不能正常工作，而是使用默认值。然后我把它设置在这个之外，它工作得很好。

【参考方案5】：

我使用.color(function(d) return [d.value > 0 ? 'blue' : 'red']); 让它根据数据值改变颜色。

希望这对某人有所帮助。

【参考方案6】：

这里是 Typescript 解决方案，类似于 JS 版本。假设您想要 10 种不同颜色的前 10 名结果：

这里我会给你一个适用于我的 PieChart 或 MultiBarChart 的例子

创建一个全局颜色数组，例如 colors = ["#D9D9D9", "#4B11A6", ....]; 数据必须在 Object 中格式化：myGraph key: "Title", values : 要推送的流 然后在创建数据表时，只需推送每个流的颜色：

让流 = ;让数据 = [];让 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 条件只是为了防止图中出现空块

【参考方案7】：

我使用以下概念来添加自定义颜色：

// 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
    ,
     ...
];