雙軸曲線圖繪制方法和裝置制造方法
【專利摘要】本發(fā)明提供了一種雙軸曲線圖繪制方法和裝置。涉及計算機應用領(lǐng)域；解決了現(xiàn)有雙軸曲線繪制方式造成代碼部分冗余的問題。該方法包括：根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件；分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式；各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖。本發(fā)明提供的技術(shù)方案適用于曲線圖繪制，實現(xiàn)了高效的雙軸曲線繪制。
【專利說明】雙軸曲線圖繪制方法和裝置
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計算機應用領(lǐng)域，尤其涉及一種雙軸曲線圖繪制方法和裝置。
【背景技術(shù)】
[0002]目前繪制曲線圖的方法也很多，包括繪制雙軸的曲線圖方法，無論是那種方法，他們都是基于API提供的接口實現(xiàn)繪制圖形，大致思路是當需要繪制雙軸曲線圖時，編寫靜態(tài)接口實現(xiàn)，其中有屬性可以設(shè)置曲線圖的樣式，我們可以先定義一個曲線圖控件，然后對該控件定義一個唯一標志符號，還可以定義其長和寬的大小。定義完成后，需要在該控件中添加橫坐標和縱坐標的樣式。橫坐標大部分一般是時間軸，該樣式可以重新定義他的顯示格式，而且需要設(shè)置是否會自動按一定間隔顯示刻度在橫坐標上。然后需要把定義好的樣式指定給橫坐標軸。然后還的需要定義一個縱坐標的樣式，該坐標可以指定縱坐標顯示的最小值和最大值，在把定義好的樣式指定到縱坐標軸。然后開始定義線，定義線的標準是如果想要顯示幾條線，就要定義幾條線，如果線的數(shù)量很多，就會這里定義好多線條，而且每條線條指定一種顏色，同時還要給每條線指定顯示的名稱，且還需要數(shù)據(jù)源指定到每條線上，包括對應的橫坐標的數(shù)據(jù)源都需要單獨指定，最后可以設(shè)置線的顯示樣式，所有以上工作完成才可以繪制一個標準的曲線圖。這樣不僅會造成代碼部分冗余還會造成代碼的可讀性比較差。這種方法后來雖然有過改善，但是效果也不是很好。

【發(fā)明內(nèi)容】

[0003]本發(fā)明提供了一種雙軸曲線圖繪制方法和裝置，解決了現(xiàn)有雙軸曲線繪制方式造成代碼部分冗余的問題。
[0004]一種雙軸曲線圖繪制方法，包括:
[0005]根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件；
[0006]分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式；
[0007]各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖。
[0008]優(yōu)選的，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖包括:
[0009]繪制出水平軸，對所述水平軸做渲染處理；
[0010]給所述水平軸綁定數(shù)據(jù)源同時對顯示的值進行格式化；
[0011]繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實現(xiàn)自適應調(diào)節(jié)縱坐標。
[0012]優(yōu)選的，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖還包括:
[0013]根據(jù)所述變量設(shè)置來決定整個曲線圖顯示的比例。
[0014]優(yōu)選的，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖還包括:
[0015]在所述變量配置設(shè)置了移動頻率時，所述雙軸曲線圖繪制控件根據(jù)所述移動頻率進行數(shù)據(jù)源的加載，移動所述雙軸曲線圖。
[0016]優(yōu)選的，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖還包括:
[0017]在需要設(shè)置的變量部分或全部沒有重新設(shè)置時，根據(jù)默認方式繪制所述雙軸曲線圖。
[0018]本發(fā)明還提供了一種雙軸曲線圖繪制裝置，包括:
[0019]控件調(diào)用模塊，用于根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件；
[0020]變量設(shè)置模塊，用于分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式；
[0021]繪制模塊，用于各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖。
[0022]優(yōu)選的，所述繪制模塊包括:
[0023]水平軸繪制單元，用于繪制出水平軸，對所述水平軸做渲染處理，并給所述水平軸綁定數(shù)據(jù)源同時對顯示的值進行格式化；
[0024]縱軸繪制單元，用于繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實現(xiàn)自適應調(diào)節(jié)縱坐標。
[0025]優(yōu)選的，所述繪制模塊還包括:
[0026]顯示比例調(diào)整單元，用于根據(jù)所述變量設(shè)置來決定整個曲線圖顯示的比例。
[0027]優(yōu)選的，所述繪制模塊還包括:
[0028]曲線移動單元，用于在所述變量配置設(shè)置了移動頻率時，所述雙軸曲線圖繪制控件根據(jù)所述移動頻率進行數(shù)據(jù)源的加載，移動所述雙軸曲線圖。
[0029]本發(fā)明提供了一種雙軸曲線圖繪制方法和裝置，根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件，分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖，以控件作為繪制雙軸曲線圖的功能單元，實現(xiàn)了高效的雙軸曲線繪制，解決了現(xiàn)有雙軸曲線繪制方式造成代碼部分冗余的問題。
【專利附圖】

