我遇到了一个问题。我试图减少图表的维度(径向或蜘蛛,正如你想称之为的)。从图片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,但没有任何变化
1条答案
按热度按时间njthzxwz1#
当你想自定义大小时,总是使用
maintainAspectRatio: false
,否则它将始终默认考虑2:1的比例。