Android上实现柱状图表

Android上实现柱状图算法实现

第一步:

获取Android设备的屏幕大小

第二步:

在View对象中使用Canvas绘制蓝色边框与白色背景XY轴两条线,代码如下

第三步:

绘制柱状图标题

第四步:

根据数据集计算出每个系列数据所占X轴的大小,来绘制X 数据名称

第五步:

根据数据集计算出数据单元大小,并将数据单元映射为像素单元,绘制出标尺单位与

背景虚线

第六步:

根据数据集的值来计算出柱状图的高度,以及柱状图的宽度大小,映射为像素值以后

完成绘制。

程序效果图:


技术点详解:

在View中获取Android设备屏幕大小的方法为:

// get default screen size from system service WindowManager wm = (WindowManager) this.getContext().getSystemService(Context.WINDOW_SERVICE); Display display = wm.getDefaultDisplay(); int width = display.getWidth();
在Activity中获取Android设备屏幕大小的方法为:

 DisplayMetrics displaymetrics = new DisplayMetrics();  getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);  int height = displaymetrics.heightPixels;  int wwidth = displaymetrics.widthPixels;
计算X轴中每个系列所占大小的代码为:

int count = series.getSeriesCount(); int xUnit = (width - 2 - xOffset)/count;
其中xOffset, yOffset值计算公式如下:

int xOffset = (int)(width * 0.1); int yOffset = (int)(height * 0.1);
计算每个系类中,每个柱状图之间缝隙大小的为:

int barWidth = (int)(xUnit/Math.pow(itemList.size(),2)); int startPos = xOffset + 2 + xPadding + xUnit*i; int interval = barWidth/2;
其中barWidth表示每个柱状矩形的宽度,interval表示同一数据系列中表示

每个矩形之间的间隔。

另外一些技巧:

1.在起始位置填充额外的长度大小,让柱状图不会紧贴Y轴,看上去更美观

默认的xPadding值等于10, int xPadding = 10;

2.使用反锯齿功能,让图形看上去更柔和,启用反锯齿功能的代码为:

myPaint.setAntiAlias(true);
3.当要填充一个矩形时候设置Paint的Style

myPaint.setStyle(Style.FILL);
当要绘制一个边框矩形时候设置Paint的Style

myPaint.setStyle(Style.STROKE);
4.如何绘制虚线(dotted line, dash line),使用DashPathEffect对象

本文中的实现代码如下:

myPaint.setStyle(Style.STROKE); myPaint.setStrokeWidth(1); myPaint.setColor(Color.LTGRAY); myPaint.setPathEffect(new DashPathEffect(new float[] {1,3}, 0));

相关的Class说明:

DataSeries对象用来构造数据集,根据key来得到对应的数据系列。源代码如下:

package com.gloomyfish;  import java.util.HashMap; import java.util.List;  public class DataSeries { 	private HashMap<String, List<DataElement>> map; 	 	public DataSeries() { 		map = new HashMap<String, List<DataElement>>(); 	} 	 	public void addSeries(String key, List<DataElement> itemList) { 		map.put(key, itemList); 	} 	 	public List<DataElement> getItems(String key) { 		return map.get(key); 	} 	 	public int getSeriesCount() { 		return map.size(); 	} 	 	public String[] getSeriesKeys() { 		return map.keySet().toArray(new String[0]); 	}  } 
DataElement数据元素,属性有数据名称,值大小,显示颜色等,源代码如下:

package com.gloomyfish;  public class DataElement { 	 	public DataElement(String name, float value, int color) { 		this.itemName = name; 		this.value = value; 		this.color = color; 	} 	public String getItemName() { 		return itemName; 	} 	public void setItemName(String itemName) { 		this.itemName = itemName; 	} 	public float getValue() { 		return value; 	} 	public void setValue(float value) { 		this.value = value; 	} 	 	public void setColor(int color) { 		this.color = color; 	} 	 	public int getColor() { 		return this.color; 	} 	 	private String itemName; 	private int color; 	private float value; } 
BarChartPanel独立的组件,继承自Android View对象,是柱状图的图形组件,可以为

