如何在 React Native StackedAreaChart 上应用渐变颜色？

Question

我正在使用this 库来创建StackedAreaChart。它目前正在工作，但我需要将颜色更改为渐变。此包中提供的示例仅在 AreaChart 上应用渐变。

这是我的代码

const hardCodedData = [
        {
            month: new Date(2015, 0, 1),
            apples: 3840,
            bananas: 1920,
            cherries: 960,
            dates: 400,
        },
        {
            month: new Date(2015, 1, 1),
            apples: 1600,
            bananas: 1440,
            cherries: 960,
            dates: 400,
        },
        {
            month: new Date(2015, 2, 1),
            apples: 640,
            bananas: 960,
            cherries: 3640,
            dates: 400,
        },
        {
            month: new Date(2015, 3, 1),
            apples: 3320,
            bananas: 480,
            cherries: 640,
            dates: 400,
        },
    ]

    const colors = ['#8800cc', '#aa00ff', '#cc66ff', '#eeccff']
    const keys = ['apples', 'bananas', 'cherries', 'dates']
    const svgs = [
        { onPress: () => alert('apples') },
        { onPress: () => alert('bananas') },
        { onPress: () => alert('cherries') },
        { onPress: () => alert('dates') },
    ]
<StackedAreaChart
   style={{ height: 200, paddingVertical: 16 }}
   data={hardCodedData}
   keys={keys}
   colors={colors}
   curve={shape.curveNatural}
   showGrid={false}
   svgs={svgs}
/>

您能在这方面为我提供一些帮助吗？

编辑

const Gradient = () =>
        map(data, (d, i) => {
            let key = 'gradient' + d.id;
            let color = colors[d.id];

            return (
                <Defs key={key}>
                    <LinearGradient id={key} x1={'0'} y={'0%'} x2={'0'} y2={'100%'}>
                        <Stop offset={'0%'} stopColor={color} />
                        <Stop
                            offset={'100%'}
                            stopColor={'red'}
                        />
                    </LinearGradient>
                </Defs>
            );
        });

    let fill1 = `url(#gradient${d.id})`;
    let fill2 = `url(#gradient${d.id})`;
    let fill3 = `url(#gradient${d.id})`;
    let fill4 = `url(#gradient${d.id})`;

    let gradients = [fill1, fill2, fill3, fill4]

 <StackedAreaChart
     style={{ height: 200, paddingVertical: 16 }}
     data={hardCodedData}
     keys={keys}
     colors={gradients}
     curve={shape.curveNatural}
     showGrid={false}
     svgs={svgs}
   >
     <Gradient />
   </StackedAreaChart>

Answer 1

const Gradient = () =>
map(data, (d, i) => {
  let key = 'gradient' + d.id;
  let color = Yourcolors[d.id];

  return (
    <Defs key={key}>
      <LinearGradient id={key} x1={'0'} y={'0%'} x2={'0'} y2={'100%'}>
        <Stop offset={'0%'} stopColor={color} />
        <Stop
          offset={'100%'}
          stopColor={color2}
        />
      </LinearGradient>
    </Defs>
  );
});
...

<StackedAreaChart
   style={{ height: 200, paddingVertical: 16 }}
   data={hardCodedData}
   keys={keys}
   colors={gradients}
   curve={shape.curveNatural}
   showGrid={false}
   svgs={svgs}
>
<Gradient/>
</StackedAreaChart>

在你的颜色中，只需用像

这样的渐变填充区域

let gradients = map(data, d=> {
  let fill = `url(#gradient${d.id})`;
return fill;
})

//this will generate an array of gradient defs

在您的堆叠区域中传递渐变数组而不是颜色

PS。我已经在其他图表中测试过这种类型的实现，而不是在面积图中