如何修复水平图表中条形的大小？

Question

我正在尝试向我的项目添加图表。数据集填充了来自数组的数据，该数组具有不同的长度，具体取决于我获取的数据。我希望条形始终具有相同的高度，但是项目越多，条形就越大......

这是我现在使用的代码。

/* 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;

我尝试根据数组的长度给它一个大小，但它似乎不起作用......

我限制了图表的大小，但这不是理想的解决方案，因为它有时会挤压图表。

Answer 1

添加到选项

responsive: true

官方文档

https://www.chartjs.org/docs/latest/configuration/responsive.html