任何版本的Android使用。源代码如下:

package com.gloomyfish;  import java.text.NumberFormat; import java.util.ArrayList; import java.util.List;  import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.DashPathEffect; import android.graphics.Paint; import android.graphics.Paint.Style; import android.view.Display; import android.view.View; import android.view.WindowManager;  public class BarChartPanel extends  View{ 	 	private String plotTitle; 	private DataSeries series; 	public final static int[] platterTable = new int[]{Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW, Color.CYAN}; 	public BarChartPanel(Context context, String plotTitle) { 		this(context); 		this.plotTitle = plotTitle; 	} 	 	public BarChartPanel(Context context) { 		super(context); 	} 	 	public void setSeries(DataSeries series) { 		this.series = series; 	} 	 	@Override       public void onDraw(Canvas canvas) {  		 		// get default screen size from system service 		WindowManager wm = (WindowManager) this.getContext().getSystemService(Context.WINDOW_SERVICE); 		Display display = wm.getDefaultDisplay(); 		int width = display.getWidth(); 		 		// remove application title height 		int height = display.getHeight() - 80;  		System.out.println("width = " + width); 		System.out.println("height = " + height); 		 		// draw background 		Paint myPaint = new Paint(); 		myPaint.setColor(Color.BLUE); 		myPaint.setStrokeWidth(2); 		canvas.drawRect(0, 0, width, height, myPaint); 		myPaint.setColor(Color.WHITE); 		myPaint.setStrokeWidth(0); 		canvas.drawRect(2, 2, width-2, height-2, myPaint); 		 		// draw XY Axis 		int xOffset = (int)(width * 0.1); 		int yOffset = (int)(height * 0.1); 		System.out.println("xOffset = " + xOffset); 		 		myPaint.setColor(Color.BLACK); 		myPaint.setStrokeWidth(2); 		canvas.drawLine(2+xOffset, height-2-yOffset, 2+xOffset, 2, myPaint); 		canvas.drawLine(2+xOffset, height-2-yOffset, width-2, height-2-yOffset, myPaint); 		 		// draw text title 		myPaint.setAntiAlias(true); 		myPaint.setStyle(Style.FILL); 		canvas.drawText(plotTitle, (width-2)/4, 30, myPaint); 		 		// draw data series now...... 		if(series == null) { 			getMockUpSeries(); 		} 		int xPadding = 10; 		if(series != null) { 		int count = series.getSeriesCount(); 		int xUnit = (width - 2 - xOffset)/count; 			String[] seriesNames = series.getSeriesKeys(); 			for(int i=0; i<seriesNames.length; i++) { 				canvas.drawText(seriesNames[i], xOffset + 2 + xPadding + xUnit*i, height-yOffset + 10, myPaint); 			} 			 			// Y Axis markers 			float min = 0, max = 0; 			for(int i=0; i<seriesNames.length; i++) { 				List<DataElement> itemList = series.getItems(seriesNames[i]); 				if(itemList != null && itemList.size() > 0) { 					for(DataElement item : itemList) { 						if(item.getValue() > max) { 							max = item.getValue(); 						} 						if(item.getValue() < min) { 							min = item.getValue(); 						} 					} 				} 			} 			 			int yUnit = 22;	 			int unitValue = (height-2-yOffset)/yUnit; 			myPaint.setStyle(Style.STROKE); 			myPaint.setStrokeWidth(1); 			myPaint.setColor(Color.LTGRAY); 			myPaint.setPathEffect(new DashPathEffect(new float[] {1,3}, 0)); 			float ymarkers = (max-min)/yUnit; 			NumberFormat nf = NumberFormat.getInstance(); 			nf.setMinimumFractionDigits(2); 			nf.setMaximumFractionDigits(2); 			for(int i=0; i<20; i++) { 				canvas.drawLine(2+xOffset, height-2-yOffset - (unitValue * (i+1)), width-2, height-2-yOffset - (unitValue * (i+1)), myPaint); 			} 			 			// clear the path effect 			myPaint.setColor(Color.BLACK); 			myPaint.setStyle(Style.STROKE); 			myPaint.setStrokeWidth(0); 			myPaint.setPathEffect(null);  			for(int i=0; i<20; i++) { 				float markValue = ymarkers * (i+1); 				canvas.drawText(nf.format(markValue), 3, height-2-yOffset - (unitValue * (i+1)), myPaint); 			} 			 			// draw bar chart now 			myPaint.setStyle(Style.FILL); 			myPaint.setStrokeWidth(0); 			String maxItemsKey = null; 			int maxItem = 0; 			for(int i=0; i<seriesNames.length; i++) { 				List<DataElement> itemList = series.getItems(seriesNames[i]); 				int barWidth = (int)(xUnit/Math.pow(itemList.size(),2)); 				int startPos = xOffset + 2 + xPadding + xUnit*i; 				int index = 0; 				int interval = barWidth/2; 				if(itemList.size() > maxItem) { 					maxItemsKey = seriesNames[i]; 					maxItem = itemList.size(); 				} 				for(DataElement item : itemList) { 					myPaint.setColor(item.getColor()); 					int barHeight = (int)((item.getValue()/ymarkers) * unitValue); 					canvas.drawRect(startPos + barWidth*index + interval*index, height-2-yOffset-barHeight,  							startPos + barWidth*index + interval*index + barWidth, height-2-yOffset, myPaint); 					index++; 				} 			} 			 			List<DataElement> maxItemList = series.getItems(maxItemsKey); 			int itemIndex = 0; 			int basePos = 10; 			for(DataElement item : maxItemList) { 				myPaint.setColor(item.getColor()); 				canvas.drawRect(basePos + itemIndex * 10, height-yOffset + 15, basePos + itemIndex * 10 + 10, height-yOffset + 30, myPaint); 				myPaint.setColor(Color.BLACK); 				canvas.drawText(item.getItemName(), basePos + (itemIndex+1) * 10, height-yOffset + 25, myPaint); 				itemIndex++; 				basePos = basePos + xUnit*itemIndex; 			} 		} 	} 	          public DataSeries getMockUpSeries() {     	series = new DataSeries();     	List<DataElement> itemListOne = new ArrayList<DataElement>();     	itemListOne.add(new DataElement("shoes",120.0f, platterTable[0]));     	itemListOne.add(new DataElement("jacket",100.0f, platterTable[1]));     	series.addSeries("First Quarter", itemListOne);     	     	List<DataElement> itemListTwo = new ArrayList<DataElement>();     	itemListTwo.add(new DataElement("shoes",110.0f, platterTable[0]));     	itemListTwo.add(new DataElement("jacket",50.0f, platterTable[1]));     	series.addSeries("Second Quarter", itemListTwo);     	     	List<DataElement> itemListThree = new ArrayList<DataElement>();     	itemListThree.add(new DataElement("shoes",100.0f, platterTable[0]));     	itemListThree.add(new DataElement("jacket",280.0f, platterTable[1]));     	series.addSeries("Third Quarter", itemListThree);     	     	List<DataElement> itemListFour = new ArrayList<DataElement>();     	itemListFour.add(new DataElement("shoes",120.0f, platterTable[0]));     	itemListFour.add(new DataElement("jacket",100.0f, platterTable[1]));     	series.addSeries("Fourth Quarter", itemListFour);     	return series;     }  } 
BarChartDemoActivity测试该组件的Android Activity启动类。

package com.gloomyfish;  import android.app.Activity; import android.os.Bundle;  public class BarChartDemoActivity extends Activity {     /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(new BarChartPanel(this, "Quarter Vs. sales volume"));     }  }
转载请务必注明出处

你可能感兴趣的:(android,String,service,null,Class,float)