饼状图组件实例讲解

作者:创世魂

 

● 教程说明

注意:本组件位于“图表类窗口组件”模块中。

 

● 详细例程

可打开火山安装目录下“samples\samples.vsln”解决方案。

位于“窗口及组件->图表系列组件”分类下。

 

一、饼状图

 

● 准备工作

 

界面如下图:

打开启动类“界面设计器”,设计如下界面。

依次是“按钮1”“饼状图1”

 

● 图表数据创建

 

饼状图创建方法如下:

共需四个类,分别是“图表切片值列表类”“图表切片值数组类”“图表切片值类”“饼状图数据类”

作用分别如下:

1、图表切片值列表类:用于存储饼图数值。

2、图表切片值数组类:用于创建“图表切片值列表类”

3、图表切片值类:用于创建饼图值信息。

4、饼状图数据类:通过定义好的饼值信息,创建整个饼图数据。

 

● 图表数据(写)
● 创建

 

“图表数据(写)”帮助文档:

顾名思义,设置当前图表数据,属性值为“饼状图数据类”

 

“创建”帮助文档:

本方法继承自“饼状图数据类”,用于创建“饼状图数据”

参数值为“图表切片值列表类”

 

“创建”帮助文档:

本方法是继承自“图表切片值类”,用于创建“饼块值”

 

代码编写如下图:

1、定义三个变量,类型分别为“图表切片值列表类”和两个“图表切片值类”,设置参考。

2、设置“饼块列表”数据。

3、定义类型为“饼状图数据类”的变量,通过“饼块列表”创建当前“饼数据”

4、最后将设置“图表数据”的属性值为“饼数据”即可。

 

运行效果如下图(GIF):

注意:饼状图在不设置任何数据的情况下,默认存在数据。

 

● 扇形区域(写)

 

帮助文档如下图:

通过本属性可将当前饼图设置为椭圆形状(默认为正圆)。

 

代码编写如下图:

添加“通知_被创建”虚拟方法,将创建饼图代码写入。

 

“按钮1”被点击下,定义“小数矩形类”变量,分贝设置“上下左右”四个属性。

最后将变量名赋值给“扇形区域”属性。

 

运行效果如下图(GIF):

可看到饼图缩小,并且变成了椭圆形状。

 

● 支持手动旋转(读写)

 

“支持手动旋转(写)”帮助文档:

顾名思义,本属性可用来设置当前饼图是否支持手动旋转。

如果不设置本属性,默认支持手动旋转。

同名读属性,即读取当前是否支持手动旋转。

手动旋转:即手指拖动饼图可执行顺时针或逆时针旋转。

 

代码编写如下图:

直接判断当前读属性的返回值,然后执行对应的写属性。

 

运行效果如下图(GIF):

 

● 视图比例(写)

 

帮助文档如下图:

本属性用来设置缩放比例,属性值位于0-1之间。

 

代码编写如下图:

设置属性值为0.5,缩小一半。

 

运行效果如下图(GIF):

可看到饼图明显变小。

 

● 当前旋转角度(读)

 

帮助文档如下图:

顾名思义,读取当前饼图旋转角度。

 

代码编写如下图:

直接通过本属性读取即可。

 

运行效果如下图(GIF):

注意:默认角度为45度。

 

● 置当前旋转角度

 

帮助文档如下图:

通过本方法可设置饼图的旋转角度。

参数1:提供要旋转的角度。

参数2:是否有旋转动画。

注意:饼图默认角度45度。

 

代码编写如下图:

直接给当前方法填写对应参数即可。

 

运行效果如下图(GIF):

 

● 值内容脱离选中(事件)
● 值内容被选中(事件)

 

“值内容被选中(事件)”帮助文档:

当饼块被选中后触发本事件。

参数1:返回“索引值”

参数2:通过参数2可以获得“饼值”

 

“值内容脱离选中(事件)”帮助文档:

饼块脱离选择后将触发本事件。

想要让本事件生效,务必设置“支持值选中显示”属性值为真。

 

代码编写如下图:

分别添加这两个事件,填写要执行的代码。

 

运行效果如下图(GIF):

 

● 中间文本(写)
● 中间文本2(写)
● 中间文本字体(写)
● 中间文本字体2(写)
● 中间文本尺寸(写)
● 中间文本尺寸2(写)
● 中间文本颜色(写)
● 中间文本颜色2(写)
● 中间空心圆(写)

