Question

如何设置X轴和标签之间的边距（在我的情况下＆＃39; dd.mm.yy＆＃39;？

那是我的AreaChart：

 <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>

P.S。 recharts-tag不可用！

Answer 1

1）创建CustomizedXAxisTick

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 tick：

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

Answer 2

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

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

或

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

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

Answer 3

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

Recharts：设置X轴标签边距

3 个答案: