我正在尝试将图表添加到项目中。数据集由数组中的数据填充,该数组的长度取决于我获取的数据。我希望条形图始终保持相同的高度,但项目越多,条形图就越大……
这是我现在使用的代码。
/* eslint-disable max-statements */
import {HorizontalBar} from 'react-chartjs-2';
const HorizontalLogChart = ({spamDetails}) => {
const spamDetailsArray = Object.entries(spamDetails).map(([key, value]) => ({label: key, values: parseFloat(value, 10)})).filter((item) => item.values > 0.1 || item.values < -0.1);
const spamDetailsValue = spamDetailsArray.map((item) => item.values);
const spamDetailsKey = spamDetailsArray.map((item) => item.label);
const smallResults = Object.entries(spamDetails).map(([key, number]) => ({label: key, values: parseFloat(number, 10)})).filter((item) => item.values < 0.1 && item.values > -0.1);
const smallResultsTotal = smallResults.map((item) => item.values).reduce((acc, currentValue) => acc + currentValue).toFixed(3);
spamDetailsKey.push('OTHERS');
const smallResultsValue = smallResults.map((item) => item.values);
const smallResultsKey = smallResults.map((item) => item.label);
const bgColor = spamDetailsValue.length === 0 ? smallResultsValue.map((item) => (item > 0 ? 'rgba(255, 107, 107)' : 'rgba(151, 208, 173)')) : spamDetailsValue.map((item) => (item > 0 ? 'rgba(255, 107, 107)' : 'rgba(151, 208, 173)'));
bgColor[bgColor.length] = parseFloat(smallResultsTotal, 10) > 0 ? 'rgba(255, 195, 183)' : 'rgba(200,232,209)';
if (parseFloat(smallResultsTotal, 10) > 0.5) {
spamDetailsValue.push(parseFloat(smallResultsTotal, 10));
} else if (parseFloat(smallResultsTotal, 10) < -0.5) {
spamDetailsValue.push(parseFloat(smallResultsTotal, 10));
} else if (parseFloat(smallResultsTotal, 10) >= 0 && parseFloat(smallResultsTotal, 10) < 0.5) {
spamDetailsValue.push(0.5);
} else if (parseFloat(smallResultsTotal, 10) <= 0 && parseFloat(smallResultsTotal, 10) > -0.5) {
spamDetailsValue.push(-0.5);
}
const yAxesScaleOptions = [
{
barPercentage: 0.7,
categoryPercentage: 1,
},
];
const data = {
labels: spamDetailsKey.length <= 1 ? smallResultsKey : spamDetailsKey,
datasets: [
{
data: spamDetailsValue.length <= 1 ? smallResultsValue : spamDetailsValue,
label: 'Notes',
backgroundColor: bgColor,
// barThickness: 10,
},
],
};
const options = {
layout: {
padding: {
bottom: 5 * smallResults.length,
},
},
displayColors: false,
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
},
}],
yAxes: yAxesScaleOptions,
},
tooltips: {
displayColors: false,
yAlign: 'center',
bodyFontSize: 11,
titleFontSize: 10,
callbacks: {
title: (tooltipItem) => {
if (tooltipItem[0].yLabel === 'OTHERS') {
return smallResults.map((item) => item.label);
}
return tooltipItem[0].yLabel;
},
label: (tooltipItem) => {
if (tooltipItem.yLabel === 'OTHERS') {
return `Note globale: ${smallResultsTotal}`;
}
return `Note: ${tooltipItem.xLabel}`;
},
},
},
legend: {
display: false,
},
maintainAspectRatio: false,
};
return (
<div className="pb-1" style={{height: data.labels.length > 2 ? `${data.labels.length * 47}px` : '130px', maxHeight: '600px', display: 'flex'}}>
<HorizontalBar options={options} data={data} height="100%" />
</div>
);
};
export default HorizontalLogChart;
我试着根据数组的长度给它一个大小,但它似乎不起作用...
我限制了图表的大小,但这不是理想的解决方案,因为它有时会挤压图表。
enter image description here
enter image description here
1条答案
按热度按时间jm81lzqq1#
添加剂浓度比:真
官方文件
https://www.chartjs.org/docs/latest/configuration/responsive.html