CN103345565A - 一种用于数据展示基于Flash技术的仪表盘构建方法 - Google Patents

Abstract

本发明是一种用于数据展示基于Flash技术的仪表盘构建方法，将数据通过仪表盘的方式直观的友好的进行展示，该仪表盘是在Flex4.6上封装的一个控件，控件名：dashboard.DTMDashBoard，可以通过操作控件属性方式来对实例化后的控件的大小、数值、标题、指针数、颜色等进行设置，以达到逼真的显示效果。本发明以类似于生活中仪表盘的方式将温度、湿度、电流、电压等这些有相对的最大值最小值的数据展示给系统使用人员，以此来解决普通文本类数据方式不形象不美观等问题，从而给用户带来更为友好的视觉体验。

Description

一种用于数据展示基于Flash技术的仪表盘构建方法

技术领域

本发明属于计算机数据展示领域，具体的说是一种用于数据展示基于Flash技术的仪表盘构建方法。

背景技术

在机房管理系统中，时常需要对该机房的温度、湿度、电流、电压等数据进行采集统计，并且将采集出的数据展示给用户，在现实生活中，通过人们看到的电流表等，都是以仪表盘的实体展示出来的，而现有管理系统中这类数据通常都是以文本及表格方式展示，这样的缺点就是数据显示呆板，不能很真观的展示。

随着B/S应用的普及，传统文本加表格的展示方法已经不能满足人们的需要，作为富客户端的开发技术之一的Flash正渐渐成为富客户开发的主流技术，可以通过Flash技术设计出更为友好的页面用于机房的温度、湿度、电流、电压等数据展示。

如何运用Flash技术设计出更为友好的方式对数据进行展示，以形象美观的方案友好的展示给用户，即如何基于Flash技术构建以用于数据展示是本领域技术人员有待解决的一个技术问题。

发明内容

本发明所要解决的技术问题是，针对以上现有技术存在的缺点，提出一种用于数据展示基于Flash技术的仪表盘构建方法，可以以最为友好的方式将温度、湿度、电流、电压等数据展示给系统使用人员，以此来解决数据的普通展示方式不形象不美观等问题，从而给用户带来更为友好的视觉体验。

本发明解决以上技术问题的技术方案是：

一种用于数据展示基于Flash技术的仪表盘构建方法，按以下步骤进行：

㈠新建一个flash应用程序，在该应用程序中绘制仪表盘容器，在仪表盘容器最外层套上BorderContainer用于边框外观和背景的填充，并放置一个仪表盘对象，该数据展示仪表盘运用flash中的dashborad: DTMDashBoard进行数据展示；

㈡仪表盘位置大小定义：通过width和height属性设置仪表盘的大小，通过proportion属性来设置仪表盘的半径，上述属性仪表盘的盘面配置完成后，通过AS角本完成对仪表盘数据的赋值操作；

㈢仪表盘显示风格配置：通过totalAngle属性设置仪表盘的显示的最大弧度，通过maxScale和minScale属性来设置仪表盘显示的最大刻度与最小刻度，通过scaleStep属性设置每小刻度的步长，通过scaleBigStep属性设置每一大格中小格的数量，通过valueName属性设置仪表盘的显示单位，通过addCirqueSegment方法定义出仪表盘上刻度的分级情况，以更醒目的显示数据区间；

㈣仪表盘进行显示数值设置：本仪表盘支持多条指针显示模式，通过对象的addPointer方法将多条指针的数据添加到仪表盘；

㈤仪表盘的显示：通过调用对象drawDashboard方法，将对象显示出来。

本发明进一步限定的技术方案是：

前述的用于数据展示基于Flash技术的仪表盘构建方法，步骤㈡中，通过定义仪表盘所在画布的大小属性的width、height进行配置，来控制仪表盘显示的大小；

对于proportion属性表示仪表在画布上的显示比例，通过下列公式进行计算，得出仪表盘的实际半径值：

仪表盘的半径=min(画布的宽度，画布的高度) *显示比例/2。

前述的用于数据展示基于Flash技术的仪表盘构建方法，步骤㈢中，对于totalAngle属性是表示仪表盘的盘面显示的圆弧的大小，在构造仪表盘的盘面时，先根据画布的大小与仪表盘的半径，计算出仪表盘的盘中心点在画布上的位置坐标，根据totalAngle属性设置表盘的弧度计算出整个表盘的开始角度与结束角度，再根据、中心点位置和半径大小，计算出开始角度点的位置与结束角度点的位置，通过上述坐标点，绘制出表盘的轮廓；

