CN104035785B - 双轴曲线图绘制方法和装置 - Google Patents

Abstract

本发明提供了一种双轴曲线图绘制方法和装置。涉及计算机应用领域；解决了现有双轴曲线绘制方式造成代码部分冗余的问题。该方法包括：根据需要调用一个或多个双轴曲线图绘制控件；分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式；各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图。本发明提供的技术方案适用于曲线图绘制，实现了高效的双轴曲线绘制。

Description

双轴曲线图绘制方法和装置

技术领域

本发明涉及计算机应用领域，尤其涉及一种双轴曲线图绘制方法和装置。

背景技术

目前绘制曲线图的方法也很多，包括绘制双轴的曲线图方法，无论是那种方法，他们都是基于API提供的接口实现绘制图形，大致思路是当需要绘制双轴曲线图时，编写静态接口实现，其中有属性可以设置曲线图的样式，我们可以先定义一个曲线图控件，然后对该控件定义一个唯一标志符号，还可以定义其长和宽的大小。定义完成后，需要在该控件中添加横坐标和纵坐标的样式。横坐标大部分一般是时间轴，该样式可以重新定义他的显示格式，而且需要设置是否会自动按一定间隔显示刻度在横坐标上。然后需要把定义好的样式指定给横坐标轴。然后还的需要定义一个纵坐标的样式，该坐标可以指定纵坐标显示的最小值和最大值，在把定义好的样式指定到纵坐标轴。然后开始定义线，定义线的标准是如果想要显示几条线，就要定义几条线，如果线的数量很多，就会这里定义好多线条，而且每条线条指定一种颜色，同时还要给每条线指定显示的名称，且还需要数据源指定到每条线上，包括对应的横坐标的数据源都需要单独指定，最后可以设置线的显示样式，所有以上工作完成才可以绘制一个标准的曲线图。这样不仅会造成代码部分冗余还会造成代码的可读性比较差。这种方法后来虽然有过改善，但是效果也不是很好。

发明内容

本发明提供了一种双轴曲线图绘制方法和装置，解决了现有双轴曲线绘制方式造成代码部分冗余的问题。

一种双轴曲线图绘制方法，包括：

根据需要调用一个或多个双轴曲线图绘制控件；

分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式；

各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图。

优选的，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图包括：

绘制出水平轴，对所述水平轴做渲染处理；

给所述水平轴绑定数据源同时对显示的值进行格式化；

绘制两条纵轴，两条纵轴分别绑定数据源，且分别配置显示模式而且实现自适应调节纵坐标。

优选的，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图还包括：

根据所述变量设置来决定整个曲线图显示的比例。

优选的，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图还包括：

在所述变量配置设置了移动频率时，所述双轴曲线图绘制控件根据所述移动频率进行数据源的加载，移动所述双轴曲线图。

优选的，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图还包括：

在需要设置的变量部分或全部没有重新设置时，根据默认方式绘制所述双轴曲线图。

本发明还提供了一种双轴曲线图绘制装置，包括：

控件调用模块，用于根据需要调用一个或多个双轴曲线图绘制控件；

变量设置模块，用于分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式；

绘制模块，用于各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图。

优选的，所述绘制模块包括：

水平轴绘制单元，用于绘制出水平轴，对所述水平轴做渲染处理，并给所述水平轴绑定数据源同时对显示的值进行格式化；

纵轴绘制单元，用于绘制两条纵轴，两条纵轴分别绑定数据源，且分别配置显示模式而且实现自适应调节纵坐标。

优选的，所述绘制模块还包括：

显示比例调整单元，用于根据所述变量设置来决定整个曲线图显示的比例。

优选的，所述绘制模块还包括：

曲线移动单元，用于在所述变量配置设置了移动频率时，所述双轴曲线图绘制控件根据所述移动频率进行数据源的加载，移动所述双轴曲线图。

