开篇
如何自定义折线分布图。
LineChartView
可支持功能点：
- 1、设置XY轴坐标颜色
- 2、设置XY轴坐标标签
- 3、设置XY轴网格的宽度
- 4、左右滑动、左右拖拽反弹
- 5、添加N条折线、设置折线颜色
- 6、设置折线区域和非折线区域颜色
- 7、开关网格线
效果截屏
立即体验
扫描以下二维码下载体验App(从0.2.3版本开始，体验App内嵌版本更新检测功能)：
JSCKit库传送门：https://github.com/JustinRoom/JSCKit
简析源码
LineChartView.java
- 1、根据坐标标签以及网格宽度测量
view的宽高。
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
visibleWidth = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
Log.i(TAG, "onMeasure: [width = " + visibleWidth + ", height = " + height + "]");
int realWidth = 0;
int realHeight = 0;
ViewGroup.LayoutParams params = getLayoutParams();
if (xLabels != null && xLabels.length > 0)
realWidth = (int) (getPaddingLeft() + getPaddingRight() + xSpace * (xLabels.length - 1) + .5f);
if (yLabels != null && yLabels.length > 0)
realHeight = (int) (getPaddingTop() + getPaddingBottom() + ySpace * (yLabels.length - 1) + 0.5f);
//compute suitable width
if (params.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
widthMeasureSpec = MeasureSpec.makeMeasureSpec(realWidth, MeasureSpec.EXACTLY);
} else {
widthMeasureSpec = MeasureSpec.makeMeasureSpec(Math.max(visibleWidth, realWidth), MeasureSpec.EXACTLY);
}
//compute suitable height
if (params.height == ViewGroup.LayoutParams.WRAP_CONTENT) {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(realHeight, MeasureSpec.EXACTLY);
} else {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.max(height, realHeight), MeasureSpec.EXACTLY);
int yCount = yLabels == null ? 0 : yLabels.length;
yCount = Math.max(1, yCount);
ySpace = height / yCount;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
- 2、绘制。
protected void onDraw(Canvas canvas)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
clipRect.set(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom());
//draw line chart area background
paint.setColor(lineChartAreaColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawRect(clipRect.left, 0, getWidth(), clipRect.bottom, paint);
//draw other area background
paint.setColor(otherAreaColor);
canvas.drawRect(0, 0, clipRect.left, clipRect.bottom, paint);
canvas.drawRect(0, clipRect.bottom, getWidth(), getHeight(), paint);
paint.setColor(axisColor);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(1);
//draw x coordinate axis
canvas.drawLine(clipRect.left, clipRect.bottom, clipRect.right, clipRect.bottom, paint);
int xLabelCount = xLabels == null ? 0 : xLabels.length;
int width = (xLabelCount - 1) * xSpace;
for (int i = 0; i < xLabelCount; i++) {
float basicX = clipRect.left + i * xSpace;
//draw x labels
drawXLabel(canvas, xLabels[i], basicX, clipRect.bottom, 10, textPaint);
//draw x scale]
if (isShowScale()) {
canvas.drawLine(basicX, clipRect.bottom, basicX, clipRect.bottom + scaleLength, paint);
}
}
//draw y coordinate axis
int scrollX = 0;//getScrollX();
canvas.drawLine(clipRect.left + scrollX, clipRect.top, clipRect.left + scrollX, clipRect.bottom, paint);
int yLabelCount = yLabels == null ? 0 : yLabels.length;
int height = (yLabelCount - 1) * ySpace;
for (int i = 0; i < yLabelCount; i++) {
float basicY = clipRect.bottom - i * ySpace;
//draw y labels
drawYLabel(canvas, yLabels[i], clipRect.left + scrollX, basicY, -10, textPaint);
//draw y scale
if (isShowScale()) {
canvas.drawLine(clipRect.left, basicY, clipRect.left - scaleLength, basicY, paint);
}
}
//draw dash grid
drawDashGrid(canvas, height, xLabelCount, yLabelCount);
//draw data
for (LineItem item : lineItems) {
drawData(canvas, item.getData(), height, 3, item.getLineColor(), 4.0f, Color.GREEN);
}
//draw y coordinate axis for floating
drawFloatingYAxis(canvas, getScrollX(), yLabelCount);
}
- 3、处理触控事件。
public boolean onTouchEvent(MotionEvent event)
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
float touchX = event.getX();
float touchY = event.getY();
if (touchX < clipRect.left
|| touchX > clipRect.right
|| touchY < clipRect.top
|| touchY > clipRect.bottom){
canMove = false;
} else {
removeCallbacks(r);
lastTouchX = touchX;
canMove = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (canMove){
float tempTouchX = event.getX();
float dx = lastTouchX - tempTouchX;
scrollBy((int) (dx + .5f), 0);
lastTouchX = tempTouchX;
}
break;
case MotionEvent.ACTION_UP:
int scrollX = getScrollX();
if (scrollX < 0){
from = scrollX;
to = 0;
if (canMove)
postDelayed(r, 10);
} else if (scrollX > 0 && (scrollX + visibleWidth > getMeasuredWidth())){
from = scrollX;
to = getMeasuredWidth() - visibleWidth;
if (canMove)
postDelayed(r, 10);
}
break;
}
return true;
}
使用示例
private LineChartView lineChartView;
String[] labels = new String[]{"", "10%", "20%", "30%", "40%", "50%", "60%", "70%"};
LabelItem[] yLabels = new LabelItem[labels.length];
for (int i = 0; i < labels.length; i++) {
LabelItem item = new LabelItem();
item.setLabel(labels[i]);
yLabels[i] = item;
}
int size = 12;
LabelItem[] xLabels = new LabelItem[size];
for (int i = 0; i < xLabels.length; i++) {
LabelItem item = new LabelItem();
item.setLabel((i + 1) + "月");
xLabels[i] = item;
}
int xSpace = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, getResources().getDisplayMetrics());
lineChartView.setXLabels(xLabels, xSpace);
// lineChartView.setYLabels(yLabels);
lineChartView.clearData();
int[] lineColors = new int[]{Color.GRAY, Color.RED, 0xFFF8E71C};
for (int i = 0; i < lineColors.length; i++) {
DataItem[] data = new DataItem[size];
Random random = new Random();
for (int j = 0; j < data.length; j++) {
DataItem item = new DataItem();
item.setRatio(random.nextFloat());
data[j] = item;
}
lineChartView.addLine(lineColors[i], data);
}
请安装体验app自行体验效果，体验app无任何广告。
童鞋们，如果你们觉得不错的话给我点个吧，谢谢！！！
篇尾
Wechat:eoy9527。
知识是从劳动中得来的，任何成就都是刻苦劳动的结晶。 —— 宋庆龄