XAxis

Properties

• hideBoolean

  是否隐藏 x 轴。

  默认值：false

• dataKeyString | Number | Functionoptional

  指定展示的数据维度。

• xAxisIdString | Number

  x 轴的唯一 id。

  默认值：0

• widthNumber

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

• heightNumber

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

  默认值：30

• orientation'bottom' , 'top'

  x 轴的位置。

  默认值："bottom"

• type'number' | 'category'

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

  默认值："category"

• allowDecimalsBoolean

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

  默认值：true

• allowDataOverflowBoolean

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

  默认值：false

  格式：

  <XAxis type="number" domain={[0, 100]} allowDataOverflow />

• allowDuplicatedCategoryBoolean

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

  默认值：true

• angleNumber

  轴刻度的角度。

  默认值：0

• tickCountNumber

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

  默认值：5

• domainArray | Functionoptional

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

  格式：

  <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)]} />
  <XAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
  <XAxis type="number" domain={[0, 100]} allowDataOverflow />

  示例：

  • Numeric XAxis with specified domain

• includeHiddenBooleanoptional

  确保图表中的所有数据点都有助于其域计算，即使它们被隐藏时也是如此

  默认值：false

  格式：

  <XAxis type="number" includeHidden />

• interval"preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart" | Number

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

  默认值："preserveEnd"

  示例：

  • the meaning of different intervals

• paddingObject | "gap" | "no-gap"

  指定内边距。

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

  格式：

  <XAxis padding={{ left: 10 }} />
  <XAxis padding={{ right: 20 }} />
  <XAxis padding={{ left: 20, right: 20 }} />
  <XAxis padding="gap"
  <XAxis padding="no-gap"

  示例：

  • XAxis with non-zero padding

• minTickGapNumber

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

  默认值：5

• axisLineBoolean | Object

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

  默认值：true

• tickLineBoolean | Object

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

  默认值：true

• tickSizeNumber

  刻度线的长度。

  默认值：6

• tickFormatterFunctionoptional

  刻度的格式化函数。

• ticksArrayoptional

  指定需要展示的刻度。

• tickBoolean | Object | ReactElementoptional

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

  默认值：true

  格式：

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

  示例：

  • A line chart with customized x-axis tick

• mirrorBoolean

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

  默认值：false

• reversedBoolean

  是否反转刻度的顺序

  默认值：false

• labelString | Number | ReactElement | Objectoptional

  当值为简单类型的数值或者字符串时，这个值会被渲染成文字标签。当值为 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} />
  ...
  

• unitString | Numberoptional

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

• nameString | Numberoptional

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

• onClickFunctionoptional

  刻度 click 事件的回调函数。

• onMouseDownFunctionoptional

  刻度 mousedown 事件的回调函数。

• onMouseUpFunctionoptional

  刻度 mouseup 事件的回调函数。

• onMouseMoveFunctionoptional

  刻度 mousemove 事件的回调函数。

• onMouseOverFunctionoptional

  刻度 mouseover 事件的回调函数。

• onMouseOutFunctionoptional

  刻度 mouseout 事件的回调函数。

• onMouseEnterFunctionoptional

  刻度 mouseenter 事件的回调函数。

• onMouseLeaveFunctionoptional

  刻度 mouseleave 事件的回调函数。

• tickMarginNumberoptional

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