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

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

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

【附圖說(shuō)明】
[0030]圖1為本發(fā)明的實(shí)施例一調(diào)用雙軸曲線圖繪制控制進(jìn)行雙軸曲線繪制的流程圖；
[0031]圖2為本發(fā)明的實(shí)施例二提供的一種雙軸曲線圖繪制裝置的結(jié)構(gòu)示意圖；
[0032]圖3為圖2中繪制模塊203的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0033]現(xiàn)有的雙軸曲線繪制方式會(huì)造成代碼部分冗余還會(huì)造成代碼的可讀性比較差。這種方法后來(lái)雖然有過(guò)改善，但是效果也不是很好。
[0034]針對(duì)以上所有的問(wèn)題，本發(fā)明的實(shí)施例提供了一種雙軸曲線繪制方法和裝置，該方法很好的解決了在需要顯示多個(gè)曲線圖時(shí)，需要編輯很多的代碼來(lái)實(shí)現(xiàn)每個(gè)曲線圖。該方法不會(huì)造成混亂，且在做曲線移動(dòng)時(shí)，也不需要設(shè)置編碼，只需要定義好一個(gè)移動(dòng)的變量值即可。這樣就可以提高代碼的可讀性，而且性能也比較高，維護(hù)成本也比較低。
[0035]下面將結(jié)合附圖及實(shí)施例對(duì)本發(fā)明的技術(shù)方案進(jìn)行更詳細(xì)的說(shuō)明。
[0036]需要說(shuō)明的是，如果不沖突，本發(fā)明實(shí)施例以及實(shí)施例中的各個(gè)特征可以相互結(jié)合，均在本發(fā)明的保護(hù)范圍之內(nèi)。另外，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同于此處的順序執(zhí)行所示出或描述的步驟。
[0037]首先結(jié)合附圖，對(duì)本發(fā)明的實(shí)施例一進(jìn)行說(shuō)明。
[0038]當(dāng)頁(yè)面需要?jiǎng)討B(tài)添加多個(gè)不同的雙軸曲線圖控件(以下簡(jiǎn)稱控件)時(shí)，根據(jù)需要調(diào)用一個(gè)或多個(gè)雙軸曲線圖繪制控件，添加控件(可通過(guò)將控件實(shí)現(xiàn)代碼進(jìn)行封裝得到)時(shí)，分別對(duì)各個(gè)所述雙軸曲線圖繪制控件進(jìn)行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式，只需要指定幾個(gè)變量，通過(guò)對(duì)變量值的變化來(lái)作為控件的唯一標(biāo)識(shí)。而且通過(guò)變量決定繪制曲線圖的樣式還可以決定曲線圖的顯示方式。且該方法還支持曲線圖自動(dòng)移動(dòng)的功能。
[0039]然后，各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖。當(dāng)需要繪制帶有雙軸的 曲線圖時(shí)，調(diào)用已實(shí)現(xiàn)該曲線圖的接口方法即可，調(diào)用時(shí)定義好變量，該變量確定曲線圖的樣式和顯示方式。該模塊是一個(gè)通用的模塊，所以只要是顯示雙軸的曲線圖時(shí)，都可以實(shí)現(xiàn)自動(dòng)繪制的方法。通用自適應(yīng)雙軸曲線圖的繪制原理是先繪制出水平軸，然后對(duì)水平軸做渲染處理，同時(shí)給水平軸綁定數(shù)據(jù)源同時(shí)對(duì)顯示的值進(jìn)行格式化，然后繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實(shí)現(xiàn)自適應(yīng)調(diào)節(jié)縱坐標(biāo)。同時(shí)通過(guò)調(diào)用者設(shè)置的外部變量來(lái)決定整個(gè)曲線圖顯示的比例，如果外部調(diào)用設(shè)置了曲線圖實(shí)時(shí)移動(dòng)效果的變量，該圖會(huì)自動(dòng)移動(dòng)曲線。如果設(shè)置了多個(gè)變量，還可以配置曲線的顏色和顯示方式。
[0040]具體繪制流程如下:
[0041]先檢查關(guān)于曲線圖的變量設(shè)置，如果這些變量設(shè)置都已設(shè)置好了，就按設(shè)置的變量值進(jìn)行繪圖；如果部分或者全部變量沒(méi)有重新設(shè)置，就按默認(rèn)的繪圖方式進(jìn)行繪制。然后根據(jù)設(shè)置的數(shù)據(jù)源變量自動(dòng)配置線條，配置的過(guò)程中可以單獨(dú)配置線條的顯示方式和顯示顏色。在根據(jù)設(shè)置的數(shù)據(jù)源自動(dòng)識(shí)別橫坐標(biāo)和縱坐標(biāo)綁定方式，且該圖繪制會(huì)自動(dòng)自適應(yīng)顯示和大小配置，不需要人為干預(yù)，他的大小根據(jù)外部調(diào)用容器的大小決定，如果外部容器是自適應(yīng)的，那該圖也會(huì)自動(dòng)適應(yīng)大小，反之，如果外部容器不是自適應(yīng)的，則該圖就根據(jù)外部容器一樣大。下面是具體的實(shí)現(xiàn)方式:
[0042]首先定義了曲線圖橫軸的變量，包括顯示橫軸的數(shù)據(jù)源指定:
[0043]<mx: horizontalAxis>
[0044]<mx: CategoryAxis id = 〃infiniband—hor〃categoryField = 〃time〃/>
[0045]</ mx: horizontalAxis>
[0046]然后指定對(duì)橫軸樣式的定義:
[0047]<mx:horizontalAxisRenderers>
[0048]〈mx: Axi sRenderer placement = 〃bottom〃axis = 〃 {inf iniband_hor}^canDropLabels = 〃true〃/>
[0049]</mx:horizontalAxisRenderers>[0050]指定對(duì)縱軸樣式的定義:
[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]指定對(duì)線樣式的指定:
[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]對(duì)線的效果進(jìn)行指定:
[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)格自動(dòng)加入進(jìn)入，這樣形成的曲線圖有橫縱交叉的網(wǎng)格線圖，具體的實(shí)現(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]在上面的代碼中，可以對(duì)橫坐標(biāo)的格式進(jìn)行格式化的操作，具體的實(shí)現(xiàn)方式如下:
[0098]
【權(quán)利要求】
1.一種雙軸曲線圖繪制方法，其特征在于，包括: 根據(jù)需要調(diào)用一個(gè)或多個(gè)雙軸曲線圖繪制控件； 分別對(duì)各個(gè)所述雙軸曲線圖繪制控件進(jìn)行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式； 各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖。
2.根據(jù)權(quán)利要求1所述的雙軸曲線圖繪制方法，其特征在于，各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖包括: 繪制出水平軸，對(duì)所述水平軸做渲染處理； 給所述水平軸綁定數(shù)據(jù)源同時(shí)對(duì)顯示的值進(jìn)行格式化； 繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實(shí)現(xiàn)自適應(yīng)調(diào)節(jié)縱坐標(biāo)。
3.根據(jù)權(quán)利要求2所述的雙軸曲線圖繪制方法，其特征在于，各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖還包括: 根據(jù)所述變量設(shè)置來(lái)決定整個(gè)曲線圖顯示的比例。
4.根據(jù)權(quán)利要求2所述的雙軸曲線圖繪制方法，其特征在于，各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖還包括: 在所述變量配置設(shè)置了移動(dòng)頻率時(shí)，所述雙軸曲線圖繪制控件根據(jù)所述移動(dòng)頻率進(jìn)行數(shù)據(jù)源的加載，移動(dòng)所述雙軸曲線圖。
5.根據(jù)權(quán)利要求2所述的所述的雙軸曲線圖繪制方法，其特征在于，各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖還包括: 在需要設(shè)置的變量部分或全部沒(méi)有重新設(shè)置時(shí)，根據(jù)默認(rèn)方式繪制所述雙軸曲線圖。
6.一種雙軸曲線圖繪制裝置，其特征在于，包括: 控件調(diào)用模塊，用于根據(jù)需要調(diào)用一個(gè)或多個(gè)雙軸曲線圖繪制控件； 變量設(shè)置模塊，用于分別對(duì)各個(gè)所述雙軸曲線圖繪制控件進(jìn)行變量設(shè)置，確定待繪制的雙軸曲線圖的樣式和顯示方式； 繪制模塊，用于各個(gè)雙軸曲線圖繪制控件根據(jù)各自對(duì)應(yīng)的變量設(shè)置繪制雙軸曲線圖。
7.根據(jù)權(quán)利要求6所述的雙軸曲線圖繪制裝置，其特征在于，所述繪制模塊包括: 水平軸繪制單元，用于繪制出水平軸，對(duì)所述水平軸做渲染處理，并給所述水平軸綁定數(shù)據(jù)源同時(shí)對(duì)顯示的值進(jìn)行格式化； 縱軸繪制單元，用于繪制兩條縱軸，兩條縱軸分別綁定數(shù)據(jù)源，且分別配置顯示模式而且實(shí)現(xiàn)自適應(yīng)調(diào)節(jié)縱坐標(biāo)。
8.根據(jù)權(quán)利要求7所述的雙軸曲線圖繪制裝置，其特征在于，所述繪制模塊還包括: 顯示比例調(diào)整單元，用于根據(jù)所述變量設(shè)置來(lái)決定整個(gè)曲線圖顯示的比例。
9.根據(jù)權(quán)利要求7所述的雙軸曲線圖繪制裝置，其特征在于，所述繪制模塊還包括: 曲線移動(dòng)單元，用于在所述變量配置設(shè)置了移動(dòng)頻率時(shí)，所述雙軸曲線圖繪制控件根據(jù)所述移動(dòng)頻率進(jìn)行數(shù)據(jù)源的加載，移動(dòng)所述雙軸曲線圖。
【文檔編號(hào)】G06F9/44GK104035785SQ201410309203
【公開(kāi)日】2014年9月10日 申請(qǐng)日期:2014年7月1日 優(yōu)先權(quán)日:2014年7月1日
【發(fā)明者】段國(guó)棟 申請(qǐng)人:浪潮(北京)電子信息產(chǎn)業(yè)有限公司