此篇文章主要是介绍绘制单柱图表 后边还会介绍绘制双柱和圆形图表 大家可根据自己的需求更改相应代码以达到要求
效果图
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” 立即领红包
