Как настроить цвет в круговой диаграмме NVD3

Ответ 1

Чтобы использовать свои собственные цвета, вам придется переопределить существующие цвета, я предпочитаю не переделывать исходный код.

Так вот что я сделал.

    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 :

Отметьте ответ Кристофером Чиче для идеального решения.

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

Надеюсь, что это поможет.

Ответ 2

Если вы хотите использовать определенный цвет для пирога

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

Ответ 3

Вы можете добавлять цвета, передавая массив в параметр "color()". Поэтому просто добавьте:

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

Если вы хотите использовать эти цвета для трех элементов.

Примечание. Если у вас более трех элементов, некоторые цвета будут использоваться несколько раз.

Ответ 4

Вот записка, которая меня достала, я устанавливал chart.color внутри nv.addGraph, это неправильно работало и вместо этого использовало значения по умолчанию. Затем я установил его вне этого, и он работал нормально.

Ответ 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: {streams to push}}
• Затем при создании таблицы данных просто нажмите цвет для каждого потока:

пусть stream = {}; пусть данные = []; пусть я = 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 Data, просто добавьте новый 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
    },
     ...
];