android 单柱图表绘制

此篇文章主要是介绍绘制单柱图表 后边还会介绍绘制双柱和圆形图表 大家可根据自己的需求更改相应代码以达到要求
效果图

image.png

数据类

public class ChartValue {
   protected int value;
   protected float tempValueY;
   protected int barColor;
   protected int valueColor;
   protected String xAxisLable;

   public ChartValue(int value, int barColor, String xAxisLable) {
       this.value = value;
       this.barColor = barColor;
       this.valueColor=barColor;
       this.xAxisLable = xAxisLable;
   }

   public int getValueColor() {
       return valueColor;
   }

   public void setValueColor(int valueColor) {
       this.valueColor = valueColor;
   }

   /*public String getShowValue(){
       return value+"";
   }*/
   public float getTempValueY() {
       return tempValueY;
   }

   public void setTempValueY(float tempValueY) {
       this.tempValueY = tempValueY;
   }

   public int getValue() {
       return value;
   }

   public void setValue(int value) {
       this.value = value;
   }

   public int getBarColor() {
       return barColor;
   }

   public void setBarColor(int barColor) {
       this.barColor = barColor;
   }

   public String getxAxisLable() {
       return xAxisLable;
   }

   public void setxAxisLable(String xAxisLable) {
       this.xAxisLable = xAxisLable;
   }
}

将数据按要求显示 实现此类

public abstract class ShowValueFormat<T> {

   public abstract String valueFormat(T t);
}

图表绘制类

public class SingleBarChartView extends View {
   Context mCox;
   int yMaxValue=100;//y抽最大值
   float yIntervalSpace;//y抽横线间隔距离
   int yIntervalCount=5;//y抽间隔横线个数  不包含x抽

   int viewWidth,viewHeight;//view的宽度 高度
   int gridLineColor;//间隔线颜色
   int gridListStrokeSize;
   int xAxisStrokeSize;//x轴线的宽度
   int xAxisColor;//x抽线颜色
   int xAxisTextSize;//x抽字体大小
   int xAxisTextColor;//x抽字体颜色
   int valueTextSize;//值的字体大小
   int valueTextColor;//值的字体颜色
   int xAxisTextTopSpace;//x轴字体距离x抽线的距离
   int barWide;//bar的宽度
   int valueStrSpace;

   Paint mPaint;

   private ArrayList<ChartValue> mDatas=new ArrayList<>();
   ShowValueFormat showValueFormat;
   public SingleBarChartView(Context context) {
       super(context);
       init(context);
   }

   public SingleBarChartView(Context context, @Nullable AttributeSet attrs) {
       super(context, attrs);
       init(context);
   }

