0

我正在使用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>
)}

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

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

4

1 回答 1

1

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

<XAxis interval={0} name="city" dataKey="format" tick={<CustomTick />}/>
于 2017-08-30T12:18:02.080 回答