配色: 字号:
Wijmo图表基础之flexpie饼图
2016-10-18 | 阅:  转:  |  分享 
  
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规则来改变填充,字体集和页眉、页尾、图例的

字体粗细。

效果如图:



献花(0)
+1
(本文系Terrencejv1...首藏)