X 轴上显示的刻度数

Question

我正在使用 Recharts.js 为我的网站创建图表。

我有一些用于 X 轴的自定义刻度，但在呈现图表时实际上只显示了其中的几个。

我搜索了文档，但无法弄清楚是什么控制显示的刻度数。

这是我的 XAxis 代码：

 <XAxis name="city" dataKey="format" tick={<CustomTick/>}/>

这里是自定义标记的代码：

const CustomTick = (props) =>{

return(
    <g transform={`translate(${props.x},${props.y})`}>
        <text textAnchor="end" fontSize={12} transform="rotate(-90)" >{props.payload.value}</text>
    </g>
)}

它会产生类似这样的结果，其中只显示几个刻度： Chart

有谁知道 Recharts.js 中控制渲染刻度数的值是什么？

Answer 1

我发现间隔属性控制渲染的刻度数。将其设置为 0 显示全部：像这样：

<XAxis interval={0} name="city" dataKey="format" tick={<CustomTick />}/>

X 轴上显示的刻度数

Number of Ticks shown on Xaxis

d3.js

recharts