以上属性分别用来设置饼图中间文本信息,全部继承自“饼状图数据类”

注意:务必设置“中间空心圆”属性值为真,否则中间文本属性无效。

注意2:以上属性需要写到“图表数据”属性前。

 

代码编写如下图:

以上属性需要写到“创建”方法后,“图表数据”属性之前。

 

运行效果如下图:

 

● 显示标签(写)
● 值标签字体类型(写)
● 值标签文本尺寸(写)
● 值标签文本颜色(写)

 

“显示标签”属性继承自“饼状图数据类”,作用是在“饼块”上显示“饼值”

剩余四个属性继承自“图表数据基础类”,用于设置饼值字体信息。

 

代码编写如下图:

以上属性同样需要写到“创建”方法后,“图表数据”属性前。

 

运行效果如下图:

 

● 值格式化对象(写)

 

帮助文档如下图:

通过本属性可设置饼值保留几位小数,需要通过“饼图值格式化类”创建。

 

代码编写如下图:

1、定义饼值时填写小数。

2、设置“显示标签”属性为真。

3、给当前属性赋值“饼图格式化类.创建(1)”,即保留一位小数,参数值填写2保留两位,以此类推。

 

运行效果如下图:

最后可看到饼值,只保留了一位小数。

 

● 切片列表(写)
● 切片间距(写)

 

“切片列表(写)”帮助文档如下图:

本属性可取代“饼状图数据类.创建()”设置饼数据。

 

“切片间距(写)”帮助文档如下图:

设置饼块之间的间距,单位像素。

 

代码编写如下图:

“切片列表”“创建”二选一即可。

“切片间距”需要设置在其后方。

 

运行效果如下图:

 

● 标签外部显示(写)

 

帮助文档如下图:

本属性用来设置“饼值”是否显示在“饼图外部”

 

代码编写如下图:

设置本属性值为真,同时也需要设置“显示标签”属性为真。

 

运行效果如下图:

 

● 空心圆大小(写)
● 空心圆颜色(写)

 

“空心圆大小(写)”帮助文档:

通过本属性可设置空心圆大小,属性值在“0-1”之间。

 

“空心圆颜色(写)”帮助文档:

设置空心圆颜色,可使用“颜色类”中定义的常量值。

 

代码编写如下图:

务必设置“中间空心圆”属性值为真。

然后根据需求,依次设置以上两个属性值即可。

 

运行效果如下图:

 

● 选择数据提示(写)

 

帮助文档如下图:

本属性的作用,用于设置选择饼块后是否显示饼值。

注意:如果“显示标签=真”,则本方法无效。

 

代码编写如下图:

设置本属性值为真。

 

运行效果如下图(GIF):

最后可看到,选中饼块后同时饼值也显示出来。

 

● 支持交互(读写)

 

“支持交互(写)”帮助文档:

本属性用来设置当前组件是否支持交互点击,不设置本属性默认为真。

同名读属性,即判断当前组件是否支持交互。

注意:本属性继承自“图表组件基础类”

 

代码编写如下图:

 

运行效果如下图(GIF):

 

● 支持值选中显示(读写)

 

“支持值选中显示(写)”帮助文档:

本属性可以用来设置饼块被选中后是否显示出来。

同名读属性,即读取当前是否支持选中显示。

 

代码编写如下图:

 

运行效果如下图(GIF):

 

● 支持点击(读写)

 

帮助文档如下图:

设置当前组件是否支持点击。

通名读属性,即读取当前组件是否支持点击。

 

代码编写如下图:

 

运行效果如下图(GIF):

 

● 支持视图区域改变监听(写)
● 视图区域改变(事件)

 

“支持视图区域改变监听(写)”帮助文档:

本属性设置为真,可监听视图区域被改变事件。

 

“视图区域改变(事件)”帮助文档:

当视图区域被改变后将触发本事件,返回“图表组件视图区域类”

通过此类可取出改变后的视图坐标信息。

 

代码编写如下图:

1、在饼状图变量属性栏设置“支持视图区域被改变监听”为真。

2、“按钮1”被点击后画饼图。

3、添加“视图区域改变”事件,通过“当前区域对象”参数可取出视图高度和宽度。

 

运行效果如下图(GIF):