Question

编辑：Here是一支数字笔。

有两个主要目标：

根据具体条件为切片设置不同的颜色。
根据amount使颜色渐变。

更多信息：

1。根据具体条件为切片设置不同的颜色。

编辑：如code pen所示，我设法找到了解决方案，但我不知道它有多好。 < / p>

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

例如：

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

为此，您应该使用adapter：

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

我forked your code pen展示了完整的示例。

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

Here是最终结果的另一支代码笔。

结果如下：

如何在amCharts v4中有条件地设置颜色并为饼图切片设置渐变？

1 个答案: