效果图:
主函数
public class MainActivity extends AppCompatActivity {
private List<LineChart> mData;
private LineChartView lineChartView;
private LinearLayout mLinearLayout;
private HorizontalScrollView mHorizontalScrollView;
private boolean isTouch=false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLinearLayout= (LinearLayout) findViewById(R.id.linearlayout);
mHorizontalScrollView= (HorizontalScrollView) findViewById(R.id.horizontalscrollview);
lineChartView = (LineChartView) findViewById(R.id.linechart);
mLinearLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
isTouch=!isTouch;
if (isTouch){
init();
mHorizontalScrollView.setVisibility(View.VISIBLE);
lineChartView.setmData(mData);
}
else {
mHorizontalScrollView.setVisibility(View.GONE);
}
}
});
}
private void init() {
mData = new ArrayList<>();
mData.add(new LineChart("13", 210));
mData.add(new LineChart("14", 410));
mData.add(new LineChart("15", 220));
mData.add(new LineChart("16", 400));
mData.add(new LineChart("17", 210));
mData.add(new LineChart("18", 210));
mData.add(new LineChart("19", 270));
mData.add(new LineChart("20", 400));
mData.add(new LineChart("21", 360));
mData.add(new LineChart("22", 1000));
mData.add(new LineChart("23", 270));
mData.add(new LineChart("24", 170));
mData.add(new LineChart("25", 140));
mData.add(new LineChart("26", 290));
mData.add(new LineChart("27", 270));
mData.add(new LineChart("28", 800));
mData.add(new LineChart("29", 150));
mData.add(new LineChart("30", 400));
mData.add(new LineChart("01", 360));
mData.add(new LineChart("02", 140));
mData.add(new LineChart("03", 1000));
mData.add(new LineChart("04", 150));
mData.add(new LineChart("05", 440));
mData.add(new LineChart("06", 140));
mData.add(new LineChart("07", 870));
mData.add(new LineChart("08", 560));
mData.add(new LineChart("09", 170));
mData.add(new LineChart("10", 453));
mData.add(new LineChart("11", 440));
mData.add(new LineChart("12", 300));
}
}
LineChartView
public class LineChartView extends View {
private int width;
private int height;
private int max = 5;//设置最大值
private int Chartwidth = 80;//表格的宽度
private int Chartheight = 60;//表格的高度
private Paint mPaintWhite;
private float topDistance = 30;//表格上面的白框距离
private float bottomdistance = 50;//表格下面的白框距离
private Paint mPaintBackground;//表格背景色画笔
private Paint mPaintChart;//表格的画笔
private Paint mPaintCover;//填充的颜色
private Paint mPaintCircle;//画圆圈的画笔
private Paint mPaintLineChart;//画折线的画笔
private Paint mPaintVisitValues;//拜访量的画笔
private Paint mPaintDate;//画日期
private Path mPath;//画线的
private List<LineChart> mData;
public void setmData(List<LineChart> mData) {
this.mData = mData;
requestLayout();//onMesure
invalidate();//onDraw
}
public LineChartView(Context context, AttributeSet attrs) {
super(context, attrs);
//dip和px之间的转换
// topDistance=Dptools.dip2px(context,100);
// bottomdistance=Dptools.dip2px(context,50);
// Chartheight=Dptools.dip2px(context,60);
// Chartwidth=Dptools.dip2px(context,80);
mPaintWhite = new Paint();
mPaintWhite.setColor(Color.WHITE);
mPaintWhite.setStyle(Paint.Style.FILL);
mPaintBackground = new Paint();
mPaintBackground.setColor(Color.argb(0xff, 0xf5, 0xf5, 0xf5));
mPaintBackground.setStyle(Paint.Style.FILL);
mPaintChart = new Paint();
mPaintChart.setColor(Color.argb(0xff, 0xdc, 0xdc, 0xdc));
mPaintChart.setStyle(Paint.Style.FILL);
mPaintChart.setAntiAlias(true);
mPaintCover = new Paint();
mPaintCover.setColor(Color.argb(0xff, 0xe6, 0xe6, 0xfa));
mPaintCover.setStyle(Paint.Style.FILL);
mPaintCover.setAlpha(10);//调节透明度的
// mPaintCover.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));
mPaintCircle = new Paint();
mPaintCircle.setColor(Color.argb(0xff, 0x00, 0xff, 0xff));
mPaintCircle.setStrokeWidth(4);
mPaintCircle.setStyle(Paint.Style.STROKE);
mPaintCircle.setAntiAlias(true);
mPaintLineChart = new Paint();
mPaintLineChart.setColor(Color.argb(0xff, 0x00, 0xff, 0xff));
mPaintLineChart.setStrokeWidth(3);
mPaintLineChart.setStyle(Paint.Style.FILL);
mPaintLineChart.setAntiAlias(true);
mPaintDate = new Paint();
mPaintDate.setColor(Color.argb(0xff, 0xc0, 0xc0, 0xc0));
mPaintDate.setStyle(Paint.Style.FILL);
mPaintDate.setTextSize(15);
mPaintVisitValues = new Paint();
mPaintVisitValues.setColor(Color.argb(0xff, 0x00, 0xff, 0xff));
mPaintVisitValues.setTextSize(20);
mPaintVisitValues.setStyle(Paint.Style.FILL);
mPaintVisitValues.setAntiAlias(true);
mPath = new Path();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mData == null) {
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
} else {
width = ((mData.size() + 1) * Chartwidth);
}
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
setMeasuredDimension(width, height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画矩形 上、中、下
canvas.drawRect(0, 0, width, topDistance, mPaintWhite);
canvas.drawRect(0, topDistance, width, topDistance + 4 * Chartheight, mPaintBackground);
canvas.drawRect(0, topDistance + 4 * Chartheight, width, topDistance + 4 * Chartheight + bottomdistance, mPaintWhite);
//画表格横线
for (int i = 0; i < 5; i++) {
canvas.drawLine(15, topDistance + i * Chartheight, width, topDistance + i * Chartheight, mPaintChart);
}
//画表格竖线和标注日期和拜访量和画圆圈
if (mData != null) {
for (int i = 0; i < mData.size(); i++) {
LineChart lineChart = mData.get(i);
canvas.drawLine(15 + Chartwidth * i, topDistance, 15 + Chartwidth * i, topDistance + 4 * Chartheight, mPaintChart);
canvas.drawText(lineChart.getDate(), 15 + Chartwidth * i - mPaintDate.measureText(lineChart.getDate()) / 2, topDistance + 4 * Chartheight + 15, mPaintDate);
canvas.drawCircle(15 + Chartwidth * i, topDistance + 4 * Chartheight - lineChart.getPercent() / max, 6, mPaintCircle);
String visitNumber = lineChart.getPercent() / max + "";
canvas.drawText(visitNumber, 15 + Chartwidth * i, topDistance + 4 * Chartheight - lineChart.getPercent() / max - 15, mPaintVisitValues);
}
//画折线,将圆圈连起来
for (int i = 0; i < mData.size() - 1; i++) {
LineChart lineChart = mData.get(i);
canvas.drawLine(15 + Chartwidth * i + 7, topDistance + 4 * Chartheight - lineChart.getPercent() / max, 15 + Chartwidth * (i + 1) - 7, topDistance + 4 * Chartheight - mData.get(i + 1).getPercent() / max, mPaintVisitValues);
}
//画填充的边界
for (int i = 0; i < mData.size() - 1; i++) {
LineChart lineChart = mData.get(i);
mPath.moveTo(15 + Chartwidth * i, topDistance + 4 * Chartheight);
mPath.lineTo(15 + Chartwidth * i, topDistance + 4 * Chartheight);
mPath.lineTo(15 + Chartwidth * i, topDistance + 4 * Chartheight - lineChart.getPercent() / max);
mPath.lineTo(15 + Chartwidth * (i + 1), topDistance + 4 * Chartheight - mData.get(i + 1).getPercent() / max);
mPath.lineTo(15 + Chartwidth * (i + 1), topDistance + 4 * Chartheight);
mPath.close();
canvas.drawPath(mPath, mPaintCover);
}
}
}
}
LineChart 类
public class LineChart {
private String date;
private int percent;
public LineChart(){
}
public LineChart(String date, int percent) {
this.date = date;
this.percent = percent;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public int getPercent() {
return percent;
}
public void setPercent(int percent) {
this.percent = percent;
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/linearlayout"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#000000"
android:text="客户拜访"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="10月人均拜访:1.7"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="昨日总拜访:9"/>
<HorizontalScrollView
android:id="@+id/horizontalscrollview"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.redcircle.myprictise.linechart.LineChartView
android:id="@+id/linechart"
android:layout_width="1000dp"
android:layout_height="match_parent" />
</HorizontalScrollView>
</LinearLayout>
</RelativeLayout>
linechart.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.redcircle.myprictise.linechart.LineChartView
android:id="@+id/linechartview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>