javascript - 在 ReactChartJS 中调整条形图的大小

Question

我一直在尝试使用这个库来创建一个带有反应的动态图表：

https://www.npmjs.com/package/@reactchartjs/react-chart.js

我正在构建一个水平条形图，但我不明白如何减少行的高度，这就是我现在得到的：

行非常大并且占用大量空间，我尝试了不同的选项，但我无法弄清楚。

这是组件的代码：

/* eslint-disable react/prop-types */
import React from 'react';
import { HorizontalBar } from '@reactchartjs/react-chart.js';

const Graph = ({
  arrayData,
}) => {
  const data = {
    labels: arrayData.map((obj) => obj[Object.keys(obj)[0]]),
    datasets: [
      {
        label: 'Senders',
        data: arrayData.map((obj) => obj[Object.keys(obj)[1]]),
        backgroundColor: 'rgb(213, 232, 255)',
        borderColor: 'rgb(3, 120, 204)',
        borderWidth: 1,
      },
    ],
  };

  const yAxesScaleOptions = [
    {
      barPercentage: 0.9,
      categoryPercentage: 0.8,
    },
  ];

  const options = {
    responsive: true,
    maintainAspectRatio: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: yAxesScaleOptions,
    },
  };

  return (
    <HorizontalBar data={data} options={options} />
  );
};

export default Graph;

CSS 父 div：

export const TabPanels = styled.div`
  border: 1px solid ${colorPalette.grey.medium};
  padding: 10px 5px;
  margin-top: -1px;
  width: 100%;
  position: relative;
`;

也许有一个道具，但我在文档中找不到

标签： javascriptreactjschart.js

Answer 1

1. 创建一个包含这两个属性的变量：

   const yAxesScaleOptions = [
       {
         barPercentage: 0.9,
         categoryPercentage: 0.8
       }
    ]
   
   

2. 在你options做的：

const options = {
  responsive: true,
  maintainAspectRatio: true,
  scales: {
    xAxes: [{
      stacked: true,
    }],
    yAxes: yAxesScaleOptions <-- This
  },
};