当比例为点

问题描述

我正在使用 recharts 来显示复合图表。

const Chart = ({ responseAverage }) => {
  responseAverage = responseAverage.sort((a,b) => a.label - b.label);
  return (
    <ResponsiveContainer width={700} height={400}>
      <ComposedChart
        data={responseAverage}
      >
        <Cartesiangrid horizontal={false} strokeDasharray="4 4" />
        <XAxis scale="point" dataKey="label" />
        <YAxis label={{ value: 'No.Of Employees',angle: -90,position: 'insideLeft' }} tick={false} height={20} />
        {/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
        <Bar dataKey="count" barSize={40} fill="#AAE5F9" />
        <Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
        {/* <LabelList dataKey="name" position="insidetop" /> */}
      </ComposedChart>
    </ResponsiveContainer>
  );
};

在这里我指定了 barSize。但它在所有情况下都不起作用。我希望 Bar 大小根据值的数量自动计算

是否有解决此问题的方法？

任何帮助都会非常感谢

解决方法

如果要去除条形之间的间隙，则需要从barSize 中去除Bar 参数并将barCategoryGap={0} 参数添加到ComposedChart 组件中。

const Chart = ({ responseAverage }) => {
  responseAverage = responseAverage.sort((a,b) => a.label - b.label);
  return (
    <ResponsiveContainer width={700} height={400}>
      <ComposedChart
        barCategoryGap={0}
        data={responseAverage}
      >
        <CartesianGrid horizontal={false} strokeDasharray="4 4" />
        <XAxis scale="point" dataKey="label" />
        <YAxis label={{ value: 'No.Of Employees',angle: -90,position: 'insideLeft' }} tick={false} height={20} />
        {/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
        <Bar dataKey="count" fill="#AAE5F9" />
        <Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
        {/* <LabelList dataKey="name" position="insideTop" /> */}
      </ComposedChart>
    </ResponsiveContainer>
  );
};

如果结果是条形之间保留了细线，那么您可以这样做：

<Bar dataKey="count" fill="#AAE5F9" stroke="#AAE5F9" strokeWidth={2} />