基于Android自定義圖表組件的關(guān)鍵技術(shù)研究

高毅 王昕 丁勇 涂小琴

摘 ?要： 在數(shù)據(jù)可視化方面，Android系統(tǒng)提供的組件不能滿足開發(fā)人員的需求，而第三方的圖表組件技術(shù)不夠成熟，本文提出了一種基于Android的圖表組件的實現(xiàn)方法，著重討論了圖表組件的布局空間設(shè)計、類設(shè)計、單位轉(zhuǎn)換、繪制流程、圖表繪制。該組件自定義程度高，使用方便，布局整齊，動畫效果良好，大大增強(qiáng)了用戶體驗，能滿足大多數(shù)Android應(yīng)用軟件開發(fā)的需求，具有一定的創(chuàng)新性和很好的實用價值。

關(guān)鍵詞：?圖表;自定義;Android;數(shù)據(jù)可視化

中圖分類號： TP317????文獻(xiàn)標(biāo)識碼：?A????DOI：10.3969/j.issn.1003-6970.2019.09.009

本文著錄格式：高毅，王昕，丁勇，等. 基于Android自定義圖表組件的關(guān)鍵技術(shù)研究[J]. 軟件，2019，40（9）：40-44

Research on Key Technologies Based on Android Custom Chart Component

GAO Yi， WANG Xin， DING Yong， TU Xiao-qin

（College of Arts and Sciences，?Yunnan Normal University， Kunming?650222，China）

【Abstract】： In terms of data visualization， the components provided by Android system can not meet the needs of developers， and the third-party chart component technology is not mature enough. This paper proposes an Android-based chart component implementation method， focusing on the layout space design of chart components， class design， unit conversion， drawing process， chart drawing. The component has a high degree of customization， convenient use， neat layout， good animation effect， greatly enhances the user experience， can meet the needs of most Android application software development， has certain innovation and good practical value.

【Key words】： Chart; Custom; Android; Data visualization

0??引言

在數(shù)據(jù)的分析和展示過程中，數(shù)據(jù)可視化是非常重要的手段之一，而各種類型的圖表，又是數(shù)據(jù)可視化中最重要和最常用的工具^[1]。圖表可以以簡潔的方式和最清晰的視覺效果，高效地將有價值的信息傳遞給用戶。所以，在應(yīng)用軟件開發(fā)中正得到越來越廣泛的應(yīng)用。在Android應(yīng)用軟件開發(fā)中，雖然系統(tǒng)提供了大量的組件用于界面設(shè)計，但是沒有圖表組件，因此需要開發(fā)者來創(chuàng)建自定義的圖表組件，以實現(xiàn)用戶的特殊需求^[2]。

然而，Android系統(tǒng)中的圖表組件的開源方案并不多，第三方的圖表組件技術(shù)又不夠成熟。本文通

過設(shè)計一套基于Android的圖表組件，包含了散點圖、折線圖、柱狀圖、條形圖、餅圖和雷達(dá)圖六種基本圖表，實現(xiàn)了數(shù)據(jù)的可視化展示，該組件的實現(xiàn)通過繼承View類，重寫了onMeasure、onDraw等多個方法，加入了好多的組件屬性作為類的數(shù)據(jù)成員，并編寫了get方法和set方法，豐富了圖表組件的顯示樣式，通過了ValueAnimator類的相關(guān)技術(shù)來加入動畫效果，增強(qiáng)了用戶體驗。

1??相關(guān)概念

1.1??圖表

圖表泛指在屏幕中顯示的，可直觀展示統(tǒng)計信息屬性（時間性、數(shù)量性等），對知識挖掘和信息直觀生動感受起關(guān)鍵作用的圖形結(jié)構(gòu)，是一種很好的將對象屬性數(shù)據(jù)直觀、形象地"可視化"的手段^[3]。合理的數(shù)據(jù)圖表，會更直觀的反映數(shù)據(jù)間的關(guān)系，比用數(shù)據(jù)和文字描述更清晰、更易懂。將工作表中的數(shù)據(jù)轉(zhuǎn)換成圖表呈現(xiàn)，可以關(guān)注我們更好地了解數(shù)據(jù)見的比例關(guān)系及變化趨勢，對研究對象做出合理的推斷和預(yù)測。

