RadialBarChart

• 18-24
• 25-29
• 30-34
• 35-39
• 40-49
• 50+
• unknow

显示数据格式

<RadialBarChart 
  width={730} 
  height={250} 
  innerRadius="10%" 
  outerRadius="80%" 
  data={data} 
  startAngle={180} 
  endAngle={0}
>
  <RadialBar minAngle={15} label={{ fill: '#666', position: 'insideStart' }} background clockWise={true} dataKey='uv' />
  <Legend iconSize={10} width={120} height={140} layout='vertical' verticalAlign='middle' align="right" />
  <Tooltip />
</RadialBarChart>

父组件

• <ResponsiveContainer />

子组件

• <PolarAngleAxis />
• <PolarRadiusAxis />
• <PolarGrid />
• <Legend />
• <Tooltip />
• <RadialBar />
• <Customized />
• validate svg elements…

Properties

• width Number

图表的宽度。

• height Number

图表的高度。

• data Array

The source data which each element is an object.

格式：

[{name: 'a', value: 12}]

• margin Object

图表四周的留白大小，支持传入部分值（如： { top: 5 }）。

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

格式：

{ top: 5, right: 5, bottom: 5, left: 5 }

• barCategoryGap Percentage| Number

两个类目之间的间隔距离，如果值为百分比，会根据类目宽度来计算实际值。

默认值：'10%'

• barGap Number

某一个类目下，相邻的两个柱条的间隔大小。如果值为百分比，会根据类目宽度来计算实际值。

默认值：4

• cx Percentage | Number

圆心的 x 坐标，如果值为百分比，会根据图表的宽度来计算最后的值。

默认值：'50%'

• cy Percentage | Number

圆心的 y 坐标，如果值为百分比，会根据图表的高度来计算最后的值。

默认值：'50%'

• startAngle Number

柱条的起始角度。

默认值：0

• endAngle Number

柱条的结束角度。

默认值：360

• innerRadius Percentage | Number

径向柱图最内侧柱条的内径。如果值为百分比，我们首先会根据圆心的坐标、图表的宽度、图表的高度计算一个最大半径，然后根据这个最大半径来计算真实的半径。

默认值：'30%'

• outerRadius Percentage | Number

径向柱图最外侧柱条的外径。如果值为百分比，我们首先会根据圆心的坐标、图表的宽度、图表的高度计算一个最大半径，然后根据这个最大半径来计算真实的半径。

默认值：'100%'

• barSize Number optional

柱条的宽度。如果指定这个值，会根据 barCategoryGap 和 barGap 来计算柱条的宽度，每组柱条的宽度是一样的。

• onMouseEnter Function optional

每个柱条的 mouseenter 事件的回调函数，如果当子组件 RadialBar 上也绑定了同样的事件，子组件的事件回调函数才会被绑定。

• onMouseLeave Function optional

每个柱条的 mouseleave 事件的回调函数，如果当子组件 RadialBar 上也绑定了同样的事件，子组件的事件回调函数才会被绑定。

• onClick Function optional

每个柱条的 click 事件的回调函数，如果当子组件 RadialBar 上也绑定了同样的事件，子组件的事件回调函数才会被绑定。