maxScale、minScale是设置表盘上最大刻度、最小刻度值，scaleStep表示仪表盘上第一小格的大小，scaleBigStep是表示表面上每一大格是小格的数量，通过上述四个参数，可以计算表面上要绘制的大格的数量：

大格的数量=(maxScale -minScale)/(scaleBigStep* scaleStep)，

对于出现大格的数量值为非整数时，系统自动加1取整；根据每一小刻度与刻度的，分别计算每一刻度的开始与结束角度，等后续绘制仪表盘时使用；

在仪表盘中添加一个文本框控件，根据传入的valueName显示仪表盘的单位或一个标识信息，电压表显示“V”，电流表显示“A”等字样；

通过addCirqueSegment方法，定义仪表盘刻度的分级情况，该方法传入刻度值段，根据传入的多段刻度值段，计算出每段对应的开始角度与结束角度，待后续绘制仪表盘时使用。

前述的用于数据展示基于Flash技术的仪表盘构建方法，步骤㈣中，通过addPointer方法，定义仪表盘上指针数据对象，本方法支持多条指针的定义显示，该方法要求提供指针的数值、指针的颜色，根据指针的数值计算出指针的角度，待后续绘制仪表时使用。 

前述的用于数据展示基于Flash技术的仪表盘构建方法，步骤㈤中，drawDashboard方法为绘制仪表盘的方法，根据传入的参数值，分对表面的各数据进行绘制；

绘制刻度分级段，根据传入的刻度值段对象数组，取每一个刻度值段对象的开始角度与结束角度，以指定的颜色画出分级段区间； 

绘制大刻度线，根据传入参数，计算出第一个大刻度的角度，通过绘制函数，在盘面上绘制出大刻度线，再根据循环处理画出每个大刻度线；

绘制小刻度线，根据传入参数，计算出第一个小刻度的角度，通过绘制函数，在盘面上绘制出小刻度线，再根据循环处理画出每个小刻度线；

绘制仪表盘指针，根据传入的各指针对象，计算出指针的角度值，以指定的颜色，在盘面上画出对应的指针。

本发明的有益效果是：本发明在基于Flash技术的基础上，将数据的展示方式做了更好的设计，为机房管理系统温度等物理量的展示提供了一个更好的方案，可以以最为友好的方式将温度、湿度、电流、电压等数据展示给系统使用人员，以此来解决数据的普通展示方式不形象不美观等问题，从而给用户带来更为友好的视觉体验。本发明支持自主定义刻度极值，也可以根据传入的数据动态生成极值，支持多数值的仪表盘展示模式，支持仪表盘区间段定义。

本发明对于在日常生活本身就以仪表盘显示的数据，如电流表、电压、汽车仪表，都可以采用本发明在其他系统中进行展示。

具体实施方式

    实施例1

用于数据展示基于Flash技术的仪表盘构建方法，应用于具体的机房管理系统的温度、湿度、电流、电压等数据展示，包括以下步骤：

初始化对象：

根据设置的大小，构造仪表盘的对象大小，

根据表盘半径计算出仪表盘的半径及中心点位置，

根据设置的弧度大小、内环半径绘制出仪表盘的轮廓与中心点，

根据输入标题，绘制出仪表盘上的显示的信息。

画刻度：

根据最大值、最小值、刻度步长，计算刻度弧度与启始角度与起始的位置。

进一步出每一刻度的间隔角度，在仪表盘上绘制出刻度，并画出刻度的数值。

画区间：

根据输入的区间段值，对表盘进行分区，记录每个分段的开始点与结束的位置，

根据每个分段的位置信息，在分段区填充相应的颜色。

画指针：

根据传入的显示数据组，计算出各数据对应的指针位置，

根据指针位置，使用对应的颜色绘制出仪表盘的数据指针。

本实施例的具体过程如下：

新建一个flash应用程序，在该应用程序中绘制仪表盘容器，在仪表盘容器最外层套上BorderContainer用于边框外观和背景的填充，并放置一个仪表盘对象，该数据展示仪表盘运用flash中的dashborad: DTMDashBoard进行数据展示。

仪表盘位置大小定义：并通过width、height属性设置仪表盘的大小，通过proportion属性来设置仪表盘的半径；通过上述属性仪表盘的盘面配置完成，下面可以通过AS角本完成对仪表盘数据的赋值操作。通过定义仪表盘所在画布的大小属性的width、height进行配置，来控制仪表盘显示的大小；对于proportion属性表示仪表在画布上的显示比例，通过下列公式进行计算,可得出仪表盘的实际半径值：仪表盘的半径=min(画布的宽度, 画布的高度) *显示比例/2。