1.2View

Android應(yīng)用的絕大部分UI組件都放在android.widget包及其子包、android.view包及其子包中，Android應(yīng)用的所有UI組件都繼承了View類，View組件非常類似于Swing編程的JPanel，它代表一個空白的矩形區(qū)域^[4]。

1.3Paint類

要實現(xiàn)繪圖功能，首先需要畫筆工具，Paint類便是Android的畫筆，它包含了繪制幾何圖形、文本和位圖所需的一些風(fēng)格和顏色信息，如線寬、字體和大小等。通過Paint類提供給用戶的公共方法，可以對其屬性進(jìn)行設(shè)置。

1.4Canvas類

各類圖形是要在一張畫布上繪制的，Canvas類則實現(xiàn)了畫布這一功能，在繪制圖形之前，需要對Canvas設(shè)置一些畫布的屬性，如畫布的顏色、尺寸等。

1.5Path類

在進(jìn)行劃線等操作時還需要連接路徑，這個工具由Path提供，Path類中包含一些直線或曲線連接到指定點的方法。Android提供的Path是一個非常有用的類，它可以預(yù)先在View上將N個點連成一條“路徑”，然后調(diào)用Canvas的drawPath方法即可沿著路徑繪制圖形。

2??關(guān)鍵技術(shù)

2.1布局空間設(shè)計

移動端設(shè)備的屏幕相對于計算機(jī)顯示器尺寸相對較小，移動端應(yīng)用開發(fā)的特點之一就是可用來顯示的空間小，要讓圖表有好的顯示效果，一定要合理分配利用有限的空間，所以，在實現(xiàn)圖表組件時，布局空間的設(shè)計尤為關(guān)鍵。圖表組件的布局空間設(shè)計如圖1所示，分為圖表標(biāo)題區(qū)、圖表繪制區(qū)和系列標(biāo)題區(qū)三個部分^[5-6]。其中，圖表標(biāo)題區(qū)用來顯示圖表的標(biāo)題，本文實現(xiàn)的圖表組件可以設(shè)置圖表標(biāo)題的文本大小，圖表標(biāo)題的文本顏色;圖表繪制區(qū)用來顯示圖表及圖表相關(guān)元素，包括坐標(biāo)軸、坐標(biāo)刻度值、背景線條等，本文實現(xiàn)的圖表組件可以設(shè)置坐標(biāo)線條顏色、坐標(biāo)線條粗細(xì)、坐標(biāo)刻度值文本大小、坐標(biāo)刻度值文本顏色、背景樣式等，這是一個核心區(qū)域;系列標(biāo)題區(qū)用來顯示圖表的系列標(biāo)題，本文實現(xiàn)的圖表組件可以顯示多個系列數(shù)據(jù)，所以，圖表的系列標(biāo)題一般會存在多個，為了更好的利用布局空間，本文設(shè)計的方案是每一行顯示兩個系列標(biāo)題，依次從左到右，從上到下。該圖表組件的布局空間的設(shè)計，需要進(jìn)行計算，首先計算該圖表在移動設(shè)備端的顯示大小，再計算系列標(biāo)題區(qū)所占布局空間的大小，最后得到圖表繪制區(qū)的大小。

2.2單位轉(zhuǎn)換

在Android應(yīng)用開發(fā)中，在設(shè)置組件的大小和文字的大小時都要用到單位，Android中常用的單位有px、dip、dp和sp等。其中，px（像素），每個px對應(yīng)屏幕上的一個點。dip或dp（設(shè)備獨立像素），一種基于屏幕密度的抽象單位。sp（比例像素），主要處理字體的大小，可以根據(jù)用戶的字體大小首選項進(jìn)行縮放。一般情況下，用dp來表示距離大小，用sp表示字體大小。

