rechart中如何使用线性渐变

Question

我必须在 React 中创建这个图表。我正在使用 rechart npm 包来这样做。但是我无法获得角半径和线性渐变。如果需要，我愿意使用任何其他库。

图片

我试过什么？我使用 rechart Pie 组件来实现这一点。这是代码

import React from 'react';
import { PieChart, Pie, Sector } from 'recharts';
import getDevice from '../../styles/devices';

const renderActiveShape = (props) => {

    const { cx, cy, startAngle, endAngle, payload, innerRadius, outerRadius, z, cornerRadius } = props;
    console.log(startAngle, endAngle)
  
    return (
        <g>
            <text x={cx} y={cy - 20} dy={8} fontSize={z ? '16px' : "24px"} textAnchor="middle" fill="#001233" fontWeight="bold">
                {/* {parseFloat(payload.value / 1000).toFixed(1)}K */}
                {payload.value < 1000 ? payload.value : `${parseFloat(payload.value / 1000).toFixed(1)}K`}
            </text>
            <text x={cx} y={cy + 5} dy={8} fontSize="12px" textAnchor="middle" fill="#5C677D">
                {payload.name}
            </text>
            <Sector
                cx={cx}
                cy={cy}
                innerRadius={innerRadius}
                outerRadius={outerRadius + 20}
                startAngle={startAngle}
                endAngle={endAngle}
                fill={"#12A4ED"}
                cornerRadius={payload.name === 'Deposit' ? cornerRadius : 0}
            />
            <Sector
                cx={cx}
                cy={cy}
                innerRadius={innerRadius - 18}
                outerRadius={innerRadius - 10}
                startAngle={startAngle}
                endAngle={endAngle}
                fill={"#7674740f"}
            />

            {/* <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
            <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" /> */}
            {/* <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value}%`}</text> */}
        </g>
    );
};

export default function Chart({ data }) {

    // const [activeIndex, setActiveIndex] = useState(1)

    // const onPieEnter = (_, index) => {
    //     setActiveIndex(index)
    // };
    const { isMobile } = getDevice()
    return (
        <PieChart width={400} height={350}>
            <Pie
                activeIndex={1}
                activeShape={renderActiveShape}
                data={data}
                cx={200}
                innerRadius={isMobile ? 60 : 80}
                outerRadius={isMobile ? 100 : 120}
                cornerRadius={isMobile ? 5 : 10}
                fill="#7DC762"
                dataKey="value"
                z={isMobile}
            >
            </Pie>
        </PieChart>
    );
}

但是我用这个得到的是

任何人都可以帮助实现这一目标吗？感谢任何帮助。

Answer 1

要为您的图表添加渐变颜色，您可以执行以下操作：

这只是一个例子：

<PieChart width={400} height={350}>
  {/* This will allow to add color based on your need, so update it accordingly  */}
  <defs>
      <linearGradient id="colorUv" x1="1" y1="1" x2="0" y2="0">
        <stop offset="30%" stopColor="#6584FF" stopOpacity={0.5} />
        <stop offset="95%" stopColor="#FFFFFF" stopOpacity={0.5} />
      </linearGradient>
    </defs>
  <Pie
    activeIndex={1}
    activeShape={renderActiveShape}
    data={data}
    cx={200}
    innerRadius={isMobile ? 60 : 80}
    outerRadius={isMobile ? 100 : 120}
    cornerRadius={isMobile ? 5 : 10}
    
    fill="url(#colorUv)"//Add the id 'colorUv' which is used in linearGradient
    dataKey="value"
    z={isMobile}
  ></Pie>
</PieChart>

rechart中如何使用线性渐变

How to use linear gradient in rechart

javascript

reactjs

graph

charts

recharts