两个图表的 Flex 框溢出屏幕

问题描述

我的页面上有两个图表。它们一起通过 isCleanup（一个 css flexBox）占据整个屏幕高度。第一个图表可通过 Flex 折叠。

我们如何让第一个图表填满屏幕高度的 30%，第二个图表填满剩余的约 70%？

当这两个图表是页面上唯一的内容时，我能够成功地做到这一点：

Accordion

但是，如果我将行和列弹性框组合在一起，则不起作用。第二个图表溢出了屏幕的高度。

Here's the CODESANDBOX

这是一个截图：

解决方法

图表高度在页面呈现时计算，因此在切换顶部图表底部图表高度后不会重新计算。您需要采取变通方法来触发事件以重新计算第二个图表的高度。您可以使用 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)
);

请尝试自行测试，并告诉我这是否满足您的要求。如果还需要其他东西，请发表评论，我会尽力相应地调整我的解决方案。