柱状图组件实例讲解

作者:创世魂

 

● 教程说明

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

 

 

一、柱状图

 

● 准备工作

 

界面如下图:

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

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

 

● 图表数据创建

 

折线图创建方法如下:

共需七个类,分别是“图表柱子列表类”“图表柱子数组类”“图表柱状节点值列表类”“图表柱状节点值数组类”

“图表柱状节点值类”“图表柱子类”“柱状图数据类”

作用分别如下:

1、图表柱子列表类:用于存储“柱子”数据。

2、图表柱子数组类:用于创建“图表柱子列表类”

3、图表柱状节点值列表类:用于存储“柱子节点”数据。

4、图表柱状节点值数组类:用于创建“图表柱状节点值列表类”

5、图表柱状节点值类:用于创建“节点值”数据。

6、图表柱子类: 通过“节点列表”创建“柱子”,创建的“柱子”需要加入到“柱子列表”

7、柱状图数据类:通过“柱子列表”创建最终的“柱状图数据”

 

● 图表数据(写)
● 创建

 

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

本属性用于设置当前柱状图图表数据,属性值类型为“柱状图数据类”

 

“图表柱状节点值类.创建”帮助文档:

通过本方法可创建柱状图节点值。

 

“图表柱子类.创建”帮助文档:

本方法的作用是用来创建柱子对象。

 

“柱状图数据类.创建”帮助文档:

通过本方法可创建完整的柱子数据。

 

代码编写如下图:

1、创建“图表柱子列表类”,用于存储柱子数据。

2、循环创建“柱子节点”“柱子列表”

3、通过“柱子列表”创建柱子数据,赋值给“图表数据”属性。

 

运行效果如下图(GIF):

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

 

● 值内容被选中(事件)

 

帮助文档如下图:

顾名思义,当柱子被选中后会触发本事件。

参数1:返回柱子索引。

参数2:返回子柱子索引。

参数3:通过“值对象”可取出当前柱子值。

 

代码编写如下图:

添加“柱状图_值内容被选中”事件,弹出索引和柱子值。

 

运行结果如下图(GIF):

 

● 柱子列表(写)

 

帮助文档如下图:

本属性同创建方法,用于创建“柱状图数据”

 

代码编写如下图:

本属性和“创建”方法二选一,使用本属性时注意不要勾选参考。

运行效果同“创建”方法一致。

 

● 柱子宽度系数(写)

 

帮助文档如下图:

本属性继承自“柱状图数据类”,用于设置柱子宽度。

属性值位于“0-1”之间,数值越小,柱子宽度越小。

 

代码编写如下图:

设置本属性值为0.1。

 

运行效果如下图(GIF):