圖表組件在實現(xiàn)時，使用的單位為像素。由于移動端設(shè)備的尺寸大小和分辨率各式各樣，各種屏幕密度不同導(dǎo)致同樣像素大小的長度在不同密度的屏幕上的顯示長度不同，相同長度的屏幕高密度屏幕包含更多像素點，為了在不同大小的屏幕上都有好的顯示效果，該組件在實現(xiàn)的過程中需要進(jìn)行單位轉(zhuǎn)換，需要把dp和sp轉(zhuǎn)換為px。

（1）dp轉(zhuǎn)px

在圖表組件實現(xiàn)中，編寫了把dp單位轉(zhuǎn)換為px單位的方法，代碼如下：

private float dpTopx（float dp） {

return TypedValue.applyDimension（Type d V alue.?CO MPLEX_UNIT_DIP，

dp， getResources（）.getDisplayMe t rics（））;

}

（2）sp轉(zhuǎn)px

在圖表組件實現(xiàn)中，編寫了把sp單位轉(zhuǎn)換為px單位的方法，代碼如下：

private float spTopx（float sp） {

return TypedValue.applyDimension（Ty pedValue.?COMPLEX_UNIT_SP，

sp，?getResources（）.getDisplayM e t rics（））;

}

2.3??類設(shè)計

圖表組件在實現(xiàn)的過程中，涉及到FColor、DataItems、ChartEntity、View、ChartView5個類，除了類View是系統(tǒng)類，其它的類都是為了實現(xiàn)該圖表組件而編寫的。類及類關(guān)系如圖2所示，類ChartView繼承于View類，類ChartView依賴于FColor類，類ChartView和類ChartEntity的關(guān)系是組合，類ChartEntity和類DataItems的關(guān)系是組合。下面就這幾個類做詳細(xì)描述。

（1）FColor類

在Android程序設(shè)計中，我們可以在xml布局文件中使用井號加6位十六進(jìn)制（形如：#XXXXXX）或者井號加8位十六進(jìn)制（形如：#XXXXXXXX）來表示顏色值，而在java代碼中不行。用這種形式來表示顏色值還是非常直觀明了的，為了在java代碼中也能夠這樣表示，特地編寫FColor類來實現(xiàn)此功能。

FColor類的數(shù)據(jù)成員由a、r、g、b構(gòu)成。其中a表示透明度的值，r表示紅色分量的值，g表示綠色分量的值，b表示藍(lán)色分量的值。它們數(shù)據(jù)類型為int，取值范圍介于0到255之間。

FColor類中的關(guān)鍵方法public void setColor（String color），是把字符串表示的顏色值分割并轉(zhuǎn)換到a、r、g、b四個分量上面。

8位十六進(jìn)制轉(zhuǎn)換代碼如下：

this.a=Integer.parseInt（color.substring（1， 2+1）， 16）;

this.r=Integer.parseInt（color.substring（3， 4+1）， 16）;

this.g=Integer.parseInt（color.substring（5， 6+1）， 16）;

this.b=Integer.parseInt（color.substring（7， 8+1）， 16）;

6位十六進(jìn)制轉(zhuǎn)換代碼如下：

this.a=255;

this.r=Integer.parseInt（color.substring（1， 2+1）， 16）;

this.g=Integer.parseInt（color.substring（3， 4+1）， 16）;

this.b=Integer.parseInt（color.substring（5， 6+1）， 16）;

（2）DataItems類

