API - 笛卡尔坐标系组件 - XAxis - 《Recharts 开发者手册》

XAxis

XAxis

父组件

子组件

<Label />

Properties

hide Boolean

是否隐藏 x 轴。

默认值：false

dataKey String | Number optional

指定展示的数据维度。

xAxisId String | Number

x 轴的唯一 id。

默认值：0

width Number

x 轴的宽度，一般在图表内部计算。

默认值：0

height Number

x 轴的高度，这个可以根据需要进行配置。

默认值：30

orientation 'bottom' , 'top'

x 轴的位置。

默认值：'bottom'

type 'number' | 'category'

x 轴的类型：数值轴、类目轴。

默认值：'category'

allowDecimals Boolean

是否允许小数类型的刻度。

默认值：true

allowDataOverflow Boolean

当轴是数值轴时，指定轴的定义域（domain）的时候，如果 allowDataOverflow 的值为 false，我们会根据数据的最大值和最小值来调整 domain，确保所有的数据能够展示。如果 allowDataOverflow 的值为 true，不会调整 domain ，而是将相应的图形元素会直接裁剪掉。

默认值：false

allowDuplicatedCategory Boolean

是否允许类目轴有重复的类目。

默认值：true

tickCount Number

刻度数。如果'type'是'category'，则不使用。

默认值：5

domain Array optional

当 x 轴是数值轴时，通过这个配置可以指定 x 轴刻度函数的定义域。这个配置是一个二元数组，数组中的元素可以是一个数值，"auto", "dataMin", "dataMax" 或者类似于"dataMin - 100", "dataMax + 200"这样的字符串。如果任意元素的取值为"auto"，我们会生成可读性高的刻度，并且保证设置的刻度数。

默认值：[0, 'auto']

格式：

<XAxis type="number" domain={['dataMin', 'dataMax']} />
<XAxis type="number" domain={[0, 'dataMax']} />
<XAxis type="number" domain={['auto', 'auto']} />
<XAxis type="number" domain={[0, 'dataMax + 1000']} />
<XAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
<XAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin) ) , dataMax => (dataMax * 2) ]} />

示例：

Numeric XAxis with specified domain

interval "preserveStart" | "preserveEnd" | "preserveStartEnd" | Number

当值为0时，所有的刻度都会展示。如果值为1，则会间隔1个刻度来展示相应的刻度。当值为 "preserveStart" 时，根据刻度的宽度自动计算间隔，在有足够的空间的情况下，会从头部的刻度开始计算。当值为 "preserveEnd" 时，会从尾部的刻度开始计算是否展示。当值为"preserveStartEnd"，会从头部、尾部的刻度开始计算向中间计算是否展示。

默认值：'preserveEnd'

示例：

the meaning of different interval

padding Object

指定内边距。

默认值：{ left: 0, right: 0 }

格式：

<XAxis padding={{ left: 10 }} />
<XAxis padding={{ right: 20 }} />
<XAxis padding={{ left: 20, right: 20 }} />

示例：

XAxis with non-zero padding

minTickGap Number

两个刻度之前最小间隔宽度。

默认值：5

axisLine Boolean | Object

轴线配置。当值为 false 时，不绘制轴线。当值为对象类型时，会把这个对象解析成轴线的属性配置。

默认值：true

tickLine Boolean | Object

刻度线配置。当值为 false 时，不绘制刻度线。当值为对象类型时，会把这个对象解析成刻度线的属性配置。

默认值：true

tickSize Number

刻度线的长度。

默认值：6

tickFormatter Function optional

刻度的格式化函数。

ticks Array optional

指定需要展示的刻度。

tick Boolean | Object | ReactElement optional

刻度配置。当值为 false 时，不绘制刻度。当值为对象类型时，会把这个对象解析成刻度的属性配置。当值为 React element，会克隆这个元素来渲染刻度。

格式：

<XAxis tick={false} />
<XAxis tick={{stroke: 'red', strokeWidth: 2}} />
<XAxis tick={<CustomizedTick />} />

示例：

A line chart with customized x-axis tick

mirror Boolean

如果值为 true , 将刻度展示在轴的内侧，而不是外侧。

默认值：false

reversed Boolean

是否反转刻度的顺序

默认值：false

label String | Number | ReactElement | Object optional

当值为简单类型的数值或者字符串时，这个值会被渲染成文字标签。当值为 React element，会克隆这个元素来渲染文字标签。如果一个对象，该选项是一个新的Label实例的道具。

格式：

<XAxis label="Height" />
<XAxis label={<CustomizedLabel />} />
<XAxis label={{ value: "XAxis Label" }} />

示例：

A composed chart with axis labels

scale 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function

当值为 "auto" 时，会根据图表类型来生成 scale 函数，也可以传入自定义的函数作为 scale 函数。

默认值：auto

格式：

<XAxis scale="log" />
import { scaleLog } from 'd3-scale';
const scale = scaleLog() .base(Math.E) ;
...
  <XAxis scale={scale} />
...

unit String | Number optional

x 轴展示数据的单位。这个单位会展示在 Tooltip 的数值后面。

name String | Number optional

x 轴展示数据的名称。这个单位会展示在 Tooltip 内容中。

onClick Function optional

刻度 click 事件的回调函数。

onMouseDown Function optional

刻度 mousedown 事件的回调函数。

onMouseUp Function optional

刻度 mouseup 事件的回调函数。

onMouseMove Function optional

刻度 mousemove 事件的回调函数。

onMouseOver Function optional

刻度 mouseover 事件的回调函数。

onMouseOut Function optional

刻度 mouseout 事件的回调函数。

onMouseEnter Function optional

刻度 moustenter 事件的回调函数。

onMouseLeave Function optional

刻度 mouseleave 事件的回调函数。

tickMargin Number optional

刻度线和刻度之间的间隔。