0

我正在尝试使用下图设计此 UI

在此处输入图像描述

我试图在图中实现两件事

  1. 颜色渐变
  2. 单击该行时，我希望能够显示显示单击点处的值的小框。
import React from "react";
import { AreaChart, StackedAreaChart } from "react-native-svg-charts";
import * as shape from "d3-shape";
import { string } from "yup/lib/locale";
import { LinearGradient, Stop } from "react-native-svg";

export default class StackedAreaExample extends React.PureComponent {
  render() {
    const data = [
      {
        month: new Date(2015, 0, 1),
        apples: 3840,
      },
      {
        month: new Date(2015, 1, 1),
        apples: 1600,
      },
      {
        month: new Date(2015, 2, 1),
        apples: 640,
      },
      {
        month: new Date(2015, 3, 1),
        apples: 3320,
      },
    ];

    const colors = [
      "#8800cc"
    ];
    const keys = [
      "apples"
    ];
    const svgs = [
      { onPress: () => console.log("apples") },
    ];

    return (
      <StackedAreaChart
        style={{ height: 200, paddingVertical: 16 }}
        data={data}
        keys={keys}
        colors={colors}
        curve={shape.curveNatural}
        showGrid={true}
        svgs={svgs}
        renderGradient={({ id }) => (
          <LinearGradient id={id} x1={"0%"} y1={"0%"} x2={"0%"} y2={"100%"}>
            <Stop
              offset={"0%"}
              stopColor={"rgb(134, 65, 244)"}
              stopOpacity={0.8}
            />
            <Stop
              offset={"100%"}
              stopColor={"rgb(134, 65, 244)"}
              stopOpacity={0.2}
            />
          </LinearGradient>
        )}
      />
    );
  }
}

当我尝试将线性渐变添加到 renderGradient 但出现错误时

Warning: Failed prop type: The prop `d` is marked as required in `AnimatedPath`, but its value is `null`.


Warning: Failed prop type: The prop `d` is marked as required in `Path`, but its value is `null`.

我还不知道错误是什么意思。

一个演示真的会帮助我。谢谢。

4

0 回答 0