DataItems類是用來表示一個序列數(shù)據(jù)的，有7個數(shù)據(jù)成員，其中，seriesName表示系列名，XItemValues表示X項的值（數(shù)組），XItemValuesSize表示X項個數(shù)seriesValues表示Y項的值（數(shù)組），seriesValuesSize表示Y項個數(shù)，seriesValuesMax表示Y項最大值，seriesValuesMin表示Y項最小值，為了方便構(gòu)造圖表Y軸坐標(biāo)刻度，特別地加了最后2個數(shù)據(jù)成員。DataItems類除了構(gòu)造方法、數(shù)據(jù)成員的get/set方法外，關(guān)鍵方法有3個。其中，?addSeriesNam方法的功能是用來添加數(shù)據(jù)序列的名稱;addData方法的功能是用來添加1個數(shù)據(jù)項，1個數(shù)據(jù)項由2個部分組成，分別為數(shù)據(jù)項的名稱和數(shù)據(jù)項的值;clearData方法的功能是用來清空數(shù)據(jù)序列值的。

（3）ChartEntity類

ChartEntity類是用來表示圖表的數(shù)據(jù)源的，可以存儲多個系列數(shù)據(jù)，有2個數(shù)據(jù)成員，其中，ChartTitle表示系統(tǒng)標(biāo)題，Series是DataItems類的數(shù)組對象，用來存儲多個系列的數(shù)據(jù)。ChartEntity類除了構(gòu)造方法、數(shù)據(jù)成員的get/set方法外，有一個關(guān)鍵方法setData，該方法是用來加載數(shù)據(jù)的。

（4）ChartView類

ChartView類是用來實現(xiàn)圖表組件繪制的，該類有幾十個數(shù)據(jù)成員，用來表示圖表的數(shù)據(jù)源、標(biāo)題文本、標(biāo)題文本大小、標(biāo)題文本顏色、系列標(biāo)題文本、系列標(biāo)題文本大小、系列標(biāo)題文本顏色、坐標(biāo)軸相關(guān)屬性、內(nèi)外邊距、動畫相關(guān)屬性、背景相關(guān)屬性等。ChartView類除了構(gòu)造方法、數(shù)據(jù)成員的get/set方法外，最為重要的就是onDraw方法了。ChartView類作為View類的子類，需要去重寫多個方法來實現(xiàn)圖表組件的繪制。

2.4圖表的繪制

（1）繪制流程

在Android系統(tǒng)中實現(xiàn)圖表組件，需要繼承View類，重寫其中的一個或者多個方法。本文描述的圖表組件是有動畫效果的，在繪制過程中把背景的繪制和圖表區(qū)的繪制分開，這樣有利于控制圖表區(qū)的動畫效果。圖表組件繪制流程的算法描述如算法1所示。

算法1

第1步：根據(jù)用戶設(shè)置計算圖表系列數(shù)據(jù);

第2步：根據(jù)用戶設(shè)置計算圖表屬性值;

第3步：根據(jù)系列數(shù)據(jù)和圖表屬性值計算相應(yīng)的圖表參數(shù)，用于后面繪制背景和圖表;

第4步：繪制背景;

第5步：初始屬性動畫值，animatedValue=0;

第6步：判斷animatedValue <= 1 是否成立，若成立，繼續(xù)下一步，否則，跳到第9步;

第7步：根據(jù)屬性動畫值animatedValue重繪圖表，也就是重新執(zhí)行onDraw方法;

第8步：根據(jù)ValueAnimator對象的addUpd ate Listener監(jiān)聽事件計算新的屬性動畫值animatedValue，返回第6步;

第9步：算法結(jié)束。

（2）重寫onDraw方法

基于Android UI組件的實現(xiàn)原理，開發(fā)者完全可以開發(fā)出項目定制的組件，當(dāng)Android系統(tǒng)提供的UI組件不足以滿足需求時，可以通過繼承View來派生自定義組件。過程為，首先定義一個繼承View基類的子類，然后重寫View類的一個或多個方法來實現(xiàn)，其中，onDraw方法尤為關(guān)鍵。本文描述的圖表組件由散點圖、折線圖、柱狀圖、條形圖、餅圖和雷達(dá)圖六種基本圖表組成，每一種圖表的繪制都有一定的差異，在此，僅以折線圖為例來對onDraw方法的關(guān)鍵代碼做描述。

