折线图组件实例讲解

作者:创世魂

 

● 教程说明

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

 

● 详细例程

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

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

 

 

一、折线图

 

● 准备工作

 

界面如下图:

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

依次是“按钮1”“折线图1”

 

● 图表数据创建

 

折线图创建方法如下:

共需七个类,分别是“图表节点值列表类”“图表节点值数组类”“图表折线列表类”“图表折线数组类”

“图表节点值类”“图表折线类”“折线图数据类”

作用分别如下:

1、图表节点值列表类:用于存储“折线”“节点”数据。

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

3、图表折线列表类:用于存储“折线”数据。

4、图表折线数组类:用于创建“图表折线列表类”

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

6、图表折线类: 通过“节点列表”创建“折线列表”

7、折线图数据类:通过定义好的“折线列表”创建“折线图数据”

 

● 图表数据(写)
● 创建

 

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

通过本属性可绘制折线图,属性值为“折线图数据类”

 

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

本方法用于创建“节点值”数据。

参数1:提供节点值的X坐标。

参数2:提供节点值的Y坐标。

 

“图表折线类.创建”帮助文档:

本方法通过“节点列表”创建“折线数据”

 

“折线图数据类.创建”帮助文档:

本方法通过“折线列表”创建“折线图数据”

 

代码编写如下图:

1、创建用于存储“节点数据”“折线数据”的列表类对象。

2、利用循环方法可一次性创建多个节点数据。

3、通过“节点列表”创建“折线数据”,将折线数据添加进“折线列表”内。

4、创建折线图数据,绘制折线图。

 

运行效果如下图(GIF):

注意:折线图在不设置任何数据的情况下,默认存在四个节点数据。

 

● 值内容被选中(事件)

 

帮助文档如下图:

当前值内容被选中后触发本事件。

参数1:返回所点击的折线索引(折线图可添加多条折线,因此存在索引值)。

参数2:返回所点击的点索引。

参数3:通过“图表节点值类”可取出横纵坐标。

 

代码编写如下图:

 

运行效果如下图(GIF):

 

● 折线列表(写)

 

本属性和“气泡图->气泡值列表”属性用法一致。

使用本属性后将无需使用“折线图数据类.创建”方法。

 

● 左侧轴线(写)
● 右侧轴线(写)
● 底部轴线(写)
● 顶部轴线(写)

 

 

以上四个属性继承自“折线图数据类”,用于设置图表四边的轴线,此处演示“左侧”“底部”轴线。

注意:需要配合下面四个方法使用。

 

● 创建
● 置标签值
● 值对象列表(写)
● 文本尺寸(写)

 

“图表轴线值类.创建”帮助文档:

本方法用于创建“轴线值”,参数类型为“小数”

 

“图表轴线值类.置标签值”帮助文档:

通过本方法可设置“轴线文本”

 

“图表轴线类.值对象列表(写)”帮助文档:

本写属性用于设置“轴列表数据”

 

“图表轴线类.文本尺寸(写)”帮助文档:

本属性用于设置“轴文本大小”

 

代码编写如下图:

1、定义“图表轴线值列表类”,创建用于存储坐标值的列表数据。

2、定义“姓名数组”“计次2”,循环创建X轴值,并添加到“坐标值列表”中。

3、设置X轴的“值对象列表”属性为“坐标值列表”,并设置“文本尺寸”

4、将“X轴”赋值给“底部轴线”属性。

5、最后定义“图表轴线类”变量,赋值给“左侧轴线”设置Y轴。

注意:以上代码必须书写在“创建”方法后,“图表数据”属性之前(即黄框范围内)。

 

运行效果如下图:

 

● 置动画目标值
● 开始数据载入动画2
● 支持数据动画监听(写)
● 数据加载动画已开始(事件)
● 数据加载动画已结束(事件)

 

动画载入折线图,共有两种效果。

第一:轴线动画。

第二:折线图动画。

此处演示“轴线动画”

注意:两种动画效果不能共存。

 

“置动画目标值”帮助文档:

想要实现折线图出现动画效果,务必使用本方法设置坐标值。

注意:本方法继承自“图表节点值类”

 

“开始数据载入动画2”帮助文档:

必须调用本方法,动画才能载入。

参数值单位为毫秒。

 

“支持数据动画监听(写)”帮助文档:

必须调用本属性监听,否则动画无法加载。

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

 

“数据加载动画已开始(事件)”帮助文档:

当动画开始后会触发本事件。

 

“数据加载动画已结束(事件)”帮助文档:

动画结束后会触发本事件。

 

代码编写如下图:

在原来代码的基础上简单修改即可。

1、在“节点数据”循环方法下,定义“图表节点值类”变量。

2、通过“节点值”调用“置动画目标值”方法,填写对应参数。

3、最后调用“节点列表”的添加成员方法。

4、在“折线图1”属性栏增加“支持数据动画监听”,属性值为“真”

5、“按钮1”被点击下,调用“开始载入数据动画2”方法,参数填写1200毫秒。

6、分别添加“数据加载动画已开始”“数据加载动画已结束”事件,弹出对应提示。

 

运行效果如下图(GIF):

最后可以看到,轴线出现加载动画。

 

● 折线加载动画

 

帮助说明:

想要实现折线加载动画也很简单,增加一条固定值的折线即可。

 

代码编写如下图:

在原来代码的基础上简单修改即可。

1、定义两个“图表节点值列表类”变量,分别利用新建对象创建其对象。

2、“动画节点值”创建时使用“节点列表1”添加成员。

3、“固定节点值”创建时使用“节点列表2”添加成员。

4、两段代码的不同之处在于“循环”方法内的调用不同(图内箭头标识处)。

 

运行效果如下图(GIF):

最后可以看到,折线出现动画。

 

● 支持滚动(读写)

 

“支持滚动(写)”帮助文档:

本属性用来设置当前图表是否跟随手势滚动显示。

如果不设置本属性,默认为真。

同名读属性,即判断当前图表是否开启了滚动。

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

 

代码编写如下图:

直接判断本属性,然后设置开启和关闭状态。

 

运行效果如下图(GIF):

双击图表和进行放大操作,放大后即可进行手势滚动。

点击“按钮1”后可开启和关闭手势滚动操作。

 

● 支持缩放(读写)

 

“支持缩放(写)”帮助文档:

顾名思义,用来设置当前图表是否支持缩放。

同名读属性,用来读取当前组件是否支持缩放。

提示:“双击图表”“双指反方向滑动”可实现缩放效果。

 

代码编写如下图:

直接判断本属性的返回值,然后执行对应写属性即可。

 

运行效果如下图(GIF):

 

● 最大缩放级别(写)

 

帮助文档如下图:

顾名思义,本属性可设置图表的最大缩放级别,参数类型为小数。

 

代码编写如下图:

设置属性值为“1.5”,即最小缩放1.5倍。

如果属性值设置为“1”,则无缩放效果。

 

运行效果如下图(GIF):

 

● 缩放类型(写)

 

帮助文档如下图:

顾名思义,设置当前图表缩放类型。

属性值调用方式:图表组件缩放类型.XXX。

如果在属性栏,直接选择类型即可。

 

代码编写如下图:

在属性栏设置本属性,选择“横向缩放”

 

运行效果如下图(GIF):

最终可看到本图表只能进行横向缩放。

 

● 缩放级别(读)

 

帮助文档如下图:

顾名思义,本属性可读取当前图表的缩放级别,返回值为小数。

 

代码编写如下图:

直接通过“折线图1”调用本属性即可。

 

运行效果如下图(GIF):