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"));     }  }

转载请务必注明出处

更多相关文章

随机推荐