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

 }