Как условно установить цвета и сделать градиент для секторов круговой диаграммы в amCharts v4?

Question

РЕДАКТИРОВАТЬ : Здесь - это кодовое перо.

---

Есть две основные цели:

1. Установить разные цветадля срезов на основе определенных условий.
2. Сделать цвета градиентными, основываясь на amount.

---

Дополнительная информация:

1.Установите разные цвета для срезов в зависимости от конкретных условий.

РЕДАКТИРОВАТЬ : Как показано в коде пера , мне удалось найти решениедля этого, но я не знаю, насколько это хорошо.

Я хочу установить разные цвета для срезов на основе конкретных условий, то есть определенного типа и порядка.

Например:

if (ordering < 9999)                            => green
if (ordering >= 9999 && type === 'can-be-sold') => orange
if (type !== 'can-be-sold')                     => red

2) Сделать цвета градиентными, исходя из количества.

Пример:

Есть 10предметы зеленого цвета, каждый с разным количеством.Срезы с наибольшим количеством должны иметь цвет в более темном оттенке, тогда как срезы с наименьшим количеством должны иметь цвет в самом светлом оттенке.

---

Я получаю данные через ajax:

 $.ajax({
            'url': '{$dataStockUrl}',
        }).done(function(data) {
            chart.data = data;
    });

Данные, полученные от $dataStockUrl, имеют формат:

[{
  "shop": "Lorem", 
  "type": "can-be-sold",
  "amount": "23",
  "ordering":"0"
},
{
  "shop": "Ipsum", 
  "type": "can-not-be-sold",
  "amount": "1",
  "ordering":"9999"
},
....etc....
]

Answer 1

Для этого следует использовать адаптер :

pieSeries.slices.template.adapter.add('fill', (value, target, key) => {
    if (!target.dataItem || !target.dataItem.dataContext) {
        return value;
    }
    if (target.dataItem.dataContext.ordering < 9999) {
        return am4core.color('rgba(121, 153, 0, 1)');
    }
    if (target.dataItem.dataContext.ordering >= 9999 && target.dataItem.dataContext.type === 'can-be-sold') {
        return am4core.color('rgba(255, 165, 0, 1)');
    }
    if (target.dataItem.dataContext.type !== 'can-be-sold') {
        return am4core.color('rgba(255, 0, 0, 1)');
    }
    return value;
});

I разветвил кодовое перо , чтобы показать полный пример.

Здесь вы можете узнать больше о цветах и ​​градиентах в amcharts4.Вы можете использовать .lighten() или .brighten() для цвета, основываясь на значении amount:

pieSeries.slices.template.adapter.add('fill', (value, target, key) => {
    if (!target.dataItem || !target.dataItem.dataContext) {
        return value;
    }
    let color;
    if (target.dataItem.dataContext.ordering < 9999) {
        color = am4core.color('rgba(121, 153, 0, 1)');
    }
    if (target.dataItem.dataContext.ordering >= 9999 && target.dataItem.dataContext.type === 'can-be-sold') {
        color = am4core.color('rgba(255, 165, 0, 1)');
    }
    if (target.dataItem.dataContext.type !== 'can-be-sold') {
        color = am4core.color('rgba(255, 0, 0, 1)');
    }
    if (!color) {
        return value;        
    }
    if (minAmount !== undefined && maxAmount !== undefined) {
        const percent = target.dataItem.dataContext.amount / (maxAmount - minAmount);
        color = color.brighten(percent - 0.5);
    }
    return color;
});

Здесь - это другое кодовое перо для конечного результата.

Результат выглядит следующим образом: