自定义柱状图
在网上查了好多还是没有找到自己想要的。但是找到了一个比较相近的。初来乍到,第一次写博客。好紧张
先附上资料
这里写链接内容
我是根据他写的自己改造的,还请博主谅解。
先看效果
直接上代码吧:
public class CustomBarChartView extends View {
private String COLOR = "";
private int hPerHeig;
private int relativeHeight;
public CustomBarChartView(Context context) {
super(context);
init(context, null);
}
public CustomBarChartView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
// 坐标轴 轴线 画笔:
private Paint mlinePaint;
// 坐标轴水平内部 虚线画笔
private Paint mlinePaintDott;
// 绘制文本的画笔
private Paint titlePaint;
// 矩形画笔 柱状图的样式信息
private Paint recPaint;
/**
* 初始化
*
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
mlinePaint = new Paint();
mlinePaintDott = new Paint();
titlePaint = new Paint();
recPaint = new Paint();
mlinePaint.setColor(Color.DKGRAY);
mlinePaintDott.setColor(Color.LTGRAY);
titlePaint.setColor(Color.BLACK);
}
//矩形数据
private int[] rectDate;
//x轴数据
private String[] xTitles;
//y轴数据
private String[] yTitlesStrings;
//矩形蓝色的数据
private int[] rectBlueDate;
/**
* 更新矩形数据
*
* @param thisData
* @param color
*/
public void updateRectData(int[] thisData, String color) {
rectDate = thisData;
COLOR = color;
this.postInvalidate();
}
/**
* 更新矩形数据
*
* @param thisDataBlue
*/
public void updateBlueRectData(int[] thisDataBlue) {
rectBlueDate = thisDataBlue;
this.postInvalidate();
}
/**
* 更新x轴数据
*
* @param xTitle
*/
public void updateXText(String[] xTitle) {
xTitles = xTitle;
this.postInvalidate();
}
/**
* 更新y轴数据
*
* @param yTitlesString
*/
public void updateYText(String[] yTitlesString, int danwei) {
yTitlesStrings = yTitlesString;
relativeHeight = danwei;
this.postInvalidate();
}
/**
* 重写onDraw()方法
*
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getMeasuredWidth();
// 1. 画线
canvas.drawLine(80, 5, 80, 320, mlinePaint);
canvas.drawLine(80, 320, width - 10, 320, mlinePaint);
// 2 绘制坐标内部的水平线 横向的
int leftHeight = 300;
int hPerHeight = leftHeight / 10;
mlinePaintDott.setTextAlign(Paint.Align.CENTER);
mlinePaintDott.setTextSize(25);
mlinePaintDott.setAntiAlias(true);
for (int i = 0; i < 11; i++) {
canvas.drawLine(80, leftHeight - (hPerHeight * i), width - 5, leftHeight - (hPerHeight * i), mlinePaintDott);
}
// 3,绘制坐标内部的水平线 竖直方向的的
for (int i = 0; i < 30; i++) {
canvas.drawLine(80 + (i + 1) * 20, 0, 80 + (i + 1) * 20, 320, mlinePaintDott);
}
// 3 绘制 Y 轴方向的数据
if (yTitlesStrings != null && yTitlesStrings.length > 0) {
Paint.FontMetrics metrics = titlePaint.getFontMetrics();
//相对高度
hPerHeig = leftHeight / (yTitlesStrings.length - 1);
int descent = (int) metrics.descent;
titlePaint.setTextAlign(Paint.Align.RIGHT);
titlePaint.setTextSize(20);
titlePaint.setAntiAlias(true);
for (int i = 0; i < yTitlesStrings.length; i++) {
canvas.drawText(yTitlesStrings[i], 70, 20 + i * hPerHeig + descent, titlePaint);
}
}
int step = 0;
// 4 绘制 X 轴方向数据
if (xTitles != null) {
int xAxisLength = width - 110;
int columCount = xTitles.length + 1;
step = xAxisLength / columCount;
for (int i = 0; i < columCount - 1; i++) {
canvas.drawText(xTitles[i], 110 + step * (i + 1), 360, titlePaint);
}
}
/**红色的*/
if (rectDate != null && rectDate.length > 0) {
int thisCount = rectDate.length;
for (int i = 0; i < thisCount; i++) {
int value = rectDate[i];
int i1 = relativeHeight / hPerHeig;
int i2 = value / i1;
int top = leftHeight + 20 - i2;
if (COLOR == "RED") {
recPaint.setColor(Color.RED);
}else {
recPaint.setColor(Color.parseColor("#3299cc"));
}
Rect rect = new Rect();
rect.left = 100 + step * (i + 1) - 10;
rect.right = 100 + step * (i + 1) + 10;
L.i("top :" + top);
rect.top = top;
rect.bottom = 320;
canvas.drawRect(rect, recPaint);
}
}
/**蓝色的*/
if (rectBlueDate != null && rectBlueDate.length > 0) {
int thisCount = rectBlueDate.length;
for (int i = 0; i < thisCount; i++) {
int value = rectBlueDate[i];
int i1 = relativeHeight / hPerHeig;
int i2 = value / i1;
int top = leftHeight + 20 - i2;
recPaint.setColor(Color.parseColor("#3299cc"));
Rect rect = new Rect();
rect.left = 100 + step * (i + 1) - 40;
rect.right = 100 + step * (i + 1) - 20;
rect.top = top;
rect.bottom = 320;
canvas.drawRect(rect, recPaint);
}
}
}
public void updateAllDate() {
postInvalidate();
}
}
因为我这个项目数据有些大,而且是可变的。所以X轴 和 Y轴的数据也是我代码计算好之后设置进来的。
如果你想要使用的话,可以直接在这个类里面写死X轴 和 Y轴的数据。也可以直接调用上面的四个update方法;