Recharts 分组 x 轴标签

Question

我有一个要求，我需要显示 1,2 作为一个组和 2,3 作为一个单独的组之间的值。我正在尝试自定义 x 轴，但它不起作用

在上图中，我需要同时显示第 3 条和第 3.5 条以及它们之间的最小间隙，同时还要同时显示第 4 条和第 4.5 条

这是我的代码

 <ResponsiveContainer width="100%" height="100%">
        <ComposedChart
          width={500}
          height={400}
          data={data}
        >
          <CartesianGrid horizontal={false} strokeDasharray="4 4" />
          <XAxis scale="point" dataKey="label" />
          <YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} />
          <Tooltip />
          <Bar dataKey="count" barSize={40} fill="#AAE5F9" />
          <Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
          
        </ComposedChart>
      </ResponsiveContainer>

如有帮助将不胜感激

Answer 1

我假设您的数据如下所示：

const data = [
  {label: "0", count: 0},
  {label: "1", count: null},
  {label: "2", count: 1},
  {label: "3", count: 1},
  {label: "3.5", count: 1},
  {label: "4", count: 2},
  {label: "4.5", count: 1},
  {label: "5", count: 0},
];

它们必须转换为以下形式：

const data = [
  {label: "0", countA: 0, countB: null},
  {label: "1", countA: null, countB: null},
  {label: "2", countA: 1, countB: null},
  {label: "3-3.5", countA: 1, countB: 1},
  {label: "4-4.5", countA: 2, countB: 1},
  {label: "5", countA: 0, countB: 0},
];

第一种方法

添加另一个 Bar 组件以显示组中的值。

export default function App() {
  return (
    // <ResponsiveContainer width="100%" height="100%">
      <ComposedChart
          width={500}
          height={400}
          data={data}
        >
          <CartesianGrid horizontal={false} strokeDasharray="4 4" />
          <XAxis scale="point" dataKey="label" />
          <YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} />
          <Tooltip />
          <Bar dataKey="countA" barSize={20} fill="#AAE5F9" />
          <Bar dataKey="countB" barSize={20} fill="#79B473" />
          <Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="countA" stroke="#3080ED" />
        </ComposedChart>
        // </ResponsiveContainer>  
        );
}

结果：

第二种方法

如果无论组中有多少元素，你都希望组中的列宽度相同，那么你可以自己为组绘制矩形。

const getPath = (x, y, width, height, uv, pv) => {
  const height1= pv?(height/uv)*pv:height;
  return `M${x},${y}
  v${height} 
  h${width}
  v${-height1} 
  h${-width/2}
  v${(height1-height)} 
  h${-width/2}
  Z`;
};

const MultiBar: FunctionComponent = (props) => {
  const { fill, x, y, width, height, countA, countB } = props;
  return <path d={getPath(x, y, width, height, countA, countB)} stroke="none" fill={fill} />;
};

export default function App() {
  return (
    <ComposedChart
      width={500}
      height={400}
      data={data}
    >
      <CartesianGrid horizontal={false} strokeDasharray="4 4" />
      <XAxis dataKey="label" />
      <YAxis type="number" domain={[0, 2]} label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} />
      <Bar
        dataKey="countA"
        fill="#AAE5F9"
        shape={<MultiBar />}
      >
      </Bar>
      <Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="countA" stroke="#3080ED" />
    </ComposedChart>
  );
}

结果：

getPath 函数 returns 用于绘制图表每个柱状图的 SVG 元素的路径。如果需要，您可以添加描边或在组中的条之间留出间隙。

此外，您需要通过所有 countA 和 countB 值中的最大值来设置 Y 轴的域：

<YAxis type="number" domain={[0, 2]} ... />

Recharts 分组 x 轴标签

Recharts grouping x-axis Labels

reactjs

recharts

第一种方法

第二种方法