ChakraUI中如何让ChartJS图表填充卡片剩余高度？

问题描述 #

使用ChakraUI的Card、Button、Select组件结合ChartJS实现折线图时，图表无法正确适配卡片容器。原因是组件返回的Box中包含带按钮和选择器的Flex布局，图表填充Box时会忽略Flex布局的高度占用，直接超出卡片边界。需求是让图表填充卡片的剩余高度，且卡片支持父组件调整大小，不能设置固定高度。

修复方案 #

利用ChakraUI的垂直Flex布局实现空间分配：

• 将最外层容器改为垂直方向的Flex，高度设为100%，让内部元素按垂直方向排列
• 顶部操作栏（按钮+选择器）保持原有结构，自动占用自身所需高度
• 给图表所在的Box添加flex: 1属性，使其自动填充容器剩余高度
• 保持ChartJS配置中的maintainAspectRatio: false，确保图表能自适应容器高度

修改后的代码 #

WeeklyScoreGraph.js #

const options = {
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    y: {
      max: Math.max(...score_logs.map((score_log) => score_log.new_score)) + 5,
      grid: {
        display: false,
      },
    },
    x: {
      grid: {
        display: false,
      },
    },
  },
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: "x",
        modifierKey: "ctrl",
      },
      zoom: {
        drag: {
          enabled: true,
        },
        mode: "x",
      },
    },
    legend: {
      display: false,
    },
    title: {
      display: true,
      text: "Histórico do Score",
    },
    datalabels: {
      anchor: "end",
      align: "end",
    },
  },
  segment: {
    borderColor: function (context) {
      const chart = context.chart;
      const { ctx, chartArea } = chart;

      if (!chartArea) {
        // 初始加载时的处理
        return;
      }
      return getGradient(ctx, chartArea);
    },
  },
};

return (
  // 最外层改为垂直Flex，占满父容器高度
  <Flex h="100%" w="100%" flexDir="column">
    <Flex m="10px">
      <Button onClick={handleResetZoom}>Reset Zoom</Button>
      <Spacer />
      <Select
        border="1px"
        w={{ base: "50%", md: "25%", lg: "25%" }}
        value={num_days}
        onChange={(e) => setNumDays(Number(e.target.value))}
      >
        <option value={7}>Últimos 7 dias</option>
        <option value={15}>Últimos 15 dias</option>
        <option value={30}>Últimos 30 dias</option>
        <option value={90}>Últimos 90 dias</option>
        <option value={180}>Últimos 180 dias</option>
        <option value={365}>Últimos 365 dias</option>
      </Select>
    </Flex>
    {/* 添加flex:1，让图表容器填充剩余高度 */}
    <Box flex={1} h="100%">
      <Chart ref={chartRef} type="line" options={options} data={data} />
    </Box>
  </Flex>
);

cve-dashboard.js #

确保Card容器有明确的高度约束，让内部组件能正确计算空间：

<Card key={l.i} h="100%">
  <Button w="5px" h="15px" onClick={() => onPutItem(l)}>
    &times;
  </Button>
  <Componentes data={l.component_name} /> {/* 动态调用的组件 */}
</Card>

内容的提问来源于stack exchange，提问作者Mauro Jesus