YAxis

父组件

子组件

Properties

是否隐藏 y 轴。

默认值:false

指定展示的数据维度。

y 轴的唯一 id。

默认值:0

y 轴的宽度,这个可以根据需要进行配置。

默认值:60

y 轴的高度,一般在图表内部计算。

默认值:0

y 轴的位置。

默认值:'left'

  • type 'number' | 'category'

y 轴的类型:数值轴、类目轴。

默认值:'number'

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

默认值:[0, 'auto']

格式:

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

示例:

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

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

默认值:'preserveEnd'

示例:

指定内边距。

默认值:{ top: 0, bottom: 0 }

格式:

  1. <YAxis padding={{ top: 10 }} />
  2. <YAxis padding={{ bottom: 20 }} />
  3. <YAxis padding={{ top: 20, bottom: 20 }} />

示例:

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

默认值:5

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

默认值:true

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

默认值:false

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

默认值:true

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

默认值:true

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

默认值:true

刻度线的长度。

默认值:6

刻度的格式化函数。

指定需要展示的刻度。

  • tick Boolean | Object | ReactElement optional

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

格式:

  1. <YAxis tick={false} />
  2. <YAxis tick={{stroke: 'red', strokeWidth: 2}} />
  3. <YAxis tick={<CustomizedTick />} />

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

默认值:false

是否反转刻度的顺序

默认值:false

  • label String | Number | ReactElement | Object optional

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

格式:

  1. <YAxis label="Height" />
  2. <YAxis label={<CustomizedLabel />} />
  3. <YAxis label={{ value: "YAxis Label" }} />

示例:

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

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

默认值:auto

格式:

  1. <YAxis scale="log" />
  2. import { scaleLog } from 'd3-scale';
  3. const scale = scaleLog() .base(Math.E) ;
  4. ...
  5. <YAxis scale={scale} />
  6. ...
  • unit String | Number optional

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

  • name String | Number optional

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

刻度 click 事件的回调函数。

刻度 mousedown 事件的回调函数。

刻度 mouseup 事件的回调函数。

刻度 mousemove 事件的回调函数。

刻度 mouseover 事件的回调函数。

刻度 mouseout 事件的回调函数。

刻度 moustenter 事件的回调函数。

刻度 mouseleave 事件的回调函数。

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