基于Android的平滑折線圖組件的設(shè)計與實現(xiàn)

高毅 丁勇 涂小琴 張春紅

摘 ?要： 平滑折線圖是最為常用的圖表組件，Android系統(tǒng)并沒有提供，而第三方的技術(shù)又不夠成熟，本文提出了一種基于Android的平滑折線圖組件的實現(xiàn)方法，從布局空間設(shè)計、繪制點標志、折線圖平滑化、關(guān)鍵代碼等方面對平滑折線圖組件的設(shè)計實現(xiàn)過程進行了詳細描述。該組件實驗效果良好，布局合理，使用方便，支持自定義，用戶體驗好，能滿足大多數(shù)Android應(yīng)用開發(fā)的需求，有很好的實際應(yīng)用價值和創(chuàng)新性。

關(guān)鍵詞：?Android;平滑折線圖;貝塞爾曲線;數(shù)據(jù)可視化

中圖分類號： TP317????文獻標識碼：?A????DOI：10.3969/j.issn.1003-6970.2019.09.003

本文著錄格式：高毅，丁勇，涂小琴，等. 基于Android的平滑折線圖組件的設(shè)計與實現(xiàn)[J]. 軟件，2019，40（9）：13-17

Design and Implementation of Smooth Line Chart Component Based on Android

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

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

【Abstract】： The smooth line chart is the most commonly used chart component. The Android system does not provide it， and the third-party technology is not mature enough. This paper proposes an Android-based smooth line chart component implementation method.The design and implementation process of the smooth line graph component is described in detail in layout space design， drawing point mark， the smoothing of the line graph ， key codes and so on. The component has good experimental results， reasonable layout， convenient use， support for customization， good user experience， and can meet the needs of most Android application development， and has good practical application value and innovation.

【Key words】： Android; Smooth line chart; Bezier curve; Data visualization

0??引言

開發(fā)Android應(yīng)用程序，離不開界面設(shè)計，雖然Android系統(tǒng)本身提供了很多組件，如：文本框、編輯框、按鈕、單選按鈕與單選按鈕組、復(fù)選框、圖片框、下拉列表框、列表框、開關(guān)按鈕等，這些組件基本上能滿足大多數(shù)應(yīng)用的開發(fā)需求。統(tǒng)計圖表是最早的數(shù)據(jù)可視化形式，作為基本的可視化元素仍然被非常廣泛地使用^[1]。而平滑折線圖作為最為常用的統(tǒng)計圖表之一，但Android系統(tǒng)本身并不提供，因此需要開發(fā)者來創(chuàng)建自定義的平滑折線圖組件，以實現(xiàn)用戶的特殊需求。然而，Android系統(tǒng)

中的平滑折線圖組件的開源方案并不多，第三方的平滑折線圖組件技術(shù)又不夠成熟，要么使用不便，要么不夠靈活，要么用戶體驗差。本文通過設(shè)計一個基于Android的平滑折線圖組件，實現(xiàn)了數(shù)據(jù)的可視化展示，該組件使用靈活方便、用戶體驗好。下面從布局空間設(shè)計、繪制點標志、折線圖平滑化、關(guān)鍵代碼等方面對平滑折線圖組件的設(shè)計實現(xiàn)過程做詳細描述。

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

1.1??平滑折線圖

折線圖是用折線（直線）把相鄰的數(shù)據(jù)點連接起來，用于顯示數(shù)據(jù)在一個連續(xù)的時間間隔或者時間跨度上的變化，它的特點是反映事物隨時間或有序類別而變化的趨勢^[2]。

平滑折線圖是在折線圖的基礎(chǔ)上改進的，用平滑的曲線代替折線來連接相鄰的數(shù)據(jù)點^[3]。在平滑折線圖中，數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律（周期性、螺旋性等）、峰值等特征都可以清晰地反映出來。所以，平滑折線圖常用來分析數(shù)據(jù)隨時間的變化趨勢，也可用來分析多組數(shù)據(jù)隨時間變化的相互作用和相互影響。

1.2View

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

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

1.3Path類

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

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

2.1布局空間設(shè)計

移動端應(yīng)用開發(fā)最大的特點之一就是可用顯示空間小，要讓有限的布局空間去展示更多數(shù)據(jù)和信息，所以平滑折線圖組件的布局空間設(shè)計尤為關(guān)鍵。平滑折線圖的布局空間設(shè)計如圖1所示，由圖表標題區(qū)、Y軸區(qū)、X軸區(qū)、空白區(qū)、系列標題區(qū)和圖表繪制區(qū)組成^[6-7]，其中空白區(qū)并不繪制內(nèi)容，為了在水平方向上對稱，它的大小和Y軸區(qū)大小一致。在該組件的設(shè)計過程中，為了能讓Android應(yīng)用開發(fā)者可以自由地去設(shè)置文本的大小，首先計算該組件在移動設(shè)備端的顯示大小，再計算Y軸區(qū)、X軸區(qū)、空白區(qū)、系列標題區(qū)所占大小，最后得到圖表繪制區(qū)的大小。下面就計算過程做詳細描述，單位都為像素（px）。