本发明提供了一种双轴曲线图绘制方法和装置，根据需要调用一个或多个双轴曲线图绘制控件，分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图，以控件作为绘制双轴曲线图的功能单元，实现了高效的双轴曲线绘制，解决了现有双轴曲线绘制方式造成代码部分冗余的问题。

附图说明

图1为本发明的实施例一调用双轴曲线图绘制控制进行双轴曲线绘制的流程图；

图2为本发明的实施例二提供的一种双轴曲线图绘制装置的结构示意图；

图3为图2中绘制模块203的结构示意图。

具体实施方式

现有的双轴曲线绘制方式会造成代码部分冗余还会造成代码的可读性比较差。这种方法后来虽然有过改善，但是效果也不是很好。

针对以上所有的问题，本发明的实施例提供了一种双轴曲线绘制方法和装置，该方法很好的解决了在需要显示多个曲线图时，需要编辑很多的代码来实现每个曲线图。该方法不会造成混乱，且在做曲线移动时，也不需要设置编码，只需要定义好一个移动的变量值即可。这样就可以提高代码的可读性，而且性能也比较高，维护成本也比较低。

下面将结合附图及实施例对本发明的技术方案进行更详细的说明。

需要说明的是，如果不冲突，本发明实施例以及实施例中的各个特征可以相互结合，均在本发明的保护范围之内。另外，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

首先结合附图，对本发明的实施例一进行说明。

当页面需要动态添加多个不同的双轴曲线图控件(以下简称控件)时，根据需要调用一个或多个双轴曲线图绘制控件，添加控件(可通过将控件实现代码进行封装得到)时，分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式，只需要指定几个变量，通过对变量值的变化来作为控件的唯一标识。而且通过变量决定绘制曲线图的样式还可以决定曲线图的显示方式。且该方法还支持曲线图自动移动的功能。

然后，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图。当需要绘制带有双轴的曲线图时，调用已实现该曲线图的接口方法即可，调用时定义好变量，该变量确定曲线图的样式和显示方式。该模块是一个通用的模块，所以只要是显示双轴的曲线图时，都可以实现自动绘制的方法。通用自适应双轴曲线图的绘制原理是先绘制出水平轴，然后对水平轴做渲染处理，同时给水平轴绑定数据源同时对显示的值进行格式化，然后绘制两条纵轴，两条纵轴分别绑定数据源，且分别配置显示模式而且实现自适应调节纵坐标。同时通过调用者设置的外部变量来决定整个曲线图显示的比例，如果外部调用设置了曲线图实时移动效果的变量，该图会自动移动曲线。如果设置了多个变量，还可以配置曲线的颜色和显示方式。

具体绘制流程如下：

先检查关于曲线图的变量设置，如果这些变量设置都已设置好了，就按设置的变量值进行绘图；如果部分或者全部变量没有重新设置，就按默认的绘图方式进行绘制。然后根据设置的数据源变量自动配置线条，配置的过程中可以单独配置线条的显示方式和显示颜色。在根据设置的数据源自动识别横坐标和纵坐标绑定方式，且该图绘制会自动自适应显示和大小配置，不需要人为干预，他的大小根据外部调用容器的大小决定，如果外部容器是自适应的，那该图也会自动适应大小，反之，如果外部容器不是自适应的，则该图就根据外部容器一样大。下面是具体的实现方式：

首先定义了曲线图横轴的变量,包括显示横轴的数据源指定：

<mx:horizontalAxis>

<mx:CategoryAxis id＝"infiniband_hor"categoryField＝"time"/>

</mx:horizontalAxis>

然后指定对横轴样式的定义：

<mx:horizontalAxisRenderers>

<mx:AxisRenderer placement＝"bottom"axis＝"{infiniband_hor}"canDropLabels＝"true"/>

</mx:horizontalAxisRenderers>

指定对纵轴样式的定义：

<mx:verticalAxisRenderers>

<mx:AxisRenderer placement＝"left"styleName＝"customTicks"axisStroke＝"{ystroke}"