   public SingleBarChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       init(context);
   }

   @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   public SingleBarChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
       super(context, attrs, defStyleAttr, defStyleRes);
       init(context);

   }

   private void init(Context context){
       initValues();

       mCox=context;
       yMaxValue=100;//y抽最大值
//        yInterval;//y抽横线间隔距离
       yIntervalCount=5;//y抽间隔横线个数  不包含x抽
       gridListStrokeSize=1;
       xAxisStrokeSize=1;
       barWide=DensityUtils.sp2px(mCox,12);//value bar的宽度

       gridLineColor= 0xffff0000;//间隔线颜色 ContextCompat.getColor(mCox, R.color.common_divider_color)
       xAxisColor=gridLineColor;//x抽线颜色
       xAxisTextSize= DensityUtils.sp2px(mCox,10);//x抽字体大小
       xAxisTextColor=ContextCompat.getColor(mCox, R.color.font_accent);//x抽字体颜色
       valueTextSize=xAxisTextSize;//值的字体大小
       valueTextColor=0xff5D84EB;//值的字体颜色
       xAxisTextTopSpace=DensityUtils.dip2px(mCox,3);//x轴字体距离x抽线的距离
       valueStrSpace=DensityUtils.dip2px(mCox,3);
       mPaint=new Paint();

       post(new Runnable() {
           @Override
           public void run() {
               viewWidth=getWidth();
               viewHeight=getHeight();
               initAxisTextPaint(mPaint);
               float textHeight=mPaint.getFontMetrics().bottom-mPaint.getFontMetrics().top;
               yIntervalSpace=(viewHeight-textHeight-xAxisTextTopSpace)/yIntervalCount;
           }
       });
   }
   public void setShowValueFormat(ShowValueFormat showValueFormat) {
       this.showValueFormat = showValueFormat;
   }
   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       if(mDatas.size()==0){
           return;
       }
       //水平方向的grid的线
       initGridLinePaint(mPaint);
       for(int i=0;i<yIntervalCount;i++){
           canvas.drawLine(0,i*yIntervalSpace,viewWidth,i*yIntervalSpace,mPaint);
       }
       //x轴
       initXAxisPaint(mPaint);
       canvas.drawLine(0,yIntervalCount*yIntervalSpace,viewWidth,yIntervalCount*yIntervalSpace,mPaint);
       if(mDatas.size()==0){
           return;
       }

       float xIntervalSpace=viewWidth/mDatas.size();
       float xAxisY=yIntervalCount*yIntervalSpace;//x轴的坐标y值
       boolean needDrawAgain=false;
       for(int i=0;i<mDatas.size();i++){
           //y轴方向的grid的线
           initGridLinePaint(mPaint);
           float x=i*xIntervalSpace+xIntervalSpace/2;
           canvas.drawLine(x,0,x,xAxisY,mPaint);

           ChartValue value=mDatas.get(i);
           //x轴的lable
           initAxisTextPaint(mPaint);
           canvas.drawText(value.getxAxisLable(),x,xAxisY-mPaint.getFontMetrics().top+xAxisTextTopSpace,mPaint);
           //bar
           initBarPaint(mPaint,value.getBarColor());
           float actualValueY=value.getValue()*yIntervalCount*yIntervalSpace/yMaxValue;
           if(value.getTempValueY()<actualValueY){
               value.setTempValueY(value.getTempValueY()+5);
               if(value.getTempValueY()>actualValueY){
                   value.setTempValueY(actualValueY);
               }
           }
           if(value.getTempValueY()<actualValueY){
               needDrawAgain=true;
           }
           float tempY=yIntervalCount*yIntervalSpace-value.getTempValueY();
           canvas.drawLine(x,xAxisY,x,tempY,mPaint);
           //值的文字
           initValueTextPaint(mPaint,value.getValueColor());
           canvas.drawText(getShowValue(value),x,tempY-valueStrSpace-mPaint.getFontMetrics().bottom,mPaint);
       }
       if(needDrawAgain){
           postInvalidateDelayed(10);
       }

   }
   private void initGridLinePaint(Paint paint){
       paint.reset();
       paint.setColor(gridLineColor);
       paint.setStrokeWidth(gridListStrokeSize);
       paint.setAntiAlias(true);
   }
   private void initXAxisPaint(Paint paint){
       paint.reset();
       paint.setColor(xAxisColor);
       paint.setStrokeWidth(xAxisStrokeSize);
       paint.setAntiAlias(true);
   }
   private void initAxisTextPaint(Paint paint){
       paint.reset();
       paint.setColor(xAxisTextColor);
       paint.setTextSize(xAxisTextSize);
       paint.setTextAlign(Paint.Align.CENTER);
       paint.setAntiAlias(true);
   }
   private void initBarPaint(Paint paint,int barColor){
       paint.reset();
       paint.setColor(barColor);
       paint.setStrokeWidth(barWide);
       paint.setAntiAlias(true);
   }
   private void initValueTextPaint(Paint paint,int valueTextColor){
       paint.reset();
       paint.setColor(valueTextColor);
       paint.setTextSize(valueTextSize);
       paint.setTextAlign(Paint.Align.CENTER);
       paint.setAntiAlias(true);
   }
   private void initValues(){
       mDatas.add(new ChartValue(80,0xff5C84EB,"25号"));
       mDatas.add(new ChartValue(66,0xffB4C9FF,"24号"));
       mDatas.add(new ChartValue(33,0xffB4C9FF,"23号"));
       mDatas.add(new ChartValue(78,0xffB4C9FF,"22号"));
       mDatas.add(new ChartValue(20,0xffB4C9FF,"21号"));
       mDatas.add(new ChartValue(44,0xffB4C9FF,"20号"));
       mDatas.add(new ChartValue(50,0xffB4C9FF,"19号"));
       setShowValueFormat(new ShowValueFormat<ChartValue>() {
           @Override
           public String valueFormat(ChartValue value) {
               return value.getValue()+"";
           }
       });
   }
   public String getShowValue(ChartValue value){
       if(showValueFormat==null){
           return value.getValue()+"";
       }
       return showValueFormat.valueFormat(value);
   }
}

红小.jpg

打开支付宝首页搜索“527896564” 立即领红包