仪表盘显示风格配置：通过totalAngle属性设置仪表盘的显示的最大弧度，通过属性maxScale、minScale属性来仪表盘显示的最大刻度与最小刻度，通过scaleStep属性设置每小刻度的步长，通过scaleBigStep属性设置每一大格中小格的数量，同时通过valueName属性设置仪表盘的显示单位。可以通过addCirqueSegment方法定义出仪表盘上刻度的分级情况，这样可以更醒目的显示数据区间。对于totalAngle属性是表示仪表盘的盘面显示的圆弧的大小 ，在构造仪表盘的盘面时，先根据画布的大小与仪表盘的半径，计算出仪表盘的盘中心点在画布上的位置坐标，根据totalAngle属性设置表盘的弧度计算出整个表盘的开始角度与结束角度，再根据、中心点位置、半径大小，计算出开始角度点的位置与结束角度点的位置，通过上述坐标点，绘制出表盘的轮廓。maxScale、minScale是设置表盘上最大刻度、最小刻度值，scaleStep表示仪表盘上第一小格的大小，scaleBigStep是表示表面上每一大格是小格的数量，通过上述四个参数，可以计算表面上要绘制的大格的数量：大格的数量=(maxScale -minScale)/(scaleBigStep* scaleStep)；对于出现大格的数量值为非整数时，系统自动加1取整;根据每一小刻度与刻度的，分别计算每一刻度的开始与结束角度，等后续绘制仪表盘时使用。在仪表盘中添加一个文本框控件，根据传入的valueName显示仪表盘的单位或一个标识信息，通常电压表显示“V”，电流表显示“A”等字样。通过addCirqueSegment方法，定义仪表盘刻度的分级情况，该方法传入刻度值段，程序根据传入的多段刻度值段，计算出每段对应的开始角度与结束角度，待后续绘制仪表盘时使用;

仪表盘进行显示数值设置：本仪表盘支持多条指针显示模式，通过对象的addPointer方法可以将多条指针的数据添加到仪表盘。通过addPointer方法，定义仪表盘上指针数据对象，本方法支持多条指针的定义显示，该方法要求提供指针的数值、指针的颜色，系统根据指针的数值计算出指针的角度，待后续绘制仪表时使用。

仪表盘的显示：通过调用对象drawDashboard方法，将对象显示出来。drawDashboard方法，为绘制仪表盘的方法，根据传入的参数值，可以分对表面的各数据进行绘制。绘制刻度分级段，根据传入的刻度值段对象数组，取每一个刻度值段对象的开始角度与结束角度，以指定的颜色画出分级段区间。 绘制大刻度线，根据传入参数，计算出第一个大刻度的角度，通过绘制函数，在盘面上绘制出大刻度线，再根据循环处理画出每个大刻度线。绘制小刻度线，根据传入参数，计算出第一个小刻度的角度，通过绘制函数，在盘面上绘制出小刻度线，再根据循环处理画出每个小刻度线。绘制仪表盘指针，根据传入的各指针对象，计算出指针的角度值，以指定的颜色，在盘面上画出对应的指针。

本实施例的部分编程过程如下：

<s:BorderContainer id="bcChart" width="100%" height="100%" borderVisible="false" borderWeight="1">

<dashboard: DTMDashBoard=" pDashBoard"  totalAngle="270" proportion="70" width="100%" height="100%" horizontalCenter="0" verticalCenter="0">

</dashboard: DTMDashBoard>

</s:BorderContainer>

//显示指针名称

_pDashBoard.displayPointerName=false;

//定义最大刻度

_pDashBoard.maxScale=100;//最大值 

//定义最小刻度

_pDashBoard.minScale=0;

//分段圆环宽度，以百分比为单位

_pDashBoard.cirqueSegmentWidth=8;

//刻度步长

_pDashBoard.scaleStep    = 2;

//刻度大步长

_pDashBoard.scaleBigStep = 5;

//数据名称

_pDashBoard.valueName=sUnit;

//数据名称格式

var pFormat : TextFormat = new TextFormat();

pFormat.size = 32;

pFormat.bold = true;

pFormat.color = 0x858585;

pFormat.font = "微软繁线体";

_pDashBoard.valueNameFormat = pFormat;

//数据名称Y位置 

_pDashBoard.valueNamePosition = 1.30;

//中心点圆填充色

_pDashBoard.centerDotColor=0x000000;

//内环填充色

_pDashBoard.innerCirqueColor=0x4EA1F1;

_pDashBoard.addPointer(Number(oItem.toString()),nColor,80,oItem.title);

_pDashBoard.drawDashboard()。