【附圖說明】
[0030]圖1為本發(fā)明的實施例一調(diào)用雙軸曲線圖繪制控制進行雙軸曲線繪制的流程圖；
[0031]圖2為本發(fā)明的實施例二提供的一種雙軸曲線圖繪制裝置的結(jié)構(gòu)示意圖；
[0032]圖3為圖2中繪制模塊203的結(jié)構(gòu)示意圖。
【具體實施方式】
[0033]現(xiàn)有的雙軸曲線繪制方式會造成代碼部分冗余還會造成代碼的可讀性比較差。這種方法后來雖然有過改善，但是效果也不是很好。
[0034]針對以上所有的問題，本發(fā)明的實施例提供了一種雙軸曲線繪制方法和裝置，該方法很好的解決了在需要顯示多個曲線圖時，需要編輯很多的代碼來實現(xiàn)每個曲線圖。該方法不會造成混亂，且在做曲線移動時，也不需要設(shè)置編碼，只需要定義好一個移動的變量值即可。這樣就可以提高代碼的可讀性，而且性能也比較高，維護成本也比較低。
[0035]下面將結(jié)合附圖及實施例對本發(fā)明的技術(shù)方案進行更詳細的說明。
[0036]需要說明的是，如果不沖突，本發(fā)明實施例以及實施例中的各個特征可以相互結(jié)合，均在本發(fā)明的保護范圍之內(nèi)。另外，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同于此處的順序執(zhí)行所示出或描述的步驟。
[0037]首先結(jié)合附圖，對本發(fā)明的實施例一進行說明。
[0038]當頁面需要動態(tài)添加多個不同的雙軸曲線圖控件(以下簡稱控件)時，根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件，添加控件(可通過將控件實現(xiàn)代碼進行封裝得到)時，分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式，只需要指定幾個變量，通過對變量值的變化來作為控件的唯一標識。而且通過變量決定繪制曲線圖的樣式還可以決定曲線圖的顯示方式。且該方法還支持曲線圖自動移動的功能。
[0039]然后，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖。當需要繪制帶有雙軸的 曲線圖時，調(diào)用已實現(xiàn)該曲線圖的接口方法即可，調(diào)用時定義好變量，該變量確定曲線圖的樣式和顯示方式。該模塊是一個通用的模塊，所以只要是顯示雙軸的曲線圖時，都可以實現(xiàn)自動繪制的方法。通用自適應雙軸曲線圖的繪制原理是先繪制出水平軸，然后對水平軸做渲染處理，同時給水平軸綁定數(shù)據(jù)源同時對顯示的值進行格式化，然后繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實現(xiàn)自適應調(diào)節(jié)縱坐標。同時通過調(diào)用者設(shè)置的外部變量來決定整個曲線圖顯示的比例，如果外部調(diào)用設(shè)置了曲線圖實時移動效果的變量，該圖會自動移動曲線。如果設(shè)置了多個變量，還可以配置曲線的顏色和顯示方式。
[0040]具體繪制流程如下:
[0041]先檢查關(guān)于曲線圖的變量設(shè)置，如果這些變量設(shè)置都已設(shè)置好了，就按設(shè)置的變量值進行繪圖；如果部分或者全部變量沒有重新設(shè)置，就按默認的繪圖方式進行繪制。然后根據(jù)設(shè)置的數(shù)據(jù)源變量自動配置線條，配置的過程中可以單獨配置線條的顯示方式和顯示顏色。在根據(jù)設(shè)置的數(shù)據(jù)源自動識別橫坐標和縱坐標綁定方式，且該圖繪制會自動自適應顯示和大小配置，不需要人為干預，他的大小根據(jù)外部調(diào)用容器的大小決定，如果外部容器是自適應的，那該圖也會自動適應大小，反之，如果外部容器不是自適應的，則該圖就根據(jù)外部容器一樣大。下面是具體的實現(xiàn)方式:
[0042]首先定義了曲線圖橫軸的變量，包括顯示橫軸的數(shù)據(jù)源指定:
[0043]<mx: horizontalAxis>
[0044]<mx: CategoryAxis id = 〃infiniband—hor〃categoryField = 〃time〃/>
[0045]</ mx: horizontalAxis>
[0046]然后指定對橫軸樣式的定義:
[0047]<mx:horizontalAxisRenderers>
[0048]〈mx: Axi sRenderer placement = 〃bottom〃axis = 〃 {inf iniband_hor}^canDropLabels = 〃true〃/>
[0049]</mx:horizontalAxisRenderers>[0050]指定對縱軸樣式的定義:
[0051 ] <mx: vert icalAxi sRenderer s>
[0052]<mx:AxisRenderer placement = 〃left〃styleName = 〃customTicks〃axisStroke=〃{ystroke}〃
[0053]tickLength = " {0} "IabelGap = "0">
[0054]指定線的數(shù)據(jù)源:
[0055]<mx:axis>
[0056]〈mx:LinearAxis title = 〃Pktsize〃id = 〃infinibandleftvaxis〃minimum ="07>
[0057]</mx:axis>
[0058]</ mx: Axi sRenderer〉
[0059]指定對線樣式的指定:
[0060]<mx:AxisRenderer placement = 〃right〃styleName = 〃customTicks〃axisStroke=〃{ystroke}〃
[0061]tickLength = " {0} "IabelGap = "0">
[0062]<mx:axis>
[0063]〈mx:LinearAxis title = 〃speed〃id = 〃infinibandrightvaxis〃minimum = 〃0〃/>
[0064]</mx:axis>
[0065]</ mx: Axi sRenderer〉
[0066]</mx: vert icalAxi sRenderer s>
[0067]〈mx: series〉
[0068]對線的效果進行指定:
[0069]<mx:LineSeriesIineStroke = 〃{stroke_memuse}"horizontalAxis ="{infiniband—hor} 〃yField = "ib—XmitPktsize〃form = "curve〃verticalAxis = "{infinibandleftvaxis}^displayName = 〃ib—XmitPktsize—MB〃>
[0070]〈/mx:LineSeries>
[0071]<mx:LineSeriesIineStroke = 〃{stroke_memuse2}^horizontalAxis ="{infiniband—hor} 〃yField = "ib—RcvPktsize〃form = "curve〃verticalAxis = "{infinibandleftvaxis}^displayName = 〃ib_RcvPktsize—MB
[0072]〃>
[0073]〈/mx: LineSer ies>
[0074]<mx:LineSeriesIineStroke = 〃{stroke_memuse3}^horizontalAxis =〃 {infiniband—hor} 〃yField = 〃ib—XmitData—MB〃form = ^curve^verticalAxis = 〃 {infinibandrightvaxis}^displayName = 〃ib—XmitData—MB〃>
[0075]〈/mx: LineSer ies>
[0076]<mx:LineSeriesIineStroke = 〃{stroke_cpusys}"horizontalAxis =〃 {infiniband—hor} 〃yField = 〃ib—RcvData—MB〃form = 〃curve〃verticalAxis = 〃 {infinibandrightvaxis}"displayName = 〃ib_RcvData—MB〃>
[0077]〈/mx: Lin eSer ies>[0078]〈/mx: series〉
[0079]所有的樣式定義好后，可以在此基礎(chǔ)上把曲線圖的網(wǎng)格自動加入進入，這樣形成的曲線圖有橫縱交叉的網(wǎng)格線圖，具體的實現(xiàn)方式如下:
[0080]<mx: backgroundElements>
[0081 ] <mx: GridLines
[0082]direct1n = "both"
[0083]horizontalTickAligned = "false"
[0084]verticalTickAligned = "false"〉
[0085]<mx: verticalStroke>
[0086]〈mx:Stroke color = "#a6cecd〃
[0087]weight = "I"
[0088]alpha = 〃0.4"/>
[0089]</mx: vertical Stroke)
[0090]<mx: horizontal Stroke)
[0091]〈mx:Stroke color = "#a6cecd〃
[0092]weight = "1"
[0093]alpha = 〃0.6"/>
[0094]</mx: horizontal Stroke)
[0095]〈/mx: GridLines>
[0096]</mx: backgroundElements>
[0097]在上面的代碼中，可以對橫坐標的格式進行格式化的操作，具體的實現(xiàn)方式如下:
[0098]
【權(quán)利要求】
1.一種雙軸曲線圖繪制方法，其特征在于，包括: 根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件； 分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式； 各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖。
2.根據(jù)權(quán)利要求1所述的雙軸曲線圖繪制方法，其特征在于，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖包括: 繪制出水平軸，對所述水平軸做渲染處理； 給所述水平軸綁定數(shù)據(jù)源同時對顯示的值進行格式化； 繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實現(xiàn)自適應調(diào)節(jié)縱坐標。
3.根據(jù)權(quán)利要求2所述的雙軸曲線圖繪制方法，其特征在于，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖還包括: 根據(jù)所述變量設(shè)置來決定整個曲線圖顯示的比例。
4.根據(jù)權(quán)利要求2所述的雙軸曲線圖繪制方法，其特征在于，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖還包括: 在所述變量配置設(shè)置了移動頻率時，所述雙軸曲線圖繪制控件根據(jù)所述移動頻率進行數(shù)據(jù)源的加載，移動所述雙軸曲線圖。
5.根據(jù)權(quán)利要求2所述的所述的雙軸曲線圖繪制方法，其特征在于，各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖還包括: 在需要設(shè)置的變量部分或全部沒有重新設(shè)置時，根據(jù)默認方式繪制所述雙軸曲線圖。
6.一種雙軸曲線圖繪制裝置，其特征在于，包括: 控件調(diào)用模塊，用于根據(jù)需要調(diào)用一個或多個雙軸曲線圖繪制控件； 變量設(shè)置模塊，用于分別對各個所述雙軸曲線圖繪制控件進行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式； 繪制模塊，用于各個雙軸曲線圖繪制控件根據(jù)各自對應的變量設(shè)置繪制雙軸曲線圖。
7.根據(jù)權(quán)利要求6所述的雙軸曲線圖繪制裝置，其特征在于，所述繪制模塊包括: 水平軸繪制單元，用于繪制出水平軸，對所述水平軸做渲染處理，并給所述水平軸綁定數(shù)據(jù)源同時對顯示的值進行格式化； 縱軸繪制單元，用于繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實現(xiàn)自適應調(diào)節(jié)縱坐標。
8.根據(jù)權(quán)利要求7所述的雙軸曲線圖繪制裝置，其特征在于，所述繪制模塊還包括: 顯示比例調(diào)整單元，用于根據(jù)所述變量設(shè)置來決定整個曲線圖顯示的比例。
9.根據(jù)權(quán)利要求7所述的雙軸曲線圖繪制裝置，其特征在于，所述繪制模塊還包括: 曲線移動單元，用于在所述變量配置設(shè)置了移動頻率時，所述雙軸曲線圖繪制控件根據(jù)所述移動頻率進行數(shù)據(jù)源的加載，移動所述雙軸曲線圖。
【文檔編號】G06F9/44GK104035785SQ201410309203
【公開日】2014年9月10日 申請日期:2014年7月1日 優(yōu)先權(quán)日:2014年7月1日
【發(fā)明者】段國棟 申請人:浪潮(北京)電子信息產(chǎn)業(yè)有限公司