将图表装入父容器

Question

我正在使用一个名为

tremor

的库来绘制图表。我正在尝试它的 Tab 块。我想制作一个可以放入具有指定高度的父容器的选项卡组。但是，我认为默认情况下 Tab 块不适合其父容器的大小，而是溢出。

关于如何使其尺寸灵活有什么建议吗？

我在屏幕截图中突出显示了父级包含的边框以解释我的意思。父容器设置为 400px 高度，但子容器不知何故溢出。

下面是我的代码。

    import { AreaChart, BadgeDelta, Card, Tab, TabGroup, TabList, TabPanel, TabPanels } from '@tremor/react';
import { sky } from 'tailwindcss/colors';

export default function Page() {

    const chartdata = [
        {
            date: "Jan 23",

            "This Year": 233,
            "Last Year": 289,
        },
        {
            date: "Feb 23",

            "This Year": 233,
            "Last Year": 294,
        },
        {
            date: "Mar 23",

            "This Year": 258,
            "Last Year": 309,
        },
        {
            date: "Apr 23",

            "This Year": 275,
            "Last Year": 314,
        },
        {
            date: "May 23",
            "Last Year": 334,
            // "This Year": 285,
        },
        {
            date: "Jun 23",
            "Last Year": 344,
            // "This Year": 305,
        },
        {
            date: "Jul 23",
            "Last Year": 384,
            // "This Year": 325,
        },
        // ...
        {
            date: "Oct 23",
            "Last Year": 383,
            // "This Year": 347,
        },
    ];


    return (
        <div className="mx-auto max-w-full max-h-[400px] border-8 border-red-600">
            <TabGroup>
                <TabList variant="line" defaultValue="1">
                    <Tab value="1">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                    <Tab value="2">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                    <Tab value="3">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                </TabList>

                <TabPanels>
                    <TabPanel>
                        <Card
                            decoration="left"
                            decorationColor="indigo"
                            className='mt-0 pt-0'
                        >
                            <span className="text-tremor-default text-tremor-content">
                                Title
                            </span>
                            <AreaChart

                                data={chartdata}
                                index="date"
                                categories={["This Year", "Last Year"]}
                                colors={['sky', "gray"]}
                                yAxisWidth={33}
                            />

                        </Card>
                    </TabPanel>
                </TabPanels>
            </TabGroup>
        </div>
    );

}

Answer 1

您可以通过将 className 添加到 AreaChart 组件来实现这一点。

请点击这里参考

<Card decoration="left" decorationColor="indigo" className="mt-0 pt-0">
  <span className="text-tremor-default text-tremor-content">Title</span>
    <AreaChart
        className="h-[180px]"
        data={chartdata}
        index="date"
        categories={['This Year', 'Last Year']}
        colors={['sky', 'gray']}
        yAxisWidth={33}
    />
</Card>;