除上述实施例外，本发明还可以有其他实施方式。凡采用等同替换或等效变换形成的技术方案，均落在本发明要求的保护范围。

Claims (5)

1.一种用于数据展示基于Flash技术的仪表盘构建方法，其特征在于：按以下步骤进行：

㈠新建一个flash应用程序，在该应用程序中绘制仪表盘容器，在仪表盘容器最外层套上BorderContainer用于边框外观和背景的填充，并放置一个仪表盘对象，该数据展示仪表盘运用flash中的dashborad: DTMDashBoard进行数据展示；

㈡仪表盘位置大小定义：通过width和height属性设置仪表盘的大小，通过proportion属性来设置仪表盘的半径，上述属性仪表盘的盘面配置完成后，通过AS角本完成对仪表盘数据的赋值操作；

㈢仪表盘显示风格配置：通过totalAngle属性设置仪表盘的显示的最大弧度，通过maxScale和minScale属性来设置仪表盘显示的最大刻度与最小刻度，通过scaleStep属性设置每小刻度的步长，通过scaleBigStep属性设置每一大格中小格的数量，通过valueName属性设置仪表盘的显示单位，通过addCirqueSegment方法定义出仪表盘上刻度的分级情况，以更醒目的显示数据区间；

㈣仪表盘进行显示数值设置：通过对象的addPointer方法将多条指针的数据添加到仪表盘；

㈤仪表盘的显示：通过调用对象drawDashboard方法，将对象显示出来。

2.如权利要求1所述的用于数据展示基于Flash技术的仪表盘构建方法，其特征在于：所述步骤㈡中，通过定义仪表盘所在画布的大小属性的width、height进行配置，来控制仪表盘显示的大小；

对于proportion属性表示仪表在画布上的显示比例，通过下列公式进行计算，得出仪表盘的实际半径值：

仪表盘的半径=min(画布的宽度，画布的高度) *显示比例/2。

3.如权利要求1所述的用于数据展示基于Flash技术的仪表盘构建方法，其特征在于：所述步骤㈢中，对于totalAngle属性是表示仪表盘的盘面显示的圆弧的大小，在构造仪表盘的盘面时，先根据画布的大小与仪表盘的半径，计算出仪表盘的盘中心点在画布上的位置坐标，根据totalAngle属性设置表盘的弧度计算出整个表盘的开始角度与结束角度，再根据、中心点位置和半径大小，计算出开始角度点的位置与结束角度点的位置，通过上述坐标点，绘制出表盘的轮廓；

maxScale、minScale是设置表盘上最大刻度、最小刻度值，scaleStep表示仪表盘上第一小格的大小，scaleBigStep是表示表面上每一大格是小格的数量，通过上述四个参数，可以计算表面上要绘制的大格的数量：

大格的数量=(maxScale -minScale)/(scaleBigStep* scaleStep)，

对于出现大格的数量值为非整数时，系统自动加1取整；根据每一小刻度与刻度的，分别计算每一刻度的开始与结束角度，等后续绘制仪表盘时使用；

在仪表盘中添加一个文本框控件，根据传入的valueName显示仪表盘的单位或一个标识信息，电压表显示“V”，电流表显示“A”等字样；

通过addCirqueSegment方法，定义仪表盘刻度的分级情况，该方法传入刻度值段，根据传入的多段刻度值段，计算出每段对应的开始角度与结束角度，待后续绘制仪表盘时使用。

4.如权利要求1所述的用于数据展示基于Flash技术的仪表盘构建方法，其特征在于：所述步骤㈣中，通过addPointer方法，定义仪表盘上指针数据对象，本方法支持多条指针的定义显示，该方法要求提供指针的数值、指针的颜色，根据指针的数值计算出指针的角度，待后续绘制仪表时使用。

5.如权利要求1所述的用于数据展示基于Flash技术的仪表盘构建方法，其特征在于：所述步骤㈤中，drawDashboard方法为绘制仪表盘的方法，根据传入的参数值，分对表面的各数据进行绘制；

绘制刻度分级段，根据传入的刻度值段对象数组，取每一个刻度值段对象的开始角度与结束角度，以指定的颜色画出分级段区间； 

绘制大刻度线，根据传入参数，计算出第一个大刻度的角度，通过绘制函数，在盘面上绘制出大刻度线，再根据循环处理画出每个大刻度线；

绘制小刻度线，根据传入参数，计算出第一个小刻度的角度，通过绘制函数，在盘面上绘制出小刻度线，再根据循环处理画出每个小刻度线；

绘制仪表盘指针，根据传入的各指针对象，计算出指针的角度值，以指定的颜色，在盘面上画出对应的指针。