【www.zhuodaoren.com--推荐阅读】
canvas,画饼状图(一)
Android利用Canvas画柱状图和饼图源码
Canvas draw bar charts and pie charts in android
AndroidÀûÓÃCanvas»-Öù״ͼºÍ±ýͼԴÂë
Canvas draw bar charts and pie charts in android£¡Below is the result: Main Activity PieColumar.java:
package com.dean;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import com.entity.CountEntity;
public class PieColumar extends Activity {
CountEntity entity = new CountEntity();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
DrawView myView = new DrawView(PieColumar.this);
setContentView(myView);
}
public class DrawView extends View {
private int value, location;
// For statistical
private double flagIn, flagOut, flagLeft;
private float clotheRate, studyRate, trafficRate, otherRate;
public DrawView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Set the background color to light gray
canvas.drawColor(Color.LTGRAY);
// Define a Paint
Paint paint = new Paint();
// Anti-aliasing
paint.setAntiAlias(true);
// Draw the abscissa
paint.setColor(Color.BLACK);
canvas.drawLine(40, 200, 300, 200, paint);
// Draw the vertical axis
paint.setColor(Color.BLACK);
canvas.drawLine(40, 30, 40, 200, paint);
// raw a horizontal line
paint.setColor(Color.BLACK);
for (int i = 170; i > 20; i -= 30) {
canvas.drawLine(40, i, 280, i, paint);
}
// Set the title font size
paint.setTextSize(18);
paint.setColor(Color.RED);
canvas.drawText(
getResources().getString(R.string.graph_page_count), 65,
26, paint);
canvas.drawText(
getResources().getString(R.string.graph_page_consume), 100, 250, paint);
// Set the font of each item is black
paint.setColor(Color.BLACK);
paint.setTextSize(15);
// Income, expenditure, balance
canvas.drawText(
getResources().getString(R.string.second_page_countIn), 60, 220, paint);
canvas.drawText(
getResources().getString(R.string.second_page_countOut),【canvas,画饼状图】
130, 220, paint);
canvas.drawText(
getResources().getString(R.string.second_page_countLeft),
200, 220, paint);
canvas.drawText(getResources().getString(R.string.graph_page_top), 5, 40, paint);
canvas.drawText(
getResources().getString(R.string.graph_page_right), 265,
218, paint);
// The vertical axis corresponds to the value of
for (value = 300, location = 180; value 1500) {
entity.setIncome(1500);
canvas.drawText(flagIn + "", 100, 45, paint);
} else if (entity.getIncome() > 0 && entity.getIncome() 1500) {
entity.setOutcome(1500);
canvas.drawText(flagOut + "", 160, 45, paint);
} else if (entity.getOutcome() > 0 && entity.getOutcome()1500) {
entity.setLeft(1500);
canvas.drawText(flagLeft + "", 220, 45, paint); } else if (entity.getLeft() >= 0 && entity.getLeft() CountEntity.java
package com.entity;
public class CountEntity {
double outClothe = 400;
double outStudy = 200;
double outTraffic = 150;
double outOther = 450;
double income = 1200;
double outcome = 1050;
double left = 150;
public double getOutClothe() {
return outClothe;
}
public void setOutClothe(double outClothe) {
this.outClothe = outClothe;
}
public double getOutStudy() {
return outStudy;
}
public void setOutStudy(double outStudy) {
this.outStudy = outStudy;
}
public double getOutTraffic() {
return outTraffic;
}
public void setOutTraffic(double outTraffic) {
this.outTraffic = outTraffic;
}
public double getOutOther() {
return outOther;
}
public void setOutOther(double outOther) {
this.outOther = outOther;
}
public double getIncome() {
return income;
}
public void setIncome(double income) {
this.income = income;
}
public double getOutcome() {
return outcome;
}【canvas,画饼状图】
public void setOutcome(double outcome) {
this.outcome = outcome;
}
public double getLeft() {
return left;
}
public void setLeft(double left) {
this.left = left;
}
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android Developer - AiwGame.com</string> <string name="graph_page_count">Income, expenditure, balance of histogram</string>
<string name="graph_page_consume">Income</string>
<string name="second_page_countIn">Expend</string>
<string name="second_page_countOut">Balance</string>
<string name="second_page_countLeft">Subtotal</string>
<string name="graph_page_top">$</string>
<string name="graph_page_right">...</string>
<string name="second_page_moneyoutOne">Clothes</string> <string name="second_page_moneyoutTwo">Study</string>
<string name="second_page_moneyoutThree">Traffic</string> <string name="second_page_moneyoutFour">Other</string>
</resources>
лл´ó¼Ò²ÈСµÜÍøÕ¾£º
canvas,画饼状图(二)
Html5 canvas画趋势图、柱状图
Html5 canvas画趋势图、柱状图
首先，请确保你调试程序使用的浏览器支持html5。（火狐、google chrome、ie9）
然后，选择一个认识html5标签的开发环境，我使用的是vs2010。要让VS2010识别html5页面很简单，首先安装vs2010旗舰版，然后，升级到vs2010sp1，然后打开编程环境，在“工具”—“选项”—“文本编辑器”—“HTML”—“验证”—“目标”下拉列表中选“Html5”即可。值得一提的是，VS2010对javascript的联想能力比以前的版本要好得多。
下面进入主题，怎样在客户端绘制图像。本人已经将经常用到的方法写到一个js文件中，下面直接贴上js代码，读者可以把以下代码直接复制到一个js文件中即可，后面是对函数的说明：
Js代码：
function DrawTrend(canvas,title,titlefont, left, right, top, bottom, data, ySegment, sXaxis, sYaxis, axisFont, color, xSegment) {
var height = Number($(canvas).attr('height'));
var width = Number($(canvas).attr('width'));
var cxt = canvas.getContext("2d");
cxt.fillStyle = "#f0f0f0";
cxt.clearRect(0, 0, width, height);
if (data == null || data.length < 1) {
DrawString(cxt, "无数据", titlefont, "#000000", "center", "middle", width / 2, height / 2); }
else {
DrawLine(cxt, left, height - bottom, left, top, "");
DrawLine(cxt, left, height - bottom, width - right, height - bottom, "");
DrawString(cxt, title, titlefont, "#000000", "center", "middle", width / 2, top / 2); var stime = "";
var subx = 0;
var i = 0;
var tempdata = new Array();
for (i = 0; i < data.length; i++) {
tempdata[i] = data[i][1];
}
var Yaxis = GetYaxis(tempdata, ySegment);
var yinterval = (Yaxis[0] - Yaxis[1]) / ySegment;
//画纵轴间隔线
var suby = 0;
for (i = 1; i <= ySegment; i++) {
suby = height - bottom - (height - (bottom + top)) * i / ySegment; //副横轴纵坐标 DrawString(cxt, String(Yaxis[1] + i * yinterval), axisFont, "", "right", "middle", left - 3, suby);
DrawLine(cxt, left, suby, width - right, suby, "#aaaaaa");
}
DrawString(cxt, String(Yaxis[1]), axisFont, "", "right", "middle", left - 3, height - bottom); //起始
纵坐标
DrawString(cxt, sYaxis, axisFont, "", "center", "bottom", left, top - 10); //纵坐标单位
DrawString(cxt, sXaxis, "", "", "right", "bottom", width - 3, height - bottom); //横坐标单位
if (xSegment != null) {
//找出横轴间隔点时间(分段)
var n = data.length / xSegment;
var xinter = (width - (left + right)) / xSegment;
//画横轴间隔线
for (i = 1; i <= xSegment; i++) {
subx = left + xinter * i; //副横轴坐标
stime = String(data[parseInt(n * i) - 1][0]);
DrawString(cxt, stime, axisFont, "", "center", "top", subx, height - bottom + 3); DrawLine(cxt, subx, top, subx, height - bottom, "#aaaaaa");
}
//通过数值计算点坐标
xinter = (width - (left + right)) / (data.length - 1); //横轴间隔像素数
var points = new Array();
for (i = 0; i < data.length; i++) {
points[i] = new Array();
points[i][0] = left + i * xinter;
points[i][1] = height - bottom - (height - (bottom + top)) * (data[i][1] - Yaxis[1]) / (Yaxis[0] - Yaxis[1]);
}
}
else {
//通过数值计算点坐标
xinter = (width - (left + right)) / (data.length - 1); //横轴间隔像素数
var points = new Array();
//计算x轴刻度间隔
var xsegment = 1;
if (data.length > 9) {【canvas,画饼状图】
for (i = 9; i > 1; i--) {
if (data.length % i < 2) {
xsegment = parseInt(data.length / i);
break;
}
}
}
for (i = 0; i < data.length; i++) {
points[i] = new Array();
points[i][0] = left + i * xinter;
points[i][1] = height - bottom - (height - (bottom + top)) * (data[i][1] - Yaxis[1]) / (Yaxis[0] - Yaxis[1]);
if (i % xsegment == 0 && i != 0) {
//横轴坐标 时间
var stime = data[i][0];
DrawString(cxt, stime, axisFont, "", "center", "top", left + i * xinter, height - bottom + 3);
DrawLine(cxt, left + i * xinter, top, left + i * xinter, height - bottom, "#aaaaaa"); }
}
}
DrawLines(cxt, points, color);
}
}
参数说明：
canvas：画布对象，必须用document.getElementById("");
title：标题
titlefont：标题字体，例如："18px 微软雅黑"，
left, right, top, bottom：坐标轴左右上下边距
data：数据，二维数组，其中data[i][1]必须为number类型，可以使用Number()函数将其他类型转换为数值类型
ySegment：Y轴分段数量
sXaxis：横
本文来源：http://www.zhuodaoren.com/tuijian297561/
推荐访问:如何画饼状图