colors - 如何在 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;
});

我用你的代码笔来展示完整的例子。

在这里，您可以阅读有关 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;
});

这是最终结果的另一个代码笔。

结果如下所示：