tickLength＝"{0}"labelGap＝"0">

指定线的数据源：

<mx:axis>

<mx:LinearAxis title＝"Pktsize"id＝"infinibandleftvaxis"minimum＝"0"/>

</mx:axis>

</mx:AxisRenderer>

指定对线样式的指定：

<mx:AxisRenderer placement＝"right"styleName＝"customTicks"axisStroke＝"{ystroke}"

tickLength＝"{0}"labelGap＝"0">

<mx:axis>

<mx:LinearAxis title＝"speed"id＝"infinibandrightvaxis"minimum＝"0"/>

</mx:axis>

</mx:AxisRenderer>

</mx:verticalAxisRenderers>

<mx:series>

对线的效果进行指定：

<mx:LineSerieslineStroke＝"{stroke_memuse}"horizontalAxis＝"{infiniband_hor}"yField＝"ib_XmitPktsize"form＝"curve"verticalAxis＝"{infinibandleftvaxis}"displayName＝"ib_XmitPktsize_MB">

</mx:LineSeries>

<mx:LineSerieslineStroke＝"{stroke_memuse2}"horizontalAxis＝"{infiniband_hor}"yField＝"ib_RcvPktsize"form＝"curve"verticalAxis＝"{infinibandleftvaxis}"displayName＝"ib_RcvPktsize_MB

">

</mx:LineSeries>

<mx:LineSerieslineStroke＝"{stroke_memuse3}"horizontalAxis＝"{infiniband_hor}"yField＝"ib_XmitData_MB"form＝"curve"verticalAxis＝"{infinibandrightvaxis}"displayName＝"ib_XmitData_MB">

</mx:LineSeries>

<mx:LineSerieslineStroke＝"{stroke_cpusys}"horizontalAxis＝"{infiniband_hor}"yField＝"ib_RcvData_MB"form＝"curve"verticalAxis＝"{infinibandrightvaxis}"displayName＝"ib_RcvData_MB">

</mx:LineSeries>

</mx:series>

所有的样式定义好后，可以在此基础上把曲线图的网格自动加入进入，这样形成的曲线图有横纵交叉的网格线图，具体的实现方式如下：

<mx:backgroundElements>

<mx:GridLines

direction＝"both"

horizontalTickAligned＝"false"

verticalTickAligned＝"false">

<mx:verticalStroke>

<mx:Stroke color＝"#a6cecd"

weight＝"1"

alpha＝"0.4"/>

</mx:verticalStroke>

<mx:horizontalStroke>

<mx:Stroke color＝"#a6cecd"

weight＝"1"

alpha＝"0.6"/>

</mx:horizontalStroke>

</mx:GridLines>

</mx:backgroundElements>

在上面的代码中，可以对横坐标的格式进行格式化的操作，具体的实现方式如下：

到此所有的绘制工作就已全部完成。

二：通用的双轴曲线图自移动方法

当要对双轴曲线图增加自移动方法时，只需要在配置变量时指定一个移动频率即可完成曲线图自移动方式。他的原理就是会自动按照给定的频率进行数据源的加载。加载完成后，该图提供一个默认的初始化操作方法，他会自动根据数据源的不同进行双轴曲线图的更新操作，这样就形成了曲线图自移动功能。具体的执行过程如下：

这样调用者就可以轻松的做到双轴曲线图自动移动的功能。此时整个通用自适应双轴曲线图绘制方法已全部完成。

具体调用流程可参考图1。

下面结合附图，对本发明的实施例二进行说明。

本发明实施例提供了一种双轴曲线图绘制装置，该装置的结构如图2所示，包括：

控件调用模块201，用于根据需要调用一个或多个双轴曲线图绘制控件；

变量设置模块202，用于分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式；

绘制模块203，用于各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图。

优选的，所述绘制模块203的结构如图3所示，包括：

