Recharts：设置 X 轴标签边距

IT技术 reactjs charts
2021-05-13 20:27:46

如何设置 X 轴和标签之间的边距（在我的例子中是 'dd.mm.yy' ？

在此处输入图片说明

那是我的面积图：

 <AreaChart
        width={600}
        height={400}
        data={data}
        connectNulls={true}
        margin={{top: 20, left: 120, bottom: 20}}>
        <defs>
            <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#2198F3" stopOpacity={1}/>
                <stop offset="95%" stopColor="#4BABF4" stopOpacity={0.6}/>
            </linearGradient>
        </defs>
        <Area
            dot={{ stroke: '#2196f3', strokeWidth: 4, r: 7, fill: 'white'}}
            type='monotone'
            dataKey='value'
            stroke='#2196f3'
            strokeWidth='4'
            fill='url(#colorUv)'
        />
        <XAxis dataKey="name" />
        <YAxis orientation="right" />
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
    </AreaChart>

ps recharts-tag 不可用！

3个回答

尝试在 XAxid 和 YAxis 上使用 dx 和 dy 属性，如下所示：

<XAxis dataKey="name" dy={10}/>

或者

<YAxis orientation="right" dx={5}/>

根据这些值，当渲染 SVG 并计算刻度的位置时，您为 dx 设置的数量将添加到刻度项的 X 位置的正常数量。因此，在 YAxis 的情况下，这将为表示刻度的文本元素的x值添加 10值。dy也一样

1）创建自定义XAxisTick

const CustomizedXAxisTick = React.createClass({
 render () {
     const {x, y, payload} = this.props;
     return (
         <g transform={`translate(${x},${y})`}>
             <text x={-10} y={30}
                   textAnchor="start"
                   fill="#666">{payload.value}</text>
         </g>
     );
 }
});

2) 设置 XAxis 刻度：

<XAxis
    dataKey="name"
    tick={<CustomizedXAxisTick/>}
 />

从文档中，offset标签的默认值为 5。您需要将其设置为 0 或更少以使其不与刻度重叠。

其它你可能感兴趣的问题
上一篇PropTypes React Native 不是对象 下一篇React Hook Form 与 A​​ntD 样式