属性 Click to collapse

• allowDataOverflowbooleanoptional

  When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.

  默认值：false

• allowDecimalsbooleanoptional

  Allow the ticks of axis to be decimals or not.

  默认值：false

• allowDuplicatedCategorybooleanoptional

  Allow the axis has duplicated categories or not when the type of axis is "category".

  默认值：true

• anglenumberoptional

  The angle of the whole axis: the line, ticks and labels, everything.

  This is different from other graphical elements where angle usually means the angle of text. Here, it means the angle of everything.

  默认值：0

  示例：

  • Specified Domain Radar Chart

• axisLineReact.SVGProps<SVGLineElement> | false | trueoptional

  Determines how the axis line is drawn. Options:

  • true: the axis line is drawn with default props;
  • false: the axis line is not visible;
  • object: passed as props to SVG <line> element representing the axis line.

  默认值：true

  格式：

  <PolarRadiusAxis axisLine={false} />
  <PolarRadiusAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />

• childrenReactNodeoptional

• classNamestringoptional

  The HTML element's class name

• dangerouslySetInnerHTMLObjectoptional

• dataKeyTypedDataKey<DataPointType, DataValueType>optional

  The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

  Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

  Decides how to extract the value of this Axis from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value of this Axis.

  If undefined, it will reuse the dataKey of graphical items.

• domainArray<number> | Array<string> | Function | [AxisDomainItem, AxisDomainItem]optional

  Specify the domain of axis when the axis is a number axis.

  If undefined, then the domain is calculated based on the data and dataKeys.

  The length of domain should be 2, and we will validate the values in domain.

  Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number.

  If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks. If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.

  格式：

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

  示例：

  • Specified Domain Radar Chart
  • Range Radar Custom Animation

• hidebooleanoptional

  If set true, the axis do not display in the chart.

  默认值：false

• includeHiddenbooleanoptional

  Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden

  默认值：false

• label(union of 6 variants)optional

  Defines a single label for the whole axis. This prop renders one label in the center of the axis line. Useful for labeling the axis as a whole, like "Time (in seconds)" or "Distance (in meters)".

  This is not controlling tick labels. If you want to customize tick labels, please see tickFormatter or tick props.

  • false: no label is rendered
  • string | number: the content of the label
  • object: the props of LabelList component
  • ReactElement: a custom SVG label element, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings.
  • function: a render function of custom label

  默认值：false

• namestringoptional

  The name of data. This option will be used in tooltip. If no value was set to this option, the value of dataKey will be used alternatively.

• niceTicks"adaptive" | "auto" | "none" | "snap125"optional

  Controls how Recharts calculates "nice" tick values for this axis. Options: 'none', 'auto', 'adaptive', 'snap125'. See NiceTicksAlgorithm for a full description of each option.

  默认值："auto"

• orientationnumber | stringoptional

  The orientation of axis text.

  默认值："right"

• radiusAxisIdnumber | stringoptional

  默认值：0

• reversedbooleanoptional

  If set to true, the ticks of this axis are reversed.

  默认值：false

• scale(union of 20 variants)optional

  Scale function determines how data values are mapped to visual values. In other words, decided the mapping between data domain and coordinate range.

  If undefined, or 'auto', the scale function is created internally according to the type of axis and data.

  You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.

  默认值："auto"

  格式：

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

• tickFunction | Props | ReactNode | false | trueoptional

  Defines how the individual label text is rendered. This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.

  If you want to customize the overall axis label, use the label prop instead.

  Options:

  • false: Do not render any tick labels.
  • true: Render tick labels with default settings.
  • object: An object of props to be merged into the internally calculated tick props.
  • ReactElement: A custom React element to be used as the tick label.
  • function: A function that returns a React element for custom rendering of tick labels.

  默认值：true

• tickCountnumberoptional

  The count of axis ticks. Not used if 'type' is 'category'.

  默认值：5

  示例：

  • https://recharts.github.io/guide/axisTicks/

• tickFormatterFunctionoptional

  The formatter function of tick.

• tickLineReact.SVGProps<SVGLineElement> | false | trueoptional

  If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props merged by the internal calculated props and the option.

  默认值：true

• ticksArray<AxisTick>optional

• type"auto" | "category" | "number"optional

  The type of axis.

  category: Treats data as distinct values. Each value is in the same distance from its neighbors, regardless of their actual numeric difference.

  number: Treats data as continuous range. Values that are numerically closer are placed closer together on the axis.

  auto: the type is inferred based on the chart layout.

  默认值："auto"

• unitstringoptional

  The unit of data. This option will be used in tooltip.

• zIndexnumberoptional

  Z-Index of this component and its children. The higher the value, the more on top it will be rendered. Components with higher zIndex will appear in front of components with lower zIndex. If undefined or 0, the content is rendered in the default layer without portals.

  Recharts 自 3.4

  默认值：500

  示例：

  • Z-Index and layers guide

已弃用的属性 Click to expand

事件 Click to expand