Android中使用Canvas繪制南丁格爾玫瑰圖(Nightingale rose diagram)
南丁格爾玫瑰圖 在常規(guī)圖表中實(shí)在很驚艷,但我初看沒看懂,一查原來南丁格爾這么偉大,確實(shí)值得尊敬。
再仔細(xì)研究了下這種圖的構(gòu)成,發(fā)現(xiàn)原來就是把柱形圖的柱形換成了扇形圖的半徑來表示,當(dāng)然,變種有好多,我這只是說我理解的這種。
知道了其構(gòu)成方式后就好實(shí)現(xiàn)了,依傳入?yún)?shù)個(gè)數(shù)決定其扇形角度,依百分比決定其扇形的半徑長(zhǎng)度,然后就一切都水到渠成了。
漂亮的美圖獻(xiàn)上:

附上實(shí)現(xiàn)代碼:
package com.xcl.chart;
/**
* Canvas練習(xí)
* 自已畫南丁格爾玫瑰圖(Nightingale rose diagram)
*
* author:xiongchuanliang
* date:2014-4-12
*/
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.DisplayMetrics;
import android.view.View;
public class PanelRoseChart extends View{
private int ScrWidth,ScrHeight;
//演示用的百分比例,實(shí)際使用中,即為外部傳入的比例參數(shù)
private final float arrPer[] = new float[]{40f,50f,60f,35f,70f,80f,90f};
//演示用標(biāo)簽
private final String arrPerLabel[] = new String[]{"PostgreSQL","Sybase","DB2","國(guó)產(chǎn)及其它","MySQL","Ms Sql","Oracle"};
//RGB顏色數(shù)組
private final int arrColorRgb[][] = { {77, 83, 97},
{148, 159, 181},
{253, 180, 90},
{52, 194, 188},
{39, 51, 72},
{255, 135, 195},
{215, 124, 124}} ;
public PanelRoseChart(Context context) {
super(context);
// TODO Auto-generated constructor stub
//屏幕信息
DisplayMetrics dm = getResources().getDisplayMetrics();
ScrHeight = dm.heightPixels;
ScrWidth = dm.widthPixels;
}
public void onDraw(Canvas canvas){
//畫布背景
canvas.drawColor(Color.BLACK);
float cirX = ScrWidth / 2;
float cirY = ScrHeight / 3 ;
float radius = ScrHeight / 5 ;//150;
float arcLeft = cirX - radius;
float arcTop = cirY - radius ;
float arcRight = cirX + radius ;
float arcBottom = cirY + radius ;
RectF arcRF0 = new RectF(arcLeft ,arcTop,arcRight,arcBottom);
//畫筆初始化
Paint PaintArc = new Paint();
Paint PaintLabel = new Paint();
PaintLabel.setColor(Color.WHITE);
PaintLabel.setTextSize(16);
PaintLabel.setAntiAlias(true);
PaintArc.setAntiAlias(true);
//位置計(jì)算類
XChartCalc xcalc = new XChartCalc();
float Percentage = 0.0f;
float CurrPer = 0.0f;
float NewRaidus = 0.0f;
int i= 0;
//將百分比轉(zhuǎn)換為扇形半徑長(zhǎng)度
Percentage = 360 / arrPer.length;
Percentage = (float)(Math.round(Percentage *100))/100;
for(i=0; i<arrPer.length; i++)
{
//將百分比轉(zhuǎn)換為新扇區(qū)的半徑
NewRaidus = radius * (arrPer[i]/ 100);
NewRaidus = (float)(Math.round(NewRaidus *100))/100;
float NewarcLeft = cirX - NewRaidus;
float NewarcTop = cirY - NewRaidus ;
float NewarcRight = cirX + NewRaidus ;
float NewarcBottom = cirY + NewRaidus ;
RectF NewarcRF = new RectF(NewarcLeft ,NewarcTop,NewarcRight,NewarcBottom);
//分配顏色
PaintArc.setARGB(255,arrColorRgb[i][0], arrColorRgb[i][1], arrColorRgb[i][2]);
//在餅圖中顯示所占比例
canvas.drawArc(NewarcRF, CurrPer, Percentage, true, PaintArc);
//計(jì)算百分比標(biāo)簽
xcalc.CalcArcEndPointXY(cirX, cirY, radius - radius/2/2, CurrPer + Percentage/2);
//標(biāo)識(shí)
canvas.drawText(arrPerLabel[i],xcalc.getPosX(), xcalc.getPosY() ,PaintLabel);
//下次的起始角度
CurrPer += Percentage;
}
//外環(huán)
PaintLabel.setStyle(Style.STROKE);
PaintLabel.setColor(Color.GREEN);
canvas.drawCircle(cirX,cirY,radius,PaintLabel);
canvas.drawText("author:xiongchuanliang", 10, ScrHeight - 200, PaintLabel);
}
}
代碼實(shí)現(xiàn)起來很容易,但這種圖的設(shè)計(jì)創(chuàng)意確實(shí)非常好。 嘆服。
一定要附上南丁格爾維基百科的鏈接: http://zh.wikipedia.org/wiki/%E5%BC%97%E7%BE%85%E5%80%AB%E6%96%AF%C2%B7%E5%8D%97%E4%B8%81%E6%A0%BC%E7%88%BE
感興趣的可以看看。
- Android編程之canvas繪制各種圖形(點(diǎn),直線,弧,圓,橢圓,文字,矩形,多邊形,曲線,圓角矩形)
- Android編程開發(fā)之在Canvas中利用Path繪制基本圖形(圓形,矩形,橢圓,三角形等)
- Android使用Canvas繪制圓形進(jìn)度條效果
- Android編程實(shí)現(xiàn)canvas繪制柱狀統(tǒng)計(jì)圖功能【自動(dòng)計(jì)算寬高及分度值、可左右滑動(dòng)】
- Android編程實(shí)現(xiàn)canvas繪制餅狀統(tǒng)計(jì)圖功能示例【自動(dòng)適應(yīng)條目數(shù)量與大小】
- Android開發(fā)使用自定義View將圓角矩形繪制在Canvas上的方法
- Android 使用Canvas在圖片上繪制文字的方法
- Android Canvas繪制文字橫縱向?qū)R
相關(guān)文章
詳解Android中Intent對(duì)象與Intent Filter過濾匹配過程
這篇文章主要介紹了Android中Intent對(duì)象與Intent Filter過濾匹配過程,感興趣的小伙伴們可以參考一下2015-12-12
Android實(shí)踐之帶加載效果的下拉刷新上拉加載更多
這篇文章主要給大家介紹了關(guān)于Android實(shí)踐之下拉刷新上拉加載更多的相關(guān)資料,實(shí)現(xiàn)的效果在現(xiàn)在的很多項(xiàng)目中都能用到,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
淺談Android studio 生成apk文件時(shí)的 key store path 的問題
這篇文章主要介紹了淺談Android studio 生成apk文件時(shí)的 key store path 的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android網(wǎng)絡(luò)請(qǐng)求框架Retrofit詳解
這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)絡(luò)請(qǐng)求框架Retrofit,使用Retrofit2.0.0版本進(jìn)行實(shí)例演示,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
Android實(shí)現(xiàn)簡(jiǎn)單的文件下載與上傳
今天小編就為大家分享一篇關(guān)于Android實(shí)現(xiàn)簡(jiǎn)單的文件下載與上傳,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-12-12
android視頻播放簡(jiǎn)單實(shí)現(xiàn)示例(VideoView&MediaPlayer)
本篇文章主要介紹了android視頻播放簡(jiǎn)單實(shí)現(xiàn)示例(VideoView&MediaPlayer),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
淺談Android開發(fā)Webview的Loading使用效果
這篇文章主要為大家介紹了淺談Android開發(fā)Webview的Loading使用效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02

