RadarChart

Props

• accessibilityLayerbooleanoptional

  Turn on accessibility support for keyboard-only and screen reader users.

  默认值：true

• barCategoryGapnumber | stringoptional

  The gap between two bar categories, which can be a percent value or a fixed value.

  默认值："10%"

• barGapnumber | stringoptional

  The gap between two bars in the same category.

  默认值：4

• barSizenumber | stringoptional

  The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.

• childrenReactNodeoptional

  示例：

  • Simple Radar Chart
  • Specified Domain Radar Chart

• classNamestringoptional

• cursor(union of 45 variants)optional

  The CSS cursor style applied to the chart container. Useful for setting the mouse cursor when hovering over the chart (e.g. "pointer", "crosshair").

• cxnumber | stringoptional

  The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width.

  默认值："50%"

• cynumber | stringoptional

  The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height.

  默认值："50%"

• dataReadonlyArray<DataPointType>optional

  The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

  Use the dataKey prop to specify which properties to use.

  格式：

  data={[{ name: 'a', value: 12 }]}
  data={[{ label: 'foo', measurements: [5, 12] }]}

  示例：

  • Simple Radar Chart
  • Specified Domain Radar Chart

• dataKeyFunction | number | stringoptional

• descstringoptional

• endAnglenumberoptional

  Angle, in degrees, at which the chart should end.

  默认值：-270

• height`${number}%` | numberoptional

  The height of chart container. Can be a number or a percent string like "100%".

  示例：

  • Chart sizing guide

• idstringoptional

• innerRadiusnumber | stringoptional

  The inner radius of the chart. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.

  默认值：0

• layout"centric" | "radial"optional

  The layout of chart defines the orientation of axes, graphical items, and tooltip.

  默认值："centric"

• marginPartial<Margin>optional

  Empty space around the container.

  默认值：{"top":5,"right":5,"bottom":5,"left":5}

  示例：

  • Simple Radar Chart

• maxBarSizenumberoptional

• outerRadiusnumber | stringoptional

  The outer radius of the chart. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.

  默认值："80%"

  示例：

  • Simple Radar Chart
  • Specified Domain Radar Chart

• refFunction | React.RefObject<SVGSVGElement> | nulloptional

• responsivebooleanoptional

  If true, then it will listen to container size changes and adapt the SVG chart accordingly. If false, then it renders the chart at the specified width and height and will stay that way even if the container size changes.

  This is similar to ResponsiveContainer but without the need for an extra wrapper component. The responsive prop also uses standard CSS sizing rules, instead of custom resolution logic (like ResponsiveContainer does).

  默认值：false

  示例：

  • Chart sizing guide
  • Simple Radar Chart
  • Specified Domain Radar Chart

• reverseStackOrderbooleanoptional

  默认值：false

• rolestringoptional

• stackOffset"expand" | "none" | "positive" | "sign" | "silhouette" | "wiggle"optional

  默认值："none"

• startAnglenumberoptional

  Angle in degrees from which the chart should start.

  默认值：90

• styleReact.CSSPropertiesoptional

  示例：

  • Simple Radar Chart
  • Specified Domain Radar Chart

• syncIdnumber | stringoptional

  Charts with the same syncId will synchronize Tooltip and Brush events.

  示例：

  • Synchronized Charts Example

• syncMethod"index" | "value" | Functionoptional

  Customize how the charts will synchronize tooltips and brushes.index: synchronize using the data index in the data array. Index expects that all data has the same length.value: synchronize using the data value on categorical axis (categorical: XAxis in horizontal layout, YAxis in vertical layout). function: a custom sync method which receives tick and data as argument and returns an index.

  默认值："index"

• tabIndexnumberoptional

  If and where the chart should appear in the tab order

• throttleDelay"raf" | numberoptional

  Decides the time interval to throttle events. Only events defined in throttledEvents prop are throttled. All other events are executed immediately/synchronously.

  Options:

  • number: the time interval in milliseconds
  • 'raf': use requestAnimationFrame to schedule updates.

  默认值："raf"

• throttledEvents"all" | Array<keyof GlobalEventHandlersEventMap>optional

  Defines which events should be throttled. Events not in this list will not be throttled.

  Use the special value 'all' to throttle all events. Empty array means no events are throttled.

  Use the prop throttleDelay to define the throttling interval.

  If an event is on this list, then you lose the opportunity to access the event synchronously. Which means that if you want to call e.preventDefault() or e.stopPropagation() inside the event handler, then that event handler must not be in this list.

  默认值：["mousemove","touchmove","pointermove","scroll","wheel"]

• titlestringoptional

• width`${number}%` | numberoptional

  The width of chart container. Can be a number or a percent string like "100%".

  示例：

  • Chart sizing guide

• onClickCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of click in this chart.

• onContextMenuCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of contextmenu in this chart.

• onDoubleClickCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of dblclick in this chart.

• onMouseDownCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of mousedown in this chart.

• onMouseEnterCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of mouseenter in this chart.

• onMouseLeaveCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of mouseleave in this chart.

• onMouseMoveCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of mousemove in this chart.

• onMouseUpCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional

  The customized event handler of mouseup in this chart.

• onTouchEndCategoricalChartFunc<React.TouchEvent<SVGGraphicsElement>>optional

  The customized event handler of touchend in this chart.

• onTouchMoveCategoricalChartFunc<React.TouchEvent<SVGGraphicsElement>>optional

  The customized event handler of touchmove in this chart.

• onTouchStartCategoricalChartFunc<React.TouchEvent<SVGGraphicsElement>>optional

  The customized event handler of touchstart in this chart.