我遇到了一个问题。我试图减少图表的维度（径向或蜘蛛，正如你想称之为的）。从图片here可以看出，它占用了太多的页面空间。我想知道是否有可能将维度减少1/2。例如，从100%到50%的维度。

import { useState } from 'react';
import { Container, Row, Table, Button } from 'react-bootstrap';
import {
    Chart as ChartJS,
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend,
} from 'chart.js';
import { Radar } from 'react-chartjs-2';

ChartJS.register(
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend
);

function RadarChartPage(props) {

    const handleFilterButton = (category) => {
        if (props.selectedFilters.includes(category)) {
            let filters = props.selectedFilters.filter((el) => el !== category);
            props.setSelectedFilters(filters);
        } else {
            props.setSelectedFilters([...props.selectedFilters, category]);
        }
    };


    const data = {
        labels: ["Agile Development Teams", "CI/CD", "Embedded SW Integration", "Model Based SW Development", "SW Development", "SW Architecture Design", "AI & Machine Learning", "Signal & Data Collection", "SW Life Cycle Management", "ASPICE", "Rapid Prototyping"],
        datasets: [
            {
                label: "Software Process",
                fill: true,
                data: props.Data,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1,
            },
        ],
    };

    const options = {
        scales: {
            r: {
                angleLines: {
                    display: false
                },
                suggestedMin: 0,
                suggestedMax: 5,
                ticks: {
                    // For a category axis, the val is the index so the lookup via getLabelForValue is needed
                    callback: function (val, index) {
                        // Hide every 2nd tick label
                        return index % 2 === 0 ? this.getLabelForValue(val) : '';
                    },
                    color: 'black',
                }

            }
        },
        // Per nascondere la legenda
        plugins: {
            legend: {
                display: true,
            }
        },
        responsive: true, // Imposta la dimensione del canvas in base al suo contenitor
        maintainAspectRatio: true,
    };

    return (
        <>
            <Container>
                <div >
                    <br />
                    <br />
                    <br />
                    <br />
                    {props.Data ? (
                        <>
                            <Container style={{height: "20px"}}>
                                <Row>
                                    <div className='centered'>
                                        {props.possibleFilters.map((value, index) => (
                                            <Button key={index} className={props.selectedFilters.includes(value) ? "btns active" : "btns"}
                                                onClick={() => handleFilterButton(value)}
                                            >{value}</Button>
                                        ))}
                                    </div>
                                </Row>

                                <Row>
                                    <Radar data={data} options={options} />
                                </Row>

                            </Container>
                        </>

                    ) : (
                        <div>No File is uploaded yet!</div>
                    )}
                </div>

            </Container >
        </>
    );

字符串
可以看到，我尝试在容器上使用样式：<Container style={{height: "20px"}}>或maXHeight ecc，但没有任何变化