……

//計算起點坐標(biāo)

startX=startLeft; startY=startTop+（（Float.valueOf（yItemTitle.get（yIt emsCount-1））-（float）value）/（Float.valueOf（yItemTitle.get?（yItemsCount-1））-Float.valueOf（yItemTitle.get（0））））*co nt entHeight;

//繪制第一個點標(biāo)志

drawMark（canvas，seriesMark[i%seriesMark.length]，?seriesItemColor.get（i%seriesItemColor.size（）），startX，startY，?dpTopx（markWidth））;

//根據(jù)屬性動畫animatedValue變量值計算當(dāng)前繪制到哪一個刻度區(qū)（X軸方向）

int no=getScope（animatedValue）;

//對小于no的刻度區(qū)進(jìn)行繪制

for（int j=1;j

if（j//取系列中數(shù)據(jù)項的值

v1=lineSeries.get（i）.getSeriesValues（）.get（j-1）;

v2=lineSeries.get（i）.getSeriesValues（）.get（j）;

//計算折線的起點坐標(biāo)

startX=startLeft+（j-1）*avgDis;

stopX=startLeft+（j）*avgDis;

//計算折線的終點坐標(biāo)

startY=startTop+（（Float.valueOf（yItemTitle.get（yItemsCount-1））-

（float）v1）/（Float.valueOf（yItemTitle.get（yIte msCount-1））-

Float.valueOf（yItemTitle.get（0））））*contentH eight;

stopY=startTop+（（Float.valueOf（yItemTitle.get（yItemsCount-1））-

（float）v2）/（Float.valueOf（yItemTitle.get（yIte msCount-1））-

Float.valueOf（yItemTitle.get（0））））*contentH eight;

//繪制折線

canvas.drawLine（startX， startY， stopX， stopY，?linePaint）;

//繪制點標(biāo)志

drawMark（canvas，seriesMark[i% seriesMark.?length]，

seriesItemColor.get（i%seriesItemColor.size（）），

stopX，stopY，dpTopx（markWidth））;

//把上面折線的終點設(shè)置為下一條折線的起點

startX=stopX;

startY=stopY;

}

}

//若屬性動畫animatedValue變量值小于等于1，對等于no的刻度區(qū)進(jìn)行重新繪制，以實現(xiàn)動畫效果

if（animatedValue<=1）{

if（no<lineSeries.get（i）.getSeriesValues（）.size（））{

//計算折線終點的X坐標(biāo)

stopX=startLeft+animatedValue*contentWidth;

//計算折線終點的Y坐標(biāo)

v1=lineSeries.get（i）.getSeriesValues（）.get（no-1）;

v2=lineSeries.get（i）.getSeriesValues（）.get（no）;

float x1=startLeft+（no-1）*avgDis;

float x2=startLeft+（no）*avgDis;

float y1=startTop+（（Float.valueOf（yItemTitle.get?（yItemsCount-1））-

（float）v1）/（Float.valueOf（yItemTitle.get（yItemsCount-1））-

Float.valueOf（yItemTitle.get（0））））*contentHeight;

float y2=startTop+（（Float.valueOf（yItemTitle.get?（yItemsCount-1））-

（float）v2）/（Float.valueOf（yItemTitle.get（yItems Count-1））-

Float.valueOf（yItemTitle.get（0））））*contentHeight;

float x=startLeft+animatedValue*contentWidth;

stopY=（y2*（x-x1）+y1*（x2-x））/（x2-x1）;

//繪制折線

canvas.drawLine（startX， startY， stopX， stopY， linePaint）;

}

}

//繪制最后一個點標(biāo)志