水平轴绘制单元2031，用于绘制出水平轴，对所述水平轴做渲染处理，并给所述水平轴绑定数据源同时对显示的值进行格式化；

纵轴绘制单元2032，用于绘制两条纵轴，两条纵轴分别绑定数据源，且分别配置显示模式而且实现自适应调节纵坐标。

优选的，所述绘制模块203还包括：

显示比例调整单元2033，用于根据所述变量设置来决定整个曲线图显示的比例。

优选的，所述绘制模块203还包括：

曲线移动单元2034，用于在所述变量配置设置了移动频率时，所述双轴曲线图绘制控件根据所述移动频率进行数据源的加载，移动所述双轴曲线图。

本发明的实施例提供了一种双轴曲线图绘制方法和装置，根据需要调用一个或多个双轴曲线图绘制控件，分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图，以控件作为绘制双轴曲线图的功能单元，实现了高效的双轴曲线绘制，解决了现有双轴曲线绘制方式造成代码部分冗余的问题。

本领域普通技术人员可以理解上述方法中的全部或部分步骤可通过程序来指令相关硬件完成，所述程序可以存储于计算机可读存储介质中，如只读存储器、磁盘或光盘等。可选地，上述实施例的全部或部分步骤也可以使用一个或多个集成电路来实现。相应地，上述实施例中的各模块/单元可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本发明不限制于任何特定形式的硬件和软件的结合。

当然，本发明还可有其他多种实施例，在不背离本发明精神及其实质的情况下，熟悉本领域的技术人员当可根据本发明作出各种相应的改变和变形，但这些相应的改变和变形都应属于本发明的权利要求的保护范围。

Claims (7)

1.一种双轴曲线图绘制方法，其特征在于，包括：

根据需要调用一个或多个双轴曲线图绘制控件；

分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式；

各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图；

其中，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图还包括：

在所述变量设置设置了移动频率时，所述双轴曲线图绘制控件根据所述移动频率进行数据源的加载，移动所述双轴曲线图。

2.根据权利要求1所述的双轴曲线图绘制方法，其特征在于，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图包括：

绘制出水平轴，对所述水平轴做渲染处理；

给所述水平轴绑定数据源同时对显示的值进行格式化；

绘制两条纵轴，两条纵轴分别绑定数据源，且分别配置显示模式而且实现自适应调节纵坐标。

3.根据权利要求2所述的双轴曲线图绘制方法，其特征在于，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图还包括：

根据所述变量设置来决定整个曲线图显示的比例。

4.根据权利要求2所述的双轴曲线图绘制方法，其特征在于，各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图还包括：

在需要设置的变量部分或全部没有重新设置时，根据默认方式绘制所述双轴曲线图。

5.一种双轴曲线图绘制装置，其特征在于，包括：

控件调用模块，用于根据需要调用一个或多个双轴曲线图绘制控件；

变量设置模块，用于分别对各个所述双轴曲线图绘制控件进行变量设置，确定待绘制的双轴曲线图的样式和显示方式；

绘制模块，用于各个双轴曲线图绘制控件根据各自对应的变量设置绘制双轴曲线图；

其中，所述绘制模块还包括：

曲线移动单元，用于在所述变量设置设置了移动频率时，所述双轴曲线图绘制控件根据所述移动频率进行数据源的加载，移动所述双轴曲线图。

6.根据权利要求5所述的双轴曲线图绘制装置，其特征在于，所述绘制模块包括：

水平轴绘制单元，用于绘制出水平轴，对所述水平轴做渲染处理，并给所述水平轴绑定数据源同时对显示的值进行格式化；

纵轴绘制单元，用于绘制两条纵轴，两条纵轴分别绑定数据源，且分别配置显示模式而且实现自适应调节纵坐标。

7.根据权利要求6所述的双轴曲线图绘制装置，其特征在于，所述绘制模块还包括：

显示比例调整单元，用于根据所述变量设置来决定整个曲线图显示的比例。