Wijmo图表基础之flexpie饼图
FlexPie控件提供了切片可选中的饼图和环形图。
为了使用FlexPie控件,需要设置itemsSource属性为一个包含
数据的数组,并使用binding以及bindingName属性设置包含项目
值和名称的属性。
入门
在JavaScript应用中开始使用FlexPie控件的步骤:
1.添加对Wijmo的引用。
2.添加标记作为Wijmo控件的宿主。
3.通过JavaScript初始化Wijmo控件。
4.(可选)添加一些CSS来自定义输入控件的外观。
基本功能
FlexPie控件有5个基本属性,允许你自定义它的布局和外观:
?innerRadius:指定控件的内半径来支持圆环图。
?offset:指定饼图切块从控件中心的偏移量。
?startAngle:开始在9点的位置,指定开始绘制饼图切块的角
度。
?palette:指定一个包含默认颜色的数组,用来绘制饼图切块。
?reversed:指定控件绘制饼图切块时应该是顺时针(false)还
是逆时针(true)。
代码参考:
主题
FlexPie控件的外观很大程度上是在CSS中定义。除了默认的主
题,我们包括了一些专业设计的主题,它们自定义了Wijmo控件的
外观来达到一个一致的,具有吸引力的效果。
你可以使用CSS自定义FlexPie的外观。要做到这一点,从默认
主题复制CSS规则到一个新的CSS文件并且修改需要的属性。
在这个样例中,我们向控件添加了一个"custom-pie-chart"CSS类
并且定义了一些CSS规则来改变填充,字体集和页眉、页尾、图例的
字体粗细。
效果如图:
|
|