基于Android的自定義雷達(dá)圖組件

高毅 涂小琴 張春紅 丁勇

摘? 要： Android系統(tǒng)的組件不能完全滿足開發(fā)人員的需求，尤其在數(shù)據(jù)展示方面，而雷達(dá)圖是一種很好的數(shù)據(jù)展示工具，本文提出了一種雷達(dá)圖組件的實現(xiàn)方法，從顏色值轉(zhuǎn)換方法、布局空間設(shè)計、背景關(guān)鍵點計算、數(shù)據(jù)點計算、雷達(dá)圖繪制等方面對自定義雷達(dá)圖的設(shè)計實現(xiàn)過程做詳細(xì)描述。該組件布局整齊，使用方便，支持自定義，用戶體驗好，相比現(xiàn)有的第三方開源方案，具有很好的實用性和創(chuàng)新性。

關(guān)鍵詞： 雷達(dá)圖;自定義;Android;數(shù)據(jù)可視化

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

本文著錄格式：高毅，涂小琴，張春紅，等. 基于Android的自定義雷達(dá)圖組件[J]. 軟件，2019，40（10）：7377

Custom Radar Chart Component Based on Android

GAO Yi， TU Xiao-qin， ZHANG Chun-hong， DING Yong

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

【Abstract】： The components of the Android system can not fully meet the needs of developers， especially in the data display， and the radar chart is a good data display tool. This paper proposes a method for implementing the radar chart component， from the color value conversion method and layout， space design， background key point calculation， calculation of data points， and other aspects of a radar mapping of the radar chart design of the custom implementation is described in detail. The component is neatly arranged， easy to use， supports customization， and has a good user experience. Compared with existing third-party open source solutions， it has good practicability and innovation.

【Key words】： Radar chart; Custom; Android; Data visualization

0? 引言

在進行Android應(yīng)用開發(fā)時，離不開應(yīng)用界面的設(shè)計，Android系統(tǒng)本身提供了很多組件用于界面設(shè)計，常用的有文本框、編輯框、按鈕、單選按鈕與單選按鈕組、復(fù)選框、圖片框、下拉列表框、列表框、開關(guān)按鈕等。這些組件基本上能滿足大多數(shù)應(yīng)用的開發(fā)需求，但仍然有一些需求是滿足不了的，現(xiàn)今的大多數(shù)應(yīng)用離不開數(shù)據(jù)展示，尤其是移動端的開發(fā)，需要用到圖表來向用戶展示數(shù)據(jù)。然而，隨著數(shù)據(jù)可視化技術(shù)的飛速發(fā)展，雷達(dá)圖已經(jīng)進入我們的生活，不僅僅是企業(yè)財務(wù)，在個人帳務(wù)管理以及投資理財?shù)绕渌I(lǐng)域，雷達(dá)圖也開始嶄露頭角，應(yīng)用越來越廣泛[1]。但Android系統(tǒng)本身并不提供雷達(dá)圖組件，因此需要開發(fā)者來創(chuàng)建自定義的雷達(dá)圖組件，以實現(xiàn)用戶的特殊需求。

本文通過設(shè)計一個基于Android的雷達(dá)圖組件，實現(xiàn)了數(shù)據(jù)的可視化展示，該組件的實現(xiàn)繼承了View類，重寫了多個方法，加入了好多的組件屬性作為類的數(shù)據(jù)成員，并編寫了get方法和set方法，豐富了雷達(dá)圖組件的顯示樣式，根據(jù)ValueAnimator 對象值不斷的重繪，以實現(xiàn)動畫效果，增強了用戶體驗。下面將從顏色值轉(zhuǎn)換方法、布局空間設(shè)計、背景關(guān)鍵點計算、數(shù)據(jù)點計算、雷達(dá)圖繪制等方面對自定義雷達(dá)圖的設(shè)計實現(xiàn)過程做詳細(xì)描述。

1? 相關(guān)概念

1.1? 雷達(dá)圖

雷達(dá)又叫戴布拉圖、蜘蛛網(wǎng)圖。傳統(tǒng)的雷達(dá)圖被認(rèn)為是一種表現(xiàn)多維指標(biāo)（4維以上）數(shù)據(jù)的圖表。它將多個維度指標(biāo)的數(shù)據(jù)量映射到坐標(biāo)軸上，這些坐標(biāo)軸起始于同一個圓心點，通常結(jié)束于圓周邊緣，將同一組的點使用線連接起來就稱為了雷達(dá)圖[2]。它可以將多維指標(biāo)數(shù)據(jù)進行展示，但是點的相對位置和坐標(biāo)軸之間的夾角是沒有任何信息量的。在坐標(biāo)軸設(shè)置恰當(dāng)?shù)那闆r下雷達(dá)圖所圍面積能表現(xiàn)出一些信息量。

1.2? View

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

基于Android UI組件的實現(xiàn)原理，開發(fā)者完全可以開發(fā)出項目定制的組件，當(dāng)Android系統(tǒng)提供的UI組件不足以滿足需求時，可以通過繼承View來派生自定義組件。過程為，首先定義一個繼承View基類的子類，然后重寫View類的一個或多個方法來實現(xiàn)。

1.3? Canvas類

Canvas繪圖有三個基本要素：Canvas、繪圖坐標(biāo)系以及Paint。Canvas是畫布，我們通過Canvas的各種drawXXX方法將圖形繪制到Canvas上面，在drawXXX方法中我們需要傳入要繪制的圖形的坐標(biāo)形狀，還要傳入一個畫筆Paint。drawXXX方法以及傳入其中的坐標(biāo)決定了要繪制的圖形的形狀，比如drawCircle方法，用來繪制圓形，需要我們傳入圓心的x和y坐標(biāo)，以及圓的半徑。drawXXX方法中傳入的畫筆Paint決定了繪制的圖形的一些外觀，比如是繪制的圖形的顏色，再比如是繪制圓面還是圓的輪廓線等。Android系統(tǒng)的設(shè)計吸收了很多已有系統(tǒng)的諸多優(yōu)秀之處，比如Canvas繪圖[4]。

1.4? Path類

Paint類保存了繪制幾何圖形、文本和位圖的樣式和顏色信息。也就是說我們可以使用Paint保存的樣式和顏色，來繪制圖形、文本和bitmap，這就是Paint的強大之處。接下來我們使用Paint來繪圖，并且看看該類有哪些樣式和顏色[3]。

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

2.1? 顏色值轉(zhuǎn)換方法

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

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

FColor類中的關(guān)鍵方法public void setColor（String color），是把字符串表示的顏色值分割并轉(zhuǎn)換到alpha、red、green、blue四個分量上面，關(guān)鍵代碼如下。

int m=Integer.parseInt（color.replaceAll（"^#"，""）， 16）;

//8位十六進制字符串顏色表示的轉(zhuǎn)換方法

if（color.length（）==9）{

this. alpha=（m&0XFF000000）>>24;

this. red =（m&0X00FF0000）>>16;

this. green =（m&0X0000FF00）>>8;

this. blue=m&0X000000FF;

}

else{//6位十六進制字符串顏色表示的轉(zhuǎn)換方法

if（color.length（）==7）{

this. alpha=255;

this. red =（m&0XFF0000）>>16;

this. green =（m&0X00FF00）>>8;

this. blue=m&0X0000FF;

}

//若不是6位或者8位十六進制字符串顏色表示，則默認(rèn)為黑色

else{

this. alpha=255;

this. red =0;

this. green =0;

this. blue=0;

}

}

2.2? 背景繪制

（1）布局空間設(shè)計

在實現(xiàn)雷達(dá)圖組件時，布局空間的設(shè)計尤為關(guān)鍵。移動端應(yīng)用開發(fā)最大的特點之一就是可用顯示空間小，要讓雷達(dá)圖有更好的顯示效果，必需要合理的分配布局空間。雷達(dá)圖的布局空間設(shè)計如圖1所示，由圖表標(biāo)題區(qū)、圖表繪制區(qū)和系列標(biāo)題區(qū)構(gòu)成[5-6]。其中，圖表標(biāo)題區(qū)用來顯示雷達(dá)圖的總標(biāo)題，圖表繪制區(qū)用來顯示雷達(dá)圖，系列標(biāo)題區(qū)用來顯示雷達(dá)圖的系列標(biāo)題。在雷達(dá)圖的設(shè)計過程中，為了能讓Android開發(fā)人員可以自定義標(biāo)題文本字體大小，首先計算該雷達(dá)圖在移動設(shè)備端的顯示大小，再計算系列標(biāo)題區(qū)所占大小，最后得到圖表繪制區(qū)的大小。

