高毅 王昕 丁勇 涂小琴

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

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

中圖分類號(hào)： TP317????文獻(xiàn)標(biāo)識(shí)碼：?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]。圖表可以以簡潔的方式和最清晰的視覺效果，高效地將有價(jià)值的信息傳遞給用戶。所以，在應(yīng)用軟件開發(fā)中正得到越來越廣泛的應(yīng)用。在Android應(yīng)用軟件開發(fā)中，雖然系統(tǒng)提供了大量的組件用于界面設(shè)計(jì)，但是沒有圖表組件，因此需要開發(fā)者來創(chuàng)建自定義的圖表組件，以實(shí)現(xiàn)用戶的特殊需求^[2]。

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

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

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

1.1??圖表

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

1.2View

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

1.3Paint類

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

1.4Canvas類

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

1.5Path類

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

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

2.1布局空間設(shè)計(jì)

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

2.2單位轉(zhuǎn)換

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

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

（1）dp轉(zhuǎn)px

在圖表組件實(shí)現(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

在圖表組件實(shí)現(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è)計(jì)

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

（1）FColor類

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

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

（3）ChartEntity類

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

（4）ChartView類

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

2.4圖表的繪制

（1）繪制流程

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

算法1

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

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

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

第4步：繪制背景;

第5步：初始屬性動(dòng)畫值，animatedValue=0;

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

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

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

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

（2）重寫onDraw方法

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

……

//計(jì)算起點(diǎ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;

//繪制第一個(gè)點(diǎn)標(biāo)志

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

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

int no=getScope（animatedValue）;

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

for（int j=1;j

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

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

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

//計(jì)算折線的起點(diǎn)坐標(biāo)

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

stopX=startLeft+（j）*avgDis;

//計(jì)算折線的終點(diǎn)坐標(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）;

//繪制點(diǎn)標(biāo)志

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

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

stopX，stopY，dpTopx（markWidth））;

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

startX=stopX;

startY=stopY;

}

}

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

if（animatedValue<=1）{

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

//計(jì)算折線終點(diǎn)的X坐標(biāo)

stopX=startLeft+animatedValue*contentWidth;

//計(jì)算折線終點(diǎn)的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）;

}

}

//繪制最后一個(gè)點(diǎn)標(biāo)志

if（animatedValue==1）{

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

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

stopX，stopY，dpTopx（markWidth））;

}

3??實(shí)驗(yàn)效果

本文實(shí)現(xiàn)的圖表組件的效果如圖所示，該圖表組件由散點(diǎn)圖、折線圖、柱狀圖、條形圖、餅圖和雷達(dá)圖六個(gè)基本圖表構(gòu)成。該圖表組件可以展示多個(gè)系列數(shù)據(jù)，還具有動(dòng)畫效果，文本和圖表可以很好的自適應(yīng)移動(dòng)端設(shè)備。組件在設(shè)計(jì)的過程中，加入了大量的屬性作為類的數(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)外邊距、動(dòng)畫相關(guān)屬性、背景相關(guān)屬性等。相比現(xiàn)有的類似的第三方開源方案，自定義程度高、使用方便、靈活，用戶體驗(yàn)好，所以，該組件還是具有很好的實(shí)用性和創(chuàng)新性。

4??結(jié)語

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

參考文獻(xiàn)

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