API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

SunburstChart

The sunburst is a hierarchical chart, similar to a Treemap, plotted in polar coordinates. Sunburst charts effectively convey the hierarchical relationships and proportions within each level. It is easy to see all the middle layers in the hierarchy, which might get lost in other visualizations. For some datasets, the radial layout may be more visually appealing and intuitive than a traditional Treemap.

父组件

SunburstChart consumes context provided by these components:

子组件

SunburstChart provides context for these components:

Props

  • dataSunburstData

    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, fill: '#8884d8' }, { name: 'b', value: 5, fill: '#83a6ed' }]}

  • childrenReactNodeoptional

  • classNamestringoptional

  • cxnumberoptional

    The x-coordinate of center in pixels. If undefined, it will be set to half of the chart width.

  • cynumberoptional

    The y-coordinate of center in pixels. If undefined, it will be set to half of the chart height.

  • dataKeystringoptional

    Decides how to extract value from the data.

    默认值："value"

  • endAnglenumberoptional

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

    默认值：360

  • fillstringoptional

    默认值："#333"

  • height`${number}%` | numberoptional

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

    示例：

  • idstringoptional

  • innerRadiusnumberoptional

    The radius of the inner circle at the center of the chart.

    默认值：50

  • nameKeyFunction | number | stringoptional

    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"

  • outerRadiusnumberoptional

    Outermost edge of the chart. Defaults to the max possible radius for a circle inscribed in the chart container

  • paddingnumberoptional

    Distance between sectors.

    默认值：2

  • 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

  • ringPaddingnumberoptional

    Padding between each hierarchical level.

    默认值：2

  • startAnglenumberoptional

    Angle in degrees from which the chart should start.

    默认值：0

  • strokestringoptional

    默认值："#FFF"

  • styleReact.CSSPropertiesoptional

  • textOptionsPropsoptional

    An object with svg text options to control the appearance of the chart labels.

    默认值：{"fontWeight":"bold","paintOrder":"stroke fill","fontSize":".75rem","stroke":"#FFF","fill":"black","pointerEvents":"none"}

  • width`${number}%` | numberoptional

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

    示例：

  • onClickFunctionoptional

  • onMouseEnterFunctionoptional

  • onMouseLeaveFunctionoptional