（2）背景關(guān)鍵點計算

雷達(dá)圖背景的繪制，最為重要的就是關(guān)鍵點坐標(biāo)的計算，只要把關(guān)鍵點的點坐標(biāo)計算出來，就很

容易繪制出背景。雷達(dá)圖的背景設(shè)計如圖2所示，這是以5維指標(biāo)數(shù)據(jù)的雷達(dá)圖背景為例來設(shè)計的，該部分內(nèi)容是包含在圖1的圖表繪制區(qū)中。

雷達(dá)圖背景的主要組成部分是由一些大小不一的正多邊形組成，為了便于計算和控制，雷達(dá)圖背景是在一個圓心點坐標(biāo)為（centerX，centerY）、半徑為width/2的圓內(nèi)進行繪制。Android中canvas的繪圖坐標(biāo)和數(shù)學(xué)的平面直角坐標(biāo)不同，向右代表X軸的正方向，向下代表Y軸的正方向。下面先以5維指標(biāo)數(shù)據(jù)的雷達(dá)圖背景的關(guān)鍵點坐標(biāo)進行計算，然后總結(jié)出一般化的計算公式。

雷達(dá)圖背景是在一個圓內(nèi)繪制的，用（centerX， centerY）表示圓心坐標(biāo)，r表示圓的半徑，N表示指標(biāo)數(shù)據(jù)的維度，n表示每一維指標(biāo)數(shù)據(jù)的刻度數(shù)，θ表示相鄰指標(biāo)數(shù)據(jù)維度間的夾角。如圖2所示，Y軸的負(fù)方向作為起始參照線，從這條參照線順時針依次來布局指標(biāo)數(shù)據(jù)的維度，每一維指標(biāo)數(shù)據(jù)的刻度點是由內(nèi)向外依次編號。

以5維指標(biāo)數(shù)據(jù)的雷達(dá)圖為例，假設(shè)每一維指標(biāo)數(shù)據(jù)的刻度數(shù)為4（n=4），那么總共要計算20個坐標(biāo)點。這些坐標(biāo)點表示為Pi，j，i表示維度編號，j表示維度內(nèi)部的刻度編號，其中i=0，1，2，3，4，j=0，1，2，3。相鄰指標(biāo)數(shù)據(jù)維度間的夾角為72度。

第1維共有P0，0、P0，1、P0，2、P0，3 4個刻度點，它們的坐標(biāo)計算結(jié)果如下：

P0，0坐標(biāo)為（0， –r/4）

P0，1坐標(biāo)為（0， （–r/4）*2）

P0，2坐標(biāo)為（0， （–r/4）*3）

P0，3坐標(biāo)為（0， （–r/4）*4）

第2維共有P1，0、P1，1、P1，2、P1，3? 4個刻度點，它們的坐標(biāo)計算結(jié)果如下：

P1，0坐標(biāo)為（cos（90-72）*（r/4）， –sin（90-72）*（r/4））

P1，1坐標(biāo)為（cos（90-72）*（r/4）*2， –sin（90-72）* （r/4）*2）

P1，2坐標(biāo)為（cos（90-72）*（r/4）*3， –sin（90-72）* （r/4）*3）

P1，3坐標(biāo)為（cos（90-72）*（r/4）*4， –sin（90-72）* （r/4）*4）

第3維共有P2，0、P2，1、P2，2、P2，3 4個刻度點，它們的坐標(biāo)計算結(jié)果如下：

P2，0坐標(biāo)為（cos（90-72*2）*（r/4）， –sin（90-72*2）* （r/4））

P2，1坐標(biāo)為（cos（90-72*2）*（r/4）*2， –sin（90-72*2）* （r/4）*2）

P2，2坐標(biāo)為（cos（90-72*2）*（r/4）*3， –sin（90-72*2）* （r/4）*3）

P2，3坐標(biāo)為（cos（90-72*2）*（r/4）*4， –sin（90-72*2）* （r/4）*4）

