Silverlight学习-创建一个信息系统中趋势曲线图库(三)

Silverlight学习-创建一个信息系统中趋势曲线图库(三),第1张

概述        有了图形绘制库,在此基础上就可以开发工业用曲线显示图库了。         首先应该分析工业用曲线图的几个构成部分,这样便于开发出灵活配置,且通用性强的绘制库。         先看一下一个典型的趋势曲线。如图1所示,整个曲线的显示分为坐标轴区(可带网格底纹),Y轴区(多个y轴时)、曲线显示区、标题区和图例区几部分。 图1         X轴一般只有一个,当同时显示多条曲线时,Y

        有了图形绘制库,在此基础上就可以开发工业用曲线显示图库了。

        首先应该分析工业用曲线图的几个构成部分,这样便于开发出灵活配置,且通用性强的绘制库。

        先看一下一个典型的趋势曲线。如图1所示,整个曲线的显示分为坐标轴区(可带网格底纹),Y轴区(多个y轴时)、曲线显示区、标题区和图例区几部分。

图1

        X轴一般只有一个,当同时显示多条曲线时,Y轴可能有多个,曲线显示区除曲线外,可能还有网格底纹,本文将其归为坐标轴的一部分。图例区和曲线标题区都是可选的,其位置可以动态设置。因此,设计这样一个曲线显示功能,应包含以下几个类:

Y轴类(YAsix):显示Y轴。如图2所示,图中示意性画出了一个“多余”的Y轴。有几种显示选项:只显示轴、显示轴数字刻度、显示轴文字说明(右置或左置)。轴可以设置有两种刻度,有数字标注的刻度(长刻度,显示横线长些)和无数字标注的刻度(短刻度,显示横线短些),笔者认为,如果开发出动态标注功能(纵横线交点随鼠标移动,动态显示交点数值),则两种刻度的设置就没有必要了。 X轴类(XAsix):显示Y轴。Y轴与X轴类似,但X轴一般只有一个,比Y轴要简单,出于简化设计,也可不单独设置该类,而将它包含在轴类中。

图2

轴类(Axis):组合X轴和Y轴,其中Y轴有多个(除去第一个)。应考虑以下几种情况:
1.      显示外框
2.      显示网格(必显示外框)
3.      X轴和Y轴的原点数据一样时,规定Y轴不显示。
4.      存在多个Y轴时,轴本身自带的一个可称为主Y轴(最靠近曲线的),添加Y轴类的顺序决定轴离曲线的远近。在给定刻度数字显示格式情况下,自动计算各Y轴的间隔。
5.      轴类保存一个总区域大小的结构体(计算得到)。
曲线显示类(DataShow):显示曲线。输入数值点,连线成曲线(显示模块一般不提供拟合功能,那属于数值处理,而非显示功能了),需要注意的是,对自动化设备采集的曲线,如果出现断点(某时刻因网络原因没有采集到数据),显示类应能处理。本文以折线方式显示曲线为主,其实,稍加修改就可以显示柱状图。 图例类(Lenged):它是曲线显示的辅助类,比较好处理。

        以上几个类构成了曲线显示的各个部分,它们之间需要共享的数据如图3所示。图例类需要知道个曲线的颜色和曲线显示的位置(便于自己定位)。曲线显示类和坐标类需要共享屏幕区域位置和图形的显示比例(数据空间到屏幕空间的位置映射比例)。

图3

最后一个类就是总的集成类(Curve),它包含了以上几个类,加上一个标题和总的显示区大小(需要计算得到)。该类包含的数据如下:

Curve类包含的主要数据

说明

曲线显示区域(x,y,wIDth,height)

计算后实际显示区域

原始区域,加上坐标、图例后必原始区域要大

曲线个数

 

曲线数据:

【原始数据(数值对)、

拟合数据(数值对)、

显示数据范围(一般要圆整)、XY轴显示比例(计算值)】{1..n}

为使显示美观,曲线最大宽度占显示区宽度的3/4,高度类推。

如果无需对曲线拟合,原始数据与拟合数据是一个数据源。

特殊情况下,可以增加保存原始数据显示位置数值(计算得到)。

颜色{1..n}

一条曲线的所有相关东西宜采用同一种颜色。单独设置,可多处共享

轴显示选项:

网格

边框

X轴{1}:

刻度文字显示

多少个分度

轴文字说明

轴文字显示位置区域

Y轴{1..n}:

刻度文字显示

多少个分度

轴文字说明

轴文字显示位置区域

 

图例选项:

是否显示

位置区域

说明文字{1..n}

 

        所有代码从略。

总结

以上是内存溢出为你收集整理的Silverlight学习-创建一个信息系统中趋势曲线图库(三)全部内容,希望文章能够帮你解决Silverlight学习-创建一个信息系统中趋势曲线图库(三)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1077179.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存