如何在amCharts v4中有条件地设置颜色和对饼形图切片进行渐变？

Question

编辑：这里是一个代码笔。

有两个主要目标：

1. 根据具体情况为切片设置不同的颜色。
2. 使颜色是梯度的，基于amount。

更多信息：

1.根据特定条件为切片设置不同的颜色。

编辑：如https://codepen.io/dianastanciu/details/XLbBBx所示，我设法找到了一个解决方案，但我不知道它有多好。

我想根据特定的条件为切片设置不同的颜色，即特定的“类型”和“排序”。

例如：

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或.brighten()：

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;
});

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

结果如下：

​

​