如何解决两个图表的 Flex 框溢出屏幕
我的页面上有两个图表。它们一起通过 isCleanup
(一个 css flexBox)占据整个屏幕高度。第一个图表可通过 Flex
折叠。
我们如何让第一个图表填满屏幕高度的 30%,第二个图表填满剩余的约 70%?
Accordion
但是,如果我将行和列弹性框组合在一起,则不起作用。第二个图表溢出了屏幕的高度。
这是一个截图:
解决方法
图表高度在页面呈现时计算,因此在切换顶部图表底部图表高度后不会重新计算。您需要采取变通方法来触发事件以重新计算第二个图表的高度。您可以使用 onChange
的 <Accordion>
事件来切换状态并将您的第二个图表包装到 <Box>
中,高度为 100vh
或 70vh
基于状态变化。>
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";
import { ChakraProvider } from "@chakra-ui/react";
import BasicLineSeries from "./BasicLineSeries";
import {
Box,Accordion,AccordionButton,AccordionItem,AccordionIcon,AccordionPanel,Flex,Text
} from "@chakra-ui/react";
const ThreeDataPoint = () => (
<BasicLineSeries
data={[
{
close: 120,open: 120,high: 140,low: 100,date: new Date(2020,7,8,10,0),volume: 1_000_000
},{
close: 140,high: 150,1,{
close: 120,2,volume: 1_000_000
}
]}
/>
);
const Test = () => {
const [expended,onExpend] = React.useState(false);
return (
<ChakraProvider>
<>
<Flex direction="column" height="100vh">
<Flex flex="1" direction="row">
<div>123456789010</div>
<Flex flex="1" direction="column">
<Accordion
allowToggle
onChange={(e) => {
if (e === 0) {
onExpend(true);
} else {
onExpend(false);
}
}}
>
<AccordionItem>
<h2>
<AccordionButton
h={0}
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<Box flex={expended ? 2 : 3}>
<ThreeDataPoint />
</Box>
</Flex>
</Flex>
</Flex>
</>
</ChakraProvider>
);
};
const rootElement = document.getElementById("root");
render(<Test />,rootElement);
,
我对您的代码进行了一些更改,试图取得令人满意的结果,使两个图表都保持在 100vh
最大高度并避免滚动。
第二个图表的高度将是自动的,根据第一个图表是否折叠填充尽可能多的可用空间。
下面是我在你的 style.css 文件中添加的一些样式(就在你的 .test
类下):
.flex-wrapper {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: max-content auto;
gap: 15px;
padding: 15px;
max-height: 100%;
width: 100%;
}
.accordion-box-container {
display: grid !important;
grid-template-rows: min-content auto;
gap: 15px;
overflow-y: hidden;
width: 100%;
}
.accordion-wrapper {
height: 100%;
}
.accordion-title {
display: flex;
align-items: center;
padding: 5px 0;
height: auto;
}
.accordion-button {
width: min-content !important;
margin-left: 5px;
}
.graph-wrapper {
height: 100%;
}
.graph-wrapper div {
height: 100% !important;
}
与此同时,我从 index.tsx
中的 jsx 中删除了一些引导程序类,并将上面的 css 类添加到相应的组件中:
render(
<ChakraProvider>
<>
<Flex direction="column" height="100vh" className="flex-wrapper">
<div>123456789010</div>
<Flex>
<Box className="accordion-box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
</>
</ChakraProvider>,rootElement
);
最后,我不得不取消您在 BasicLineSeries.tsx
中的大小限制,这会强制两个图表的最小高度,从而无法在渲染后调整它们的高度(仅更改了导出语句):
export default withSize()(
withDeviceRatio()(BasicLineSeries)
);
请尝试自行测试,并告诉我这是否满足您的要求。如果还需要其他东西,请发表评论,我会尽力相应地调整我的解决方案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。