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

Question

编辑：Here是码笔。

有两个主要目标：

根据具体情况为切片设置不同的颜色。
根据amount.

更多信息：

1.根据具体情况设置不同的切片颜色。

编辑：如code pen所示，我设法找到了解决方案，但我不知道它有多好是.

我想根据特定条件为切片设置不同的颜色，即特定 'type' & 'ordering'。

例如：

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 中的饼图切片进行渐变？

How to conditionally set colors and make gradient to pie chart slices in amCharts v4?

colors

amcharts

amcharts4