if（animatedValue==1）{

drawMark（canvas，seriesMark[i%seriesMark.length]，

seriesItemColor.get（i%seriesItemColor.size（）），

stopX，stopY，dpTopx（markWidth））;

}

3??實驗效果

本文實現(xiàn)的圖表組件的效果如圖所示，該圖表組件由散點圖、折線圖、柱狀圖、條形圖、餅圖和雷達(dá)圖六個基本圖表構(gòu)成。該圖表組件可以展示多個系列數(shù)據(jù)，還具有動畫效果，文本和圖表可以很好的自適應(yīng)移動端設(shè)備。組件在設(shè)計的過程中，加入了大量的屬性作為類的數(shù)據(jù)成員，并編寫了相應(yīng)的set方法和get方法，方便Android應(yīng)用軟件開發(fā)人員根據(jù)自身的需求去設(shè)置圖表樣式，如標(biāo)題文本、標(biāo)題文本大小、標(biāo)題文本顏色、系列標(biāo)題文本、系列標(biāo)題文本大小、系列標(biāo)題文本顏色、坐標(biāo)軸相關(guān)屬性、內(nèi)外邊距、動畫相關(guān)屬性、背景相關(guān)屬性等。相比現(xiàn)有的類似的第三方開源方案，自定義程度高、使用方便、靈活，用戶體驗好，所以，該組件還是具有很好的實用性和創(chuàng)新性。

4??結(jié)語

本文實現(xiàn)的圖表組件可以解決一些數(shù)據(jù)展示的問題，可以展示多個系列的數(shù)據(jù)，方便不同系列的數(shù)據(jù)進(jìn)行對比，經(jīng)過測試，組件自定義程度高，使用方便，布局整齊，動畫效果良好，大大增強(qiáng)了用戶體驗，能滿足大多數(shù)Android應(yīng)用軟件開發(fā)的需求。但是，圖表包含很多種類型，而本文僅僅實現(xiàn)了散點圖、折線圖、柱狀圖、條形圖、餅圖和雷達(dá)圖六種，當(dāng)遇到一些特殊的數(shù)據(jù)可視化時，該組件就不能滿足需求了，在以后的研究工作中，將在圖表改進(jìn)、圖表類型擴(kuò)展方面做深入研究。

參考文獻(xiàn)

• 陳為， 沈則潛， 陶煜波. 數(shù)據(jù)可視化[M]. 北京：?電子工業(yè)出版社， 2013.?12：?39.
• 尹濤.?一種動態(tài)圖表組件的設(shè)計與實現(xiàn)[D].?北京：?北京郵電大學(xué).?2014：?11.
• 王魯. 信息技術(shù)[M]. 昆明： 云南人民出版社， 2013：?97-103.
• 李剛， 瘋狂Android講義（第3版）[M]. 北京：電子工業(yè)出版社， 2015.?6：?123.
• 高毅，?王昕，?楊克光.Android平臺下折線圖組件的研究和實現(xiàn)[J].?現(xiàn)代計算機(jī)，?2016.?5：?69-71.
• 高毅，?楊克光，?王昕.?基于Android平臺的柱狀圖組件的設(shè)計實現(xiàn)[J].?現(xiàn)代計算機(jī)，?2016.?6：?77-80.
• 岳鋼， 王楠. 網(wǎng)絡(luò)學(xué)習(xí)中知識可視化效率研究[J]. 軟件， 2015， 36（2）： 92-96.
• 李晉宏， 戴海濤. 可穿戴設(shè)備數(shù)據(jù)挖掘及可視化技術(shù)的研究[J].?軟件， 2015， 36（12）： 69-71.
• 章蓬陽， 邵帥. Android?異步框架的研究與設(shè)計[J].?軟件， 2016， 37（02）： 150-154.
• 毛昊. 一種服務(wù)于 Android 移動設(shè)備的自適應(yīng)滾屏技術(shù)[J]. 軟件， 2018， 39（3）： 145-149.