项目需要走势图,什么柱状图、走势图,网上都有一堆现成的框架,但是我项目中只需要走势图,我用第三方框架简直是累赘,毕竟占大小,而且走势图也简单,所以就自己写了,好久没写博客了,就记下吧,供大家参考下,其实很简单,大佬勿喷。先不废话,看效果图吧:
记录了七天的走势,原点的x坐标不是0,因为我们不是用来做坐标轴,而是记录数据,原点的坐标根据实际需求情况而定的。
好了,废话说完了,开始动手吧,动手之前我们得先想想怎么实现,思路是怎样的。
首先,我们需要知道我们需要画什么。
1.我们需要画x,y轴;
2.我们需要画x,y轴的刻度和刻度值;
3.我们需要画y轴上的每个刻度的横线;
4.我们需要画数据的点;
5.数据的点需要连线;
大致就是这些,还有些文字的大小啊,颜色啊等等,都可以自己设置;
然后,我们需要知道怎么画。
大家都知道在视图坐标系中,一个view,原点是它的左上角,所以我们需要实际的原点,真实的原点,即走势图中x,y轴的交接点。所以我们得先确定实际原点,假设实际原点的坐标是(xo,yo),averageX代表x轴每个刻度间的距离,那图片中x轴的11.2所在的坐标就是相对于原点的(averageX,0),所以实际坐标就是(xo+averageX,yo+0)。那么y轴的1000所在的坐标就是相对于原点的(0,-averageY),所以实际坐标是(0+xo,-averageY+yo)注意,android中,x轴向右为正,y轴向下为正,所以1000所在的坐标是负的。哎,语文没学好,可能表达有点不清楚?总之呢,就是为了确定每个点的算法才这样计算的。
首先,我们自定义View继承自View,然后相关属性:
private Context context;
//x,y轴的画笔,刻度文字的画笔,数据点的画笔,数据连线的画笔,y轴刻度横线的画笔,数据点文字的画笔
private Paint xyPaint, textPaint, pointPaint, pointslinePaint, yLinePaint, pointTextPaint;
private int padding; //内部距离,设置个默认的padding值
private int width, height; //控件实际高度和宽度
private float xSize, ySize;//x和y轴的长度(因为控件留了内部距离,不然x,y轴就贴着控件边缘导致看不清,有内部距离,所以长度和控件的宽高不一样了)
private int defaultWidth; //默认宽度
private int defaultHeight; //默认高度
private int xOrigin, yOrigin; //相对原点的坐标
private