属性 Click to collapse

• dataKeyTypedDataKey<DataPointType, DataValueType>

  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 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.

• activeShape(union of 5 variants)optional

  This component is rendered when this graphical item is activated (could be by mouse hover, touch, keyboard, programmatically).

• animationBeginnumberoptional

  Specifies when the animation should begin, the unit of this option is ms.

  默认值：400

• animationDurationnumberoptional

  Specifies the duration of animation, the unit of this option is ms.

  默认值：1500

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear" | "spring" | EasingFunction | `cubic-bezier(${number},${number},${number},${number})`optional

  The type of easing function.

  默认值："ease"

• animationInterpolateFnAnimationInterpolateFn<FunnelTrapezoidItem, CartesianLayout>optional

  Custom animation function for interpolating data items. When provided, this replaces the default animation interpolation.

  Recharts 自 3.9

  示例：

  • Animations guide

• animationMatchBy"append" | "index" | AnimationMatchBy<FunnelTrapezoidItem>optional

  Strategy for matching previous items to next items during animation. Determines how Recharts pairs old data points with new data points to create smooth transitions.

  • matchAppend (default): match sequentially by index and treat newly appended items as new
  • matchByIndex: match by array position with proportional stretching
  • matchByDataKey('someKey'): match by a data key from the payload
  • Custom function (item, index) => key: match by the returned key

  Recharts 自 3.9

  默认值："append"

  示例：

  • *
  • *
  • *
  • Animations guide

• childrenReactNodeoptional

• classNamestringoptional

• dangerouslySetInnerHTMLObjectoptional

• 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] }]}

• formatterFormatteroptional

  Formats the value displayed in the tooltip for this Funnel. When set, takes precedence over the formatter prop on the Tooltip component.

• hidebooleanoptional

  Hides the whole graphical element when true.

  Hiding an element is different from removing it from the chart: Hidden graphical elements are still visible in Legend, and can be included in axis domain calculations, depending on includeHidden props of your XAxis/YAxis.

  默认值：false

• idstringoptional

  Unique identifier of this component. Used as an HTML attribute id, and also to identify this element internally.

  If undefined, Recharts will generate a unique ID automatically.

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of funnel will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.

  默认值："auto"

• labelFunction | Props | ReactNode | false | trueoptional

• lastShapeType"rectangle" | "triangle"optional

  默认值："triangle"

• legendType"circle" | "cross" | "diamond" | "line" | "none" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional

  The type of icon in legend. If set to 'none', no legend item will be rendered.

  默认值："rect"

• nameKeyTypedDataKey<DataPointType, DataValueType>optional

  Name represents each sector in the tooltip. This allows you to extract the name 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 name.

  默认值："name"

• reversedbooleanoptional

  默认值：false

• shape(union of 5 variants)optional

  If set a ReactElement, the shape of funnel can be customized. If set a function, the function will be called to render customized shape. During animations, the function shape also receives animationElapsedTime, isAnimating, and isEntrance. By default, renders a trapezoid.

• tooltipType"none"optional

事件 Click to expand