建站
咨詢
售后
建站咨詢
新聞中心
上圖
創(chuàng)新互聯(lián)專注于新城企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開發(fā)。新城網(wǎng)站建設(shè)公司,為新城等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
說(shuō)到android的折線圖，我就必須要說(shuō)一下關(guān)于繪制view的幾個(gè)重要的工具，Canvas(畫布)，Paint(畫筆)，Path(路徑)。
Canvas顧名思義就是用來(lái)作畫的板子或者說(shuō)是布。沒(méi)有它就算有了畫筆也是無(wú)從下手。當(dāng)然我們可以通過(guò)Canvas的各種屬性來(lái)設(shè)置Canvas，例如：
canvas.drawColor(Color.BLACK);//設(shè)置背景顏色為黑色
其他設(shè)置就自己去查看api了，這里不多講了。
Paint畫筆，用來(lái)作畫的筆，不管我們?cè)诋嫴忌厦胬L制什么，都離不開畫筆，只要用到canvas的地方請(qǐng)帶上畫筆。和畫布一樣，畫筆也可以設(shè)計(jì)他獨(dú)特的屬性，例如顏色呀，粗細(xì)呀虛實(shí)線呀什么的，這里也不多說(shuō)了。
Path路徑，就像是我們小學(xué)時(shí)候用的尺子一樣，如果要畫一條直線就得沿著尺子的邊緣話，這就是路徑的功能，不過(guò)這里的路徑?jīng)]有那么必須，簡(jiǎn)單的線還是可以直接用paint畫出來(lái)的，畫折線圖用到path的地方主要是畫虛線，其實(shí)我也不是很明白為何必須用path，不過(guò)如果直接用paint+PathEffect+坐標(biāo)來(lái)畫畫出來(lái)就永遠(yuǎn)是直線了，大概因?yàn)樘摼€是一節(jié)節(jié)的畫的吧。
上面簡(jiǎn)單的介紹了一下用到的工具，下面就講講我畫折線圖的一些思路吧。
首先，一個(gè)坐標(biāo)圖必然要有原點(diǎn)坐標(biāo)，X,Y軸，繪制折線的基線表格，最后就是折線啦。
原點(diǎn)可以自己定義繪制在任何地方，我這里由于不知道手機(jī)屏幕的具體大小，怕繪制出來(lái)比較雞肋，于是做了個(gè)屏幕自適應(yīng)：
原點(diǎn)X坐標(biāo)=邊距（也就是距離邊界的寬度，android的像素點(diǎn)是從屏幕的左上角開始的）
原點(diǎn)Y坐標(biāo) = 屏幕的高度 - 邊距
X軸的長(zhǎng)度 = 屏幕寬度 - 2*邊距
Y軸的長(zhǎng)度 = 屏幕高度 - 2*邊距
X軸的單位長(zhǎng)度 = (屏幕寬度 - 2 * 邊距) / (X軸所顯示的標(biāo)線數(shù) - 1);
Y軸的單位長(zhǎng)度 = （屏幕高度 - 2* 邊距 ）/(Y軸所顯示的標(biāo)線數(shù) - 1）
畫圖的時(shí)候各個(gè)點(diǎn)坐標(biāo)的計(jì)算方法是：
Y軸坐標(biāo) = （Y軸的單位長(zhǎng)度 /（Y軸1點(diǎn)顯示的數(shù)字 - 原點(diǎn)Y軸顯示的數(shù)字））*（數(shù)據(jù)的Y軸數(shù)據(jù)-原點(diǎn)數(shù)字）
X軸同理
這樣整個(gè)折線圖的畫法就很清晰啦。下面直接上代碼
// 畫表格
private void drawTable(Canvas canvas) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.GRAY);
Path path = new Path();
PathEffect effects = new DashPathEffect(new float[] { 5, 5, 5, 5 }, 1);
paint.setPathEffect(effects);
// 縱向線
for (int i = 1; i * Xscale <= (this.getWidth() - this.Margin); i++) {
int startX = Xpoint + i * Xscale;
int startY = Ypoint;
int stopY = Ypoint - (this.Ylabel.length - 1) * Yscale;
path.moveTo(startX, startY);
path.lineTo(startX, stopY);
canvas.drawPath(path, paint);
}
// 橫向線
for (int i = 1; (Ypoint - i * Yscale) >= this.Margin; i++) {
int startX = Xpoint;
int startY = Ypoint - i * Yscale;
int stopX = Xpoint + (this.Xlabel.length - 1) * Xscale;
path.moveTo(startX, startY);
path.lineTo(stopX, startY);
paint.setColor(Color.DKGRAY);
canvas.drawPath(path, paint);
paint.setColor(Color.WHITE);
paint.setTextSize(this.Margin / 2);
canvas.drawText(this.Ylabel[i], this.Margin / 4, startY
+ this.Margin / 4, paint);
}
} // 畫橫縱軸
private void drawXLine(Canvas canvas, Paint p) {
canvas.drawLine(Xpoint, Ypoint, this.Margin, this.Margin, p);
canvas.drawLine(Xpoint, this.Margin, Xpoint - Xpoint / 3, this.Margin
+ this.Margin / 3, p);
canvas.drawLine(Xpoint, this.Margin, Xpoint + Xpoint / 3, this.Margin
+ this.Margin / 3, p);
}
private void drawYLine(Canvas canvas, Paint p) {
canvas.drawLine(Xpoint, Ypoint, this.getWidth() - this.Margin, Ypoint,
p);
canvas.drawLine(this.getWidth() - this.Margin, Ypoint, this.getWidth()
- this.Margin - this.Margin / 3, Ypoint - this.Margin / 3, p);
canvas.drawLine(this.getWidth() - this.Margin, Ypoint, this.getWidth()
- this.Margin - this.Margin / 3, Ypoint + this.Margin / 3, p);
} // 畫數(shù)據(jù)
private void drawData(Canvas canvas) {
Paint p = new Paint();
p.setAntiAlias(true);
p.setColor(Color.WHITE);
p.setTextSize(this.Margin / 2);
// 縱向線
for (int i = 1; i * Xscale <= (this.getWidth() - this.Margin); i++) {
int startX = Xpoint + i * Xscale;
canvas.drawText(this.Xlabel[i], startX - this.Margin / 4,
this.getHeight() - this.Margin / 4, p);
canvas.drawCircle(startX, calY(Data[i]), 4, p);
canvas.drawLine(Xpoint+(i-1)*Xscale, calY(Data[i-1]), startX, calY(Data[i]), p);
}
}
/**
*
* @param y
* @return
*/
private int calY(int y){
int y0 = 0 ;
int y1 = 0 ;
try{
y0 = Integer.parseInt(Ylabel[0]);
y1 = Integer.parseInt(Ylabel[1]);
}catch(Exception e){
return 0;
}
try{
return Ypoint-((y-y0)*Yscale/(y1-y0)) ;
}catch(Exception e){
return 0;
}
}最后不要忘了
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLACK);
Paint p1 = new Paint();
p1.setStyle(Paint.Style.STROKE);
p1.setAntiAlias(true);
p1.setColor(Color.WHITE);
p1.setStrokeWidth(2);
init();
this.drawXLine(canvas, p1);
this.drawYLine(canvas, p1);
this.drawTable(canvas);
this.drawData(canvas);
}完整項(xiàng)目的代碼在下面，有興趣的可以自己下載來(lái)玩玩
新聞名稱：簡(jiǎn)單的android折線圖繪制
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/poicgo.html
