如何防止在React Recharts中破坏轴的长标签？

import React from 'react';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

const data = [
  { name: 'Long Category Name 1', value: 400 },
  { name: 'Long Category Name 2', value: 300 },
  { name: 'Long Category Name 3', value: 200 },
  // ... more data
];

const App = () => (
  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" angle={-45} />
    <YAxis />
    <Bar dataKey="value" fill="#8884d8" />
  </BarChart>
);

export default App;

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { name: 'Long Category Name 1', value: 400 },
  { name: 'Long Category Name 2', value: 300 },
  { name: 'Long Category Name 3', value: 200 },
  // ... more data
];

const App = () => (
  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Bar dataKey="value" fill="#8884d8" />
  </BarChart>
);

export default App;

import React from 'react';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

const data = [
  { name: 'Long Category Name 1', value: 400 },
  { name: 'Long Category Name 2', value: 300 },
  { name: 'Long Category Name 3', value: 200 },
  // ... more data
];

const CustomizedAxisTick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
        {payload.value.substring(0, 10) + '...'}
      </text>
    </g>
  );
};

const App = () => (
  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" tick={<CustomizedAxisTick />} />
    <YAxis />
    <Bar dataKey="value" fill="#8884d8" />
  </BarChart>
);

export default App;

import React from 'react';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

const data = [
  { name: 'Long Category Name 1', value: 400 },
  { name: 'Long Category Name 2', value: 300 },
  { name: 'Long Category Name 3', value: 200 },
  // ... more data
];

const App = () => (
  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" interval={1} />
    <YAxis />
    <Bar dataKey="value" fill="#8884d8" />
  </BarChart>
);

export default App;