YAxis

父组件

子组件

Properties

  • hideBoolean

    是否隐藏 y 轴。

    默认值:false

  • dataKeyString | Number | Functionoptional

    指定展示的数据维度。

  • yAxisIdString | Number

    y 轴的唯一 id。

    默认值:0

  • widthNumber

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

    默认值:60

  • heightNumber

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

    默认值:0

  • orientation'left' | 'right'

    y 轴的位置。

    默认值:'left'

  • type'number' | 'category'

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

    默认值:'number'

  • tickCountNumber

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

    默认值:5

  • domainArray | Functionoptional

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

    默认值:[0, 'auto']

    格式:

    <YAxis type="number" domain={['dataMin', 'dataMax']} />
    <YAxis type="number" domain={[0, 'dataMax']} />
    <YAxis type="number" domain={['auto', 'auto']} />
    <YAxis type="number" domain={[0, 'dataMax + 1000']} />
    <YAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
    <YAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
    <YAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
    <YAxis type="number" domain={[0, 100]} allowDataOverflow />
  • includeHiddenBooleanoptional

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

    默认值:false

    格式:

    <YAxis type="number" includeHidden />
  • interval"preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart" | Number

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

    默认值:'preserveEnd'

  • paddingObject

    指定内边距。

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

    格式:

    <YAxis padding={{ top: 10 }} />
    <YAxis padding={{ bottom: 20 }} />
    <YAxis padding={{ top: 20, bottom: 20 }} />
  • minTickGapNumber

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

    默认值:5

  • allowDecimalsBoolean

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

    默认值:true

  • allowDataOverflowBoolean

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

    默认值:false

    格式:

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

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

    默认值:true

  • axisLineBoolean | Object

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

    默认值:true

  • tickLineBoolean | Object

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

    默认值:true

  • tickSizeNumber

    刻度线的长度。

    默认值:6

  • tickFormatterFunctionoptional

    刻度的格式化函数。

  • ticksArrayoptional

    指定需要展示的刻度。

  • tickBoolean | Object | ReactElementoptional

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

    格式:

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

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

    默认值:false

  • reversedBoolean

    是否反转刻度的顺序

    默认值:false

  • labelString | Number | ReactElement | Objectoptional

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

    格式:

    <YAxis label="Height" />
    <YAxis label={<CustomizedLabel />} />
    <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

    格式:

    <YAxis scale="log" />
    
    import { scaleLog } from 'd3-scale';
    const scale = scaleLog().base(Math.E);
    
    ...
      <YAxis scale={scale} />
    ...
    
  • unitString | Numberoptional

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

  • nameString | Numberoptional

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

  • onClickFunctionoptional

    刻度 click 事件的回调函数。

  • onMouseDownFunctionoptional

    刻度 mousedown 事件的回调函数。

  • onMouseUpFunctionoptional

    刻度 mouseup 事件的回调函数。

  • onMouseMoveFunctionoptional

    刻度 mousemove 事件的回调函数。

  • onMouseOverFunctionoptional

    刻度 mouseover 事件的回调函数。

  • onMouseOutFunctionoptional

    刻度 mouseout 事件的回调函数。

  • onMouseEnterFunctionoptional

    刻度 mouseenter 事件的回调函数。

  • onMouseLeaveFunctionoptional

    刻度 mouseleave 事件的回调函数。

  • tickMarginNumberoptional

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