设置高度 100% 时,React Apexchart 不采用其父高度

IT技术 javascript reactjs apexcharts
2021-05-23 16:25:57

我正在努力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;
}

我想要的是图表的高度必须.wrapper320px当前的高度,我想从这里控制它。

1个回答

您只需要将ReactApexChart组件设置100%not 430(您可以删除options对象内部的高度),然后您就可以通过.wrapperCSS 类控制图表高度

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

查看实时代码沙盒示例。