Ant design 提供了自定义坐标轴刻度的方式,可通过设置 tickCount 和 ticks 属性来实现。其中,tickCount 表示刻度数量,ticks 表示刻度的具体数值。
我们可以使用 ticks 属性将 x 轴刻度设置为等间距的数组,并根据实际数据计算出每个刻度之间的距离。具体代码示例如下:
import React from 'react';
import { BarChart } from 'recharts';
const data = [
{ name: 'Page A', uv: 4000 },
{ name: 'Page B', uv: 3000 },
{ name: 'Page C', uv: 2000 },
{ name: 'Page D', uv: 5000 },
{ name: 'Page E', uv: 1000 },
{ name: 'Page F', uv: 3000 },
{ name: 'Page G', uv: 2000 },
];
const tickCount = 7; // 设置刻度数量
const xValues = data.map((item) => item.uv); // 获取 x 轴数据
const xMin = Math.min(...xValues); // 获取 x 轴数据最小值
const xMax = Math.max(...xValues); // 获取 x 轴数据最大值
const stepDistance = (xMax - xMin) / (tickCount - 1); // 计算刻度间距
const ticks = Array.from({ length: tickCount }, (v, i) => xMin + stepDistance * i); // 计算刻度
const CustomBarChart = () => {
return (
//...
);
};
export default CustomBarChart;