设置高度 100% 时，React Apexchart 未采用其父级高度

Question

我正在处理 react-apexcharts 并尝试将高度设置为图表的 100%，但它不接受其父级的高度而是显示其最小高度 445px。我无法理解即使在像这样设置高度 100% 之后发生了什么，

  chart: {
      height: "100%",
  },

这是我的完整代码

import React from "react";
import ReactApexChart from "react-apexcharts";


class ApexChart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        series: [
                {
                name: 'member',
                data: [64, 55, 21, 18, 76, 41 , 44, 14, 66, 32]
            }, {
                name: 'Partcipants',
                data: [53, 32, 42, 22, 29, 80, 16, 49, 78, 11]
            }],
            options: {
                colors: ['#519ca5', '#d5e2c0'],
                chart: {
                    height: "100%",
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        dataLabels: {
                            position: 'top',
                        },
                    }
                },
                dataLabels: {
                    enabled: true,
                    offsetX: -6,
                    style: {
                        fontSize: '12px',
                        colors: ['#fff']
                    }
                },
                stroke: {
                    show: true,
                    width: 1,
                    colors: ['#fff']
                },
                xaxis: {
                    categories: ['a','b','c','d','f','h','i','j','k','l'],
                },
                legend:{
                    position: 'right',
                    markers: {
                        width: 24,
                        height: 24,
                        strokeWidth: 0,
                        strokeColor: '#fff',
                        fillColors: undefined,
                        radius: 2,
                        customHTML: undefined,
                        onClick: undefined,
                        offsetX: 0,
                        offsetY: 0
                    },
                }
            },
        };
    }

    render() {
        return (
            <div id="chart">
                <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430}/>
            </div>
        );
    }
}

export  default  ApexChart;

import React from 'react';
import Policychart from "./components/Policychart"

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
        <div className="wrapper">
            <Policychart/>
        </div>
    </div>
  );
}

export default App;

.wrapper{
  height: 320px;
  width: 940px;
  margin: 180px auto;
  background: rgba(240, 248, 255, 0.9);
  padding: 40px;
}

.apexcharts-legend-series{
  display: flex;
  align-items: center;
  margin-top: 16px !important;
}

.apexcharts-legend-text{
  padding-left: 8px;
}

我想要的是图表的高度必须是.wrapper的高度，目前是320px，我想从这里控制它。

Answer 1

你只需要将你的ReactApexChart组件设置为100%而不是430（你可以删除options对象中的高度）然后你就可以控制图表了高度 .wrapper CSS class

<ReactApexChart ... height="100%" />

查看实时 codeSandbox 示例。

设置高度 100% 时，React Apexchart 未采用其父级高度

React Apexchart is not taking its parent height when setting height 100%

javascript

reactjs

apexcharts