第4維共有P3，0、P3，1、P3，2、P3，3 4個刻度點，它們的坐標(biāo)計算結(jié)果如下：

P3，0坐標(biāo)為（cos（90-72*3）*（r/4）， –sin（90-72*3）* （r/4））

P3，1坐標(biāo)為（cos（90-72*3）*（r/4）*2， –sin（90-72*3）* （r/4）*2）

P3，2坐標(biāo)為（cos（90-72*3）*（r/4）*3， –sin（90-72*3）* （r/4）*3）

P3，3坐標(biāo)為（cos（90-72*3）*（r/4）*4， –sin（90-72*3）* （r/4）*4）

第5維共有P4，0、P4，1、P4，2、P4，3 4個刻度點，它們的坐標(biāo)計算結(jié)果如下：

P4，0坐標(biāo)為（cos（90-72*4）*（r/4）， –sin（90-72*4）* （r/4））

P4，1坐標(biāo)為（cos（90-72*4）*（r/4）*2， –sin（90-72*4）* （r/4）*2）

P4，2坐標(biāo)為（cos（90-72*4）*（r/4）*3， –sin（90-72*4）* （r/4）*3）

P4，3坐標(biāo)為（cos（90-72*4）*（r/4）*4， –sin（90-72*4）* （r/4）*4）

由上面的計算過程可以歸納出一般化的關(guān)鍵點的坐標(biāo)計算公式。一般化的關(guān)鍵點表示為Pi，j，i表示維度編號，j表示維度內(nèi)部的刻度編號，其中i=0，1，2，…，N–1，j=0，1，2，…，n–1。

首先計算相鄰指標(biāo)數(shù)據(jù)維度間的夾角θ。

（1）

Pi，j點x坐標(biāo)值計算公式如下：

（2）

Pi，j點y坐標(biāo)值計算公式如下：

（3）

2.3? 雷達(dá)圖繪制

（1）數(shù)據(jù)點計算

本文設(shè)計的雷達(dá)圖可以展示多個系列數(shù)據(jù)。在繪制雷達(dá)圖之前，要把每個數(shù)據(jù)對應(yīng)的數(shù)據(jù)點坐標(biāo)計算出來。數(shù)據(jù)點的坐標(biāo)計算和上面描述的背景關(guān)鍵點計算非常類似，關(guān)鍵代碼如下。

//計算相鄰指標(biāo)數(shù)據(jù)維度間的夾角

disTheta=360/keyItemsCount;

//遍歷系列數(shù)據(jù)

for（int i=0;i

theta=0;

//遍歷數(shù)據(jù)指標(biāo)

for（int j=0;j

//取數(shù)據(jù)指標(biāo)的值

value=radarSeries.getSeriesValues（）.get（j）;

//根據(jù)數(shù)據(jù)指標(biāo)的值計算該數(shù)據(jù)指標(biāo)

在該維度上的線段長度

dis=radius*（（value-valueMin）/（valueMa

x-valueMin））;

//計算數(shù)據(jù)指標(biāo)值對應(yīng)的數(shù)據(jù)點的X

坐標(biāo)

seriesDataX[i][j]=Math. cos（Math.toRadians

（90- theta *i））*dis;

//計算數(shù)據(jù)指標(biāo)值對應(yīng)的數(shù)據(jù)點的Y

坐標(biāo)

seriesDataY[i][j]= –1* Math.sin（Math.

toRadians（90- theta *i））* dis;

//計算下一個指標(biāo)數(shù)據(jù)維度與Y軸負(fù)

方向的夾角

theta=theta+disTheta;

}

}

（2）雷達(dá)圖繪制的關(guān)鍵代碼

當(dāng)Android系統(tǒng)提供的UI組件不足以滿足需求時，可以通過繼承View來派生自定義組件，并重寫View類的一個或多個方法來實現(xiàn)，其中，onDraw方法尤為關(guān)鍵。onDraw方法的關(guān)鍵代碼如下：

//遍歷系列數(shù)據(jù)

for（int i=0;i

//設(shè)置畫筆對象顏色屬性

linePaint.setARGB（seriesItemColor.get（i）. getA（），seriesItemColor.get（i）.getR（），series ItemColor.get（i）.getG（），seriesItemColor.

