本文主要是介绍什么!?几十行代码实现折线图!!!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
其实折线图很简单,并没有想象的那么复杂,首先来看看效果图。
因为折线图是填充的,且花的顺序也有讲究,后面的画的东西可能会吧前面额遮挡掉哦!
下面看代码:
public class LineGraphView extends View {private int XPoint = 30;//X坐标点private int YPoint = 520;//Y坐标点private int XScale = 100;//X轴间距private int YScale = 90;//Y轴间距private int XLength = 660;private int YLength = 370;public LineGraphView(Context context) {super(context);}public LineGraphView(Context context, AttributeSet attrs) {super(context, attrs);}public LineGraphView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setAntiAlias(true); //去锯齿paint.setColor(Color.parseColor("#38b2ff"));//画Y轴canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);//画X轴canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);String[] days = new String[6];for (int i = 0; i < days.length; i++) {days[i] = String.valueOf(25 + i);}//画折线的笔Paint paint2 = new Paint();paint2.setStyle(Paint.Style.FILL);paint2.setAntiAlias(true); //去锯齿paint2.setColor(Color.parseColor("#38b2ff"));paint2.setAlpha(160);//描边的笔Paint paint3 = new Paint();paint3.setStyle(Paint.Style.STROKE);paint3.setAntiAlias(true); //去锯齿paint3.setColor(Color.parseColor("#38b2ff"));paint3.setStrokeWidth(4);//画远点的笔Paint paint4 = new Paint();paint4.setStrokeWidth(15);paint4.setStrokeCap(Paint.Cap.ROUND);paint4.setColor(Color.parseColor("#38b2ff"));//画折线图Path path = new Path();path.moveTo(XPoint, YPoint);for (int i = 0; i < days.length; i++) {float pointy = (float) (YPoint - Math.random() * 400);path.lineTo(XPoint + (i + 1) * YScale, pointy);canvas.drawPoint(XPoint + (i + 1) * YScale, pointy, paint4);}path.lineTo(XPoint + XLength, YPoint);canvas.drawPath(path, paint2);canvas.drawPath(path, paint3);//画文字Paint paint1 = new Paint();paint1.setStyle(Paint.Style.STROKE);paint1.setAntiAlias(true); //去锯齿paint1.setColor(Color.parseColor("#ffffff"));paint1.setTextSize(30);for (int i = 0; i < days.length; i++) {canvas.drawText(days[i], XPoint + (i + 1) * YScale - 15, YPoint, paint1);//文字}}
}
代码差不多就这样,需要注意的是,坐标点的确定,文字需要在中间,所有一个文字大小的偏移。有不懂的问题欢迎提问。
github代码:https://github.com/MasterSumCloud/lineGraphView
这篇关于什么!?几十行代码实现折线图!!!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!