如何向我的 MUI X 折线图区域添加线性渐变颜色？

Question

这是我的线性渐变
填充：线性渐变(180deg, rgba(47, 76, 221, 0.40) 16.8%, rgba(47, 76, 221, 0.00) 100%);
填充：线性渐变(180deg, rgba(181, 25, 236, 0.40) -2.55%, rgba(181, 25, 236, 0.00) 100%);

这是我的代码

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490, 6490, 5321, 1321];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300, 10000, 1000, 7500];
const xLabels = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
];


const RevenueChart = () => {
    return (
        <LineChart
            margin={{ top: 100 }}
            width={550}
            height={350}
            grid={true}
            series={[
                { data: pData, label: 'Income', area: 'true' },
                { data: uData, label: 'Expense', area: 'true' },
            ]}
            xAxis={[{ scaleType: 'point', data: xLabels }]}
            slotProps={{
                legend: {
                    direction: 'row',
                    position: { vertical: 'top', horizontal: 'left' },
                    itemGap: 62,
                },
            }}




        />
    )
}


export default RevenueChart

Answer 1

这是我找到的答案

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';
import { useDrawingArea } from '@mui/x-charts/hooks';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490, 6490, 5321, 1321];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300, 10000, 1000, 7500];
const xLabels = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
];

导入依赖项后，我定义了一个名为 Colorswitch 的组件。我使用这个组件创建了线性渐变，以便在折线图区域 SVG 元素中使用。

const Colorswitch = () => {
    const { top, height, bottom } = useDrawingArea();
    const svgHeight = top + bottom + height;

    return (
        <>
            <defs>
                <linearGradient id="paint0_linear_45_2" x1="300.25" y1="46.9999" x2="300.25" y2={`${svgHeight}px`} gradientUnits="userSpaceOnUse">
                    <stop stop-color="#2F4CDD" stop-opacity="0.4" />
                    <stop offset="1" stop-color="#2F4CDD" stop-opacity="0" />
                </linearGradient>
            </defs>

            <defs>
                <linearGradient id="paint0_linear_45_3" x1="299.498" y1="-4.28272" x2="299.498" y2={`${svgHeight}px`} gradientUnits="userSpaceOnUse">
                    <stop stop-color="#B519EC" stop-opacity="0.4" />
                    <stop offset="1" stop-color="#B519EC" stop-opacity="0" />
                </linearGradient>
            </defs>
        </>
    )
}

然后我作为 的孩子传递了它。并使用 sx 传递我的 LinearGradients 的 id。

const RevenueChart = () => {
    return (
        <LineChart
            margin={{ top: 100 }}
            width={550}
            height={350}
            grid={true}
            colors={['#2F4CDD', '#B519EC']}
            series={[
                { data: pData, label: 'Income', area: 'true' },
                { data: uData, label: 'Expense', area: 'true' },
            ]}
            xAxis={[{ scaleType: 'point', data: xLabels }]}
            slotProps={{
                legend: {
                    direction: 'row',
                    position: { vertical: 'top', horizontal: 'left' },
                    itemGap: 62,
                },
            }}
{/* Found the class of each one of my line charts and passed the id of my specific linear gradient to it  */}
            sx={{
                '.css-j6h5qe-MuiAreaElement-root': {
                    fill: 'url(#paint0_linear_45_2)',
                },
                '.css-tvglr0-MuiAreaElement-root': {
                    fill: 'url(#paint0_linear_45_3)',
                },

            }}
        >
           {/* Passed as a child */}
            <Colorswitch />

        </LineChart>
    )
}



export default RevenueChart