get（i）.getB（））;

//設(shè)置畫筆對象粗細(xì)

linePaint.setStrokeWidth（dpTopx（seriesItem

StrokeWidth））;

for（int j=0;j

//取起始數(shù)據(jù)點坐標(biāo)

startx=seriesDataX[i][j];

starty=seriesDataY[i][j];

//取終止數(shù)據(jù)點坐標(biāo)

endx=seriesDataX[i][（j+1）%keyItems

Count];

endy=seriesDataY[i][（j+1）%keyItems

Count];

//畫線條

canvas.drawLine（centerX+startx*ani

mated Value， centerY+starty*animated

Value， centerX+ endx* animatedValue，

centerY+endy*animatedValue， linePaint）; }

}

3? 實驗效果

本文實現(xiàn)的雷達(dá)圖組件的效果如圖3和圖4所示，圖3是不帶陰影效果的，圖4有陰影效果。該

雷達(dá)圖可以顯示多個系列數(shù)據(jù)，不同的系列數(shù)據(jù)顏色不一樣，而且還具有動畫效果，動畫效果為依次從內(nèi)到外顯示，相比現(xiàn)有的第三方類似的組件，具有更好的用戶體驗。在實際應(yīng)用中，該雷達(dá)圖還可以自定義背景顏色、背景線條粗細(xì)、背景線條顏色、文本大小、文本顏色等屬性，滿足了Android開發(fā)者更多的需求，顯示效果的設(shè)置多樣化，使用更加靈活。盡管目前也有一些基于Android的雷達(dá)圖組件，或多或少都存在一些問題，如使用不便、不夠靈活等，相比之下，本文描述的雷達(dá)圖組件還是具有一定的實用性和創(chuàng)新性。

4? 結(jié)語

雷達(dá)圖在日常生活更常見、更長用，可以展示出數(shù)據(jù)集中各個變量的權(quán)重高低情況，非常適用于展示性能數(shù)據(jù)。本文提出的基于Android的自定義雷達(dá)圖組件可以解決一些數(shù)據(jù)展示的問題，可以展示多個系列的數(shù)據(jù)，方便不同系列的數(shù)據(jù)進行對比，經(jīng)過測試，布局整齊，響應(yīng)速度快，動畫效果良好，大大增強了用戶體驗，能滿足大多數(shù)Android應(yīng)用開發(fā)人員的需求。但是，還是存在一些不足，比如動態(tài)性方面，能和用戶進行交互展示，在以后的研究工作中，將在這一方面做深入研究。

參考文獻(xiàn)

[1]王魯. 信息技術(shù)[M]. 昆明： 云南人民出版社， 2013： 97-103.

[2]張文彤， 鄺春偉. SPSS統(tǒng)計分析基礎(chǔ)教程[M]. 北京市： 高等教育出版社， 2011， 11.

[3]李剛， 瘋狂Android講義（第3版）[M]. 北京： 電子工業(yè)出版社， 2015， 6： 123.

[4]啟艦， Android自定義控件開發(fā)入門與實踐[M]. 北京： 電子工業(yè)出版社， 2018， 7： 54.

[5]高毅， 王昕， 楊克光. Android平臺下折線圖組件的研究和實現(xiàn)[J]. 現(xiàn)代計算機， 2016， 5： 69-71.

[6]高毅， 楊克光， 王昕. 基于Android平臺的柱狀圖組件的設(shè)計實現(xiàn)[J]. 現(xiàn)代計算機， 2016， 6： 77-80.

[7]馬明明， 胡俊. 面向文本的標(biāo)簽云可視化度量模型的研究[J]. 軟件， 2018， 39（5）： 88-93.

[8]羅宗祥. 基于新浪云的微博傳播可視化研究[J]. 軟件， 2012， 33（7）： 117-119.

[9]龔昊， 張琦. 數(shù)據(jù)中心三維可視化管理軟件的設(shè)計與實現(xiàn)[J]. 軟件， 2012， 33（11）： 68-71.

[10]鄺野， 馬璇. 信息可視化過程中色像差的補償方式研究[J]. 軟件， 2012， 33（12）： 218-221.