（1）計算平滑折線圖組件在移動設(shè)備端顯示的大小

用W表示平滑折線圖組件在移動端設(shè)備上所占的寬度，H表示平滑折線圖組件在移動端設(shè)備上所占的高度。通過重寫View類中的onMeasure方法來實現(xiàn)對W和H的計算。關(guān)鍵代碼如下：

//計算顯示模式

int specMode=MeasureSpec.getMode?（width Me asure Spec）;

//計算寬度

int width=MeasureSpec.getSize?（widthMe a su reSpec）;

//若顯示模式是不確定的值，或者未指定尺寸，設(shè)置一個200的默認值

if （specMode==MeasureSpec.UNSPECIFIED）

{

width=200;

}

//計算高度的代碼和上面計算寬度的代碼類似，在此省略

……

setMeasuredDimension（width， height）;

編寫好上面的onMeasure方法后，就可以通過以下公式來計算W和H。

W=getMeasuredWidth（） （1）

H=getMeasuredHeight（） （2）

（2）計算圖表標題區(qū)、Y軸區(qū)、X軸區(qū)、系列標題區(qū)的大小

為了計算圖表標題區(qū)、Y軸區(qū)、X軸區(qū)、系列標題區(qū)所占空間的寬和高，特地編寫了private Rect getTextRect（String text，float textSize）方法，該方法有兩個參數(shù)，第一個參數(shù)text是顯示文本的內(nèi)容，第2個參數(shù)textSize是顯示文本的大小，返回值是Rect類型的對象。由于中文的基線和英文的基線不一樣，為了顯示效果，在計算文本所占矩形時做了修正。關(guān)鍵代碼如下：

……

Paint.FontMetricsInt fm=paint.?getFont Met ricsInt（）;

//修正上邊界，減去文本大小的四分之一

int top=baseLineY+fm.top-（int）（textSize/4.0f）;

//修正下邊界，加上文本大小的四分之一

int bottom=baseLineY+fm.bottom+（int）（te x t Size/4.0f）;

//計算文本所占矩形空間的寬度

int width=（int）paint.measureText（text）;

Rect rect=new Rect（baseLineX，top，baseLi n e X+width，bottom）;

……

編寫好上面的getTextRect方法后，就可以計算圖表標題區(qū)、Y軸區(qū)、X軸區(qū)、系列標題區(qū)所占空間的寬和高。

① 圖表標題區(qū)的寬W_T和高H_T計算公式如下：

W_T=getTextRect（圖表標題文本內(nèi)容，圖表標題文本大小）.width（）（3）

H_T=getTextRect（圖表標題文本內(nèi)容，圖表標題文本大小）.height（）（4）

② Y軸區(qū)的寬W_Y和高H_Y計算公式如下：

W_Y=getTextRect（Y軸刻度值文本內(nèi)容，Y軸刻度值文本大小）.width（）（5）

H_Y=getTextRect（Y軸刻度值文本內(nèi)容，Y軸刻度值文本大小）.height（）（6）

③ X軸區(qū)的寬W_T和高H_T計算公式如下：

W_X =?getTextRect（X軸刻度值文本內(nèi)容，X軸刻度值文本大小）.width（） （7）

H_X=getTextRect（X軸刻度值文本內(nèi)容，X軸刻度值文本大小）.height（）（8）

④ 系列標題區(qū)的寬W_T和高H_T計算公式如下：

W_ST=getTextRect（系列標題文本內(nèi)容，系列標題文本大小）.width（）（9）

H_ST=getTextRect（系列標題文本內(nèi)容，系列標題文本大小）.height（）（10）

（3）計算圖表繪制區(qū)的大小

圖表繪制區(qū)的寬W_C和高H_C計算公式如下：

W_C=W–W_Y –W_Y （11）

H_C=H–H_T–H_X–H_ST（12）

2.2繪制點標志

本文實現(xiàn)的平滑折線圖組件支持顯示多個系列值，為了區(qū)別不同的系列，不僅使用了不同的顏色標識不同的曲線，還使用了不同的形狀標志標識數(shù)據(jù)點。本文的平滑折線圖組件支持的數(shù)據(jù)點標志有8種，分別為圓形、正方形、等邊三角形、菱形、正五邊形、正六邊形、十字形狀和五角星形。

在點標志繪制過程中，圓形、正方形、菱形、正六邊形、十字形狀的繪制相對簡單。而等邊三角形、正五邊形和五角星形3種點標志的繪制相對復(fù)雜，需要用到Android中的Path方面的技術(shù)。為了方便控制點標志的位置和大小，點標志是在一個圓心點坐標為（centerX，?centerY）、半徑為width/2的圓內(nèi)進行繪制。下面就這3種點標志的繪制過程做詳細描述。

下面3種點標志的設(shè)計如圖2所示，Android中canvas的繪圖坐標和數(shù)學(xué)的平面直角坐標不同，向右代表X軸的正方向，向下代表Y軸的正方向。

（1）等邊三角形

等邊三角形的繪制是在圓心為（centerX， centerY）、半徑為width/2的圓內(nèi)進行的，也就是要在圓的邊上確定三個點，使這三個點能夠形成等邊三角形。如圖2（左）描述，這三個點分別為P0、P1、P2，根據(jù)三角函數(shù)可以計算出它們的坐標：

P0（centerX， centerY-width/2）

P1（centerX+（width/2）*cos（30）， centerY+（width/2）*sin（30））

P2（centerX-（width/2）*cos（30）， centerY+（width/2）*sin（30））

再把這三個點依次連接到Path對象中并形成閉環(huán)，通過繪制Path對象就可以實現(xiàn)等邊三角形的繪制。

（2）正五邊形

正五邊形的繪制是在圓心為（centerX，?centerY）、半徑為width/2的圓內(nèi)進行的，也就是要在圓的邊上確定五個點，使這五個點能夠形成正五邊形。如圖2（中）描述，這五個點分別為P0、P1、P2、P3、P4，根據(jù)三角函數(shù)可以計算出它們的坐標：

P0（centerX， centerY-width/2）

P1（centerX+（width/2）*cos（18）， center-（width/2）*sin（18））

P2（centerX+（width/2）*cos（54）， center+（width/2）*sin（54））

P3（centerX-（width/2）*cos（54）， center+（width/2）*sin（54））

P4（centerX-（width/2）*cos（18）， center-（width/2）*sin（18））

再把這五個點依次連接到Path對象中并形成閉環(huán)，通過繪制Path對象就可以實現(xiàn)正五邊形的繪制。

（3）五角星形

五角星形的繪制是在圓心為（centerX，?centerY）、半徑為width/2的圓內(nèi)進行的，也就是要在圓的邊上確定五個點，使這五個點能夠形成五角星形。如圖2（右）描述，這五個點分別為P0、P1、P2、P3、P4，根據(jù)三角函數(shù)可以計算出它們的坐標：

P0（centerX， centerY-width/2）

P1（centerX-（width/2）*cos（54）， center+（width/2）*sin（54））

P2（centerX-（width/2）*cos（18）， center-（width/2）*sin（18））

P3（centerX+（width/2）*cos（18）， center-（width/2）*sin（18））

P4（centerX-（width/2）*cos（54）， center+（width/2）*sin（54））

再把這五個點依次連接到Path對象中并形成閉環(huán)，通過繪制Path對象就可以實現(xiàn)五角星形的繪制。

2.3折線圖平滑化

平滑折線圖是在折線圖的基礎(chǔ)上改進的，用平滑的曲線代替折線來連接相鄰的數(shù)據(jù)點。本文選用3次Bezier曲線作為平滑的曲線，下面就折線圖平滑化問題做詳細描述。

（1）3次Bezier曲線

繪制平滑折線圖相當于數(shù)學(xué)問題：在平面上存在n個數(shù)據(jù)點P_i（x_i，y_i），其中i=1，2，3，…，n。在相鄰的每兩個點P_i和P_i+1之間，用一條3次Bezier曲線連接。

3次Bezier曲線由4個點確定，起點P_i，終點P_i+1，在起點和終點之間還需要2個控制點。用3次Bezier曲線把相鄰的兩個點連接起來，需要2個控制點，平面上存在n個數(shù)據(jù)點，要把這n個數(shù)據(jù)點依次用3次Bezier曲線連接起來，共需要2*（n-1）個控制點，記為C1_i和C2_i，其中i=1，2，3，…，n-1^[8]。

繪制3次Bezier曲線最為關(guān)鍵的就是確定控制點。如果在各段3次Bezier曲線的接頭處，只要求曲線函數(shù)式的一階導(dǎo)數(shù)連續(xù)^[9]，也就是說，只要求曲線的切線斜率連續(xù)，那么，只要過每一個P_i點，分別作曲線的切線，然后把位于P_i前面的控制點C2_i-1和位于P_i后面的控制點C1_i，都取在過?P_i點所作的切線上就可以了。把過P_i點的切線方向，取為與線段P_i-1P_i+1平行的方向，得到控制點坐標。

控制點C1_i的坐標為：

C1_i（x_i+S*（x_i+1-x_i-1）， y_i+S*（y_i+1-y_i-1））

控制點C2_i的坐標為：

C2_i（x_i-S*（x_i+1-x_i-1）， y_i-S*（y_i+1-y_i-1））

其中，S是一個常量，表示平滑系數(shù)，且s∈（0，?1）。

上述方法是很多應(yīng)用計算3次Bezier曲線控制點的方法，使用該方法，得到實驗效果如圖3所示。在該圖中，圓點表示數(shù)據(jù)點，五角星表示控制點，并用線條把相鄰的控制點連接起來。

從圖3上可以看到，第3個數(shù)據(jù)點的Y值大于第4個數(shù)據(jù)點的Y值，那么，連接這兩個數(shù)據(jù)點的曲線應(yīng)該是單調(diào)遞減的，但實驗效果并不是。還有第10個數(shù)據(jù)點到第11個數(shù)據(jù)點間的曲線應(yīng)該是單調(diào)遞增的，但繪制出來的效果是先遞增再遞減。這樣的效果不能很好的表示平滑折線圖的涵義，下面就控制點坐標的計算做出修正。

（2）修正控制點

把相鄰的數(shù)據(jù)點用曲線連接起來，并能表示數(shù)據(jù)是遞增或者遞減的。為了不出現(xiàn)上面描述的情況，遞增后遞減，遞減后遞增。控制點的Y坐標不應(yīng)超過（大于或小于）相應(yīng)數(shù)據(jù)點的Y坐標，把控制點的Y坐標的值修正為相應(yīng)數(shù)據(jù)點的Y坐標，得到新的控制點表示為C1_i和C2_i，其中i=1，2，3，…，n-1。

控制點C1_i的坐標為：

C1_i（x_i+S*（x_i+1-x_i-1）， y_i）

控制點C2_i的坐標為：

C2_i（x_i-S*（x_i+1-x_i-1）， y_i）

同上，S是一個常量，表示平滑系數(shù)，且s∈（0，?1）。

使用該方法，得到實驗效果如圖4所示。在該圖中，相鄰數(shù)據(jù)點間的曲線能很好的表示數(shù)據(jù)間遞增或者遞減的的趨勢。

2.4關(guān)鍵代碼

（1）計算控制點的關(guān)鍵代碼如下

……

//計算控制點

for（int j=1;j

//取數(shù)據(jù)點Pi-1

PointF p0 = points.get（i）.getMyPoints（）.get（j-1）;

//取數(shù)據(jù)點Pi

PointF p = points.get（i）.getMyPoints（）.get（j）;

//取數(shù)據(jù)點Pi+1

PointF p1 = points.get（i）.getMyPoints（）.get（j+1）;

//計算控制點相對數(shù)據(jù)點Pi的X方向的偏移，平滑系數(shù)為1/8

lX = Math.abs（（p1.x-p0.x））*（1.0/8.0）;

//計算第1個控制點

float x1 = p.x + lX;

float y1 = p.y;

//計算第2個控制點

float x2 = p.x - lX;

float y2 = p.y;

//把控制點添加到動態(tài)數(shù)組中

point1.add（new PointF（x1，y1））;

point2.add（new PointF（x2，y2））;

}

……

（2）繪制平滑折線圖的關(guān)鍵代碼如下

……

//定義Path對象

linePath = new Path（）;

//設(shè)置第1個數(shù)據(jù)點為Path的起點

linePath.moveTo（points.get（i）.getMyPoints（）.get（0）.x，points.get（i）.getMyPoints（）.get（0）.y）;

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

linePaint.setARGB（seriesItemColor.get（i%seriesItem Color.size（））.getA（），seriesItemColor.get（i%se riesItemColor.size（））.getR（），seriesItemColor.get（i% serie s ItemColor.size（））.getG（），seriesItemColor.get （i%ser ie sItemColor.size（））.getB（））;

for（int j=1;j<points.get（i）.getMyPoints（）.size（）;j++）{

//取當前要繪制的曲線的第1個控制點

float x1=point1.get（i）.getMyPoints（）.get（j-1）.x;

float y1=point1.get（i）.getMyPoints（）.get（j-1）.y;

//取當前要繪制的曲線的第2個控制點

float x2=point2.get（i）.getMyPoints（）.get（j-1）.x;

float y2=point2.get（i）.getMyPoints（）.get（j-1）.y;

//取當前要繪制的曲線的終點

float x=points.get（i）.getMyPoints（）.get（j）.x;

float y=points.get（i）.getMyPoints（）.get（j）.y;

//計算3次Bezier曲線的路徑，并把此路徑添加到Path對象linePath中

linePath.cubicTo（x1，y1，x2，y2，x，y）;

}

for（int j=0;j<points.get（i）.getMyPoints（）.size（）;j++）{

//繪制點標志

drawMark（canvas，seriesMark[i%seriesMark.?length]，seriesItemColor.get（i%seriesItemCol or.size（）），points.get（i）.getMyPoints（）.get（j）.x，?points.get（i）.getMyPoints（）.get（j）.y，dpTopx（m arkWidth））;

}

//通過Path對象linePath來實現(xiàn)對3次Bezier曲線的繪制

canvas.drawPath（linePath， linePaint）;

……

3??實驗效果

本文實現(xiàn)的平滑折線圖組件的實驗效果如圖5、圖6所示，圖5的平滑系數(shù)為0.25，圖6的平滑系數(shù)為0.125，兩個圖進行對比，平滑系數(shù)小的，曲線的曲率小，更接近于直線，反之，平滑系數(shù)大的，曲線的曲率大。該平滑折線圖可以顯示多個系列，不同的系列，不僅曲線顏色不一樣，點標志的樣式也不一樣，而且還具有動畫效果，動畫效果為依次從

左到右顯示，相比現(xiàn)有的第三方類似的組件，具有更好的用戶體驗。在實際應(yīng)用中，該平滑折線圖還可以自定義背景顏色、背景線條粗細、背景線條顏色、文本大小、文本顏色等屬性，滿足了Android開發(fā)者更多的需求，顯示效果的設(shè)置多樣化，使用更加靈活。盡管目前也有一些基于Android的平滑折線圖組件，或多或少都存在一些問題，如使用不便、不夠靈活等，相比之下，本文描述的平滑折線圖組件還是具有一定的實用性和創(chuàng)新性。

4??結(jié)語

本文提出的基于Android的平滑折線圖組件可以解決一些數(shù)據(jù)展示的問題，可以展示多個系列的數(shù)據(jù)，方便不同系列的數(shù)據(jù)進行對比，能夠清晰地反映出數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律、峰值等特征。經(jīng)過測試，布局整齊，響應(yīng)速度快，動畫效果良好，大大增強了用戶體驗，能滿足大多數(shù)Android應(yīng)用開發(fā)人員的需求。但是，還是有一些方面需要進一步研究，如動態(tài)心電圖、Bezier曲線在數(shù)據(jù)可視化中的應(yīng)用等等，在下一步

的研究工作中，將在這些方面做深入研究。

參考文獻

• 陳為， 沈則潛， 陶煜波. 數(shù)據(jù)可視化[M]. 北京： 電子工業(yè)出版社， 2013.?12： 129.
• 張文彤，?鄺春偉. SPSS統(tǒng)計分析基礎(chǔ)教程[M]. 北京市： 高等教育出版社， 2011.?11： 36.
• 彭愿， 吳阿丹， 董興鵬， 李勝樂. 用JavaScript實現(xiàn)網(wǎng)頁曲線圖動態(tài)信息顯示[J]. 軟件， 2012，33（1）： 98-101.
  • 李剛， 瘋狂Android講義（第3版）[M]
  • . 北京： 電子工業(yè)出版社， 2015.?6： 123.
• 啟艦， Android自定義控件開發(fā)入門與實踐[M]. 北京： 電子工業(yè)出版社， 2018.?7： 54.
• 高毅，?王昕，?楊克光.?Android平臺下折線圖組件的研究和實現(xiàn)[J].?現(xiàn)代計算機，?2016.?5： 69-71.
• 高毅，?楊克光，?王昕.?基于Android平臺的柱狀圖組件的設(shè)計實現(xiàn)[J].?現(xiàn)代計算機，?2016.?6： 77-80.
• 石屹，?金登男.?基于塞爾曲線擬合的心電信號模式分類方法[J].?計算機工程與設(shè)計，?2013.?4： 1437-1441.
• 劉成志，?李軍成，?楊煉.?基于三次Bézier 曲線逼近的邊緣亞像素定位方法[J]. 軟件， 2015， 36（7）： 31-35.
• 李晉宏， 戴海濤. 可穿戴設(shè)備數(shù)據(jù)挖掘及可視化技術(shù)的研究[J].?軟件， 2015， 36（12）： 69-71.