首页 > 代码库 > 手把手教你画AndroidK线分时图及指标

手把手教你画AndroidK线分时图及指标


         先废话一下:来到公司之前,项目是由外包公司做的,面试初,没有接触过分时图k线这块,觉得好难,我能搞定不!但是一段时间之后,发现之前做的那是一片稀烂,但是这货是主功能啊,迟早的自己操刀,痛下决心,开搞,本想用开源控件,但是想自己实现一下:接着有了本文

          开始用surfaceview,但是这货在上下滑动的时候会出现黑边,这个问题我也是纠结了好久,想想产品肯定会打回,打回了还丢脸,算了没多少东西就用view吧,废话真tm多,开始吧。

         1,创建项目(Android studio)

         2,对了,先上个效果图吧,节省各位的时间:

技术分享

        3,把Activity设置为横屏,不设置也无所谓,我觉得横屏的好看点

      android:screenOrientation="landscape"

         4,建俩基类分时图点数据和K线每点的数据,备注的很清楚了

/**
 * 分时所需要的 数据字段
 */
public class CMinute {
	//时间
	public long time;
	//最新价
	public double price;
	//交易量
	public long count;
	//均价
	public double average ;
	//涨跌幅
	public double rate ;
	//价格
	public double money ;
	public long getTime() {
		return time;
	}

	public String getTimeStr() {
		SimpleDateFormat sdf = new SimpleDateFormat("HH:mm");
		try {
			return sdf.format(new Date(time * 1000));
		} catch (Exception e) {
			return "--:--";
		}
	}
}

public class StickData implements Parcelable {

    //时间
    private long time;
    //开盘
    private double open;
    //收盘
    private double close;
    //最高
    private double high;
    //最低
    private double low;
    //量
    private long count;
    //昨收
    private double last;
    //涨跌幅
    private double rate;
    //价格
    private double money;
    //计算均线的零时保存的值
    private double maValue;
    //5段均线
    private double sma5;
    //10段均线
    private double sma10;
    //20段均线
    private double sma20;
    //量5段均线
    private double countSma5;
    //量10段均线
    private double countSma10;
    //MACD的三个参数
    private double dif;//线
    private double dea;//线
    private double macd;//柱状
    //KDJ的三根线
    private double k;
    private double d;
    private double j;
    //计算K时需要
    private double rsv;
    //K线资金
    //超大单净值
    private double sp;
    //大单净值
    private double bg;
    //中单净值
    private double md;
    //小单净值
    private double sm;
    

5,画图的步骤

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1,初始化需要的数据
        initWidthAndHeight();
        //2,画网格
        drawGrid(canvas);
        //3,画线(分时线的价格线、均价线或K线的均线)
        drawLines(canvas);
        if(lineType != TYPE_FENSHI) {
            //4,如果是K线另外画烛形图
            drawCandles(canvas);
        }
        //5,写上XY轴的文字(写早了会被覆盖)
        drawText(canvas);
        //6,画需要显示的指标
        switch (indexType) {
            case INDEX_VOL:
                drawVOL(canvas);
                break;
            case INDEX_ZJ:
                drawZJ(canvas);
                break;
            case INDEX_MACD:
                drawMACD(canvas);
                break;
            case INDEX_KDJ:
                drawKDJ(canvas);
                break;
        }
    }

6,画图实现

其实分时线就是画线,烛形图也是画线,但是多画个矩形而已,要是分析成这样的话,就简单学多了,那么接下来我来教你画线画矩形。。。。

此处省略10000字,好了说完了(其实是不用说了,就那么俩方法drawLine,drawRect),接下来我们重点说说位置的计算:

    我们实际拿到的数据,不可能直接展示到坐标系的,因为可能很大很小,先来说说Y轴吧

  

Y轴

    y = height - input * height / (max - min);

     y:计算结果

     height:view高度

     max:显示的一组数据最大值

     min:显示的一组数据中最小值

            展示分时线时,需要在均价和价格取出最大值和最小值

            展示K线时,可以从最高和最低中取出最大最小值

X轴

   x = width / drawcount * i;

    x:计算结果

    width:view宽度

     drawcount:展示的总个数

     如上证指数,上午下午各开盘2小时,因为分时图是按分钟未单位,则drawcount就是60*4,K线则需要按照宽度计算出drawcount,我的代码中,烛形图和烛形图之后的空白比为10:2


7,指标

分时图的资金由于用到了别的接口,demo中就不予展示了,可以参考K线的资金动向指标(就几条线,简单吧)

MACD、KDJ、VOL5、VOL10、VOL20这些指标可以百度一下,我就不多少了,计算方法都一样,我直接贴代码,k线的四个指标,除了资金,其他指标直接可以通过K线的高低开收昨收计算出来的,

public class IndexParseUtil {

    //均线跨度(SMA5,SMA10,SMA20),注意修改该值时,需要同时增加StickData里面的sma字段、修改本类initSma方法,否则不会生效
    public static final int START_SMA5 = 5;
    public static final int START_SMA10 = 10;
    public static final int START_SMA20 = 20;
    //26:计算MACD时,26段close均价DIF=(EMA(CLOSE,12) - EMA(CLOSE,26))
    public static final int START_DIF = 26;
    //35:计算MACD时,35段开始取前九日DIF值 DEA:=EMA(DIF,9)
    public static final int START_DEA = 35;
    //12:计算K值
    public static final int START_K = 12;
    //15:计算DJ
    public static final int START_DJ = 15;
    //9:计算RSV
    public static final int START_REV = 9;

    public static final int[] SMA = {START_SMA5,START_SMA10, START_SMA20};

    /**
     * 计算MACD
     * @param list
     */
    public static void initMACD(List<StickData> list) {
        if(list == null) return;
        //1计算出所有的DIF
        for(int i = 0; i < list.size(); i++) {
            if(i + START_DIF <= list.size()) {
                list.get(i + START_DIF - 1).setDif(getCloseSma(list.subList(i + START_DIF - 12, i + START_DIF)) - getCloseSma(list.subList(i + START_DIF - 26, i + START_DIF)));
            }
        }
        //2计算出所有的DEA
        for(int i = 0; i < list.size(); i++) {
            if(i + START_DEA <= list.size()) {
                list.get(i + START_DEA - 1).setDea(getDifSma(list.subList(i + START_DEA - 9, i + START_DEA)));
                //3计算MACD
                list.get(i + START_DEA - 1).setMacd(2d * (list.get(i + START_DEA - 1).getDif() - list.get(i + START_DEA - 1).getDea()));
            }
        }

    }

    /**
     * 计算KDJ
     * @param list
     */
    public static void initKDJ(List<StickData> list) {
        if(list == null) return;
        //1计算出所有的REV
        for(int i = 0; i < list.size(); i++) {
            if(i + START_REV <= list.size()) {
                //第9日开始计算RSV
                StickData data = http://www.mamicode.com/list.get(i + START_REV - 1);>

8,滑动与缩放

这个就简单了,分时线不支持滑动和缩放,只有k线需要:因为k线的数据较多,默认一屏展示不全,所以需要直接滑动,缩放的话,可能是想看大趋势吧(我猜的)!


方法就是直接通过手势监听滑动和缩放,


那么:我拿到600个数据,展示了500-600,滑动的时候,只要吧这100个往前移动就可以了,如滑到450-550;缩放的话,就更简单了,如果一屏展示100,那你设置一屏展示80或120就是缩放了,是不是so easy!

9,十字线

好了,图画完了,需要十字线出来走两步了!



先看看我的布局吧

   <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="686">

            <eat.arvin.com.mychart.view.FenshiView
                android:id="@+id/cff_fenshiview"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <eat.arvin.com.mychart.view.CrossView
                android:id="@+id/cff_cross"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone" />
        </RelativeLayout>

懂了吧,这俩货是分开的,我只要在fenshiView里面捕获单击事件,然后判断该点是否有数据,有的话在CrossView画线,对画两根线,欧了

   @Override
        public boolean onSingleTapUp(final MotionEvent e) {
            //延时300毫秒显示,为双击腾出时间
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    //单击显示十字线
                    if(crossView != null) {
                        if (crossView.getVisibility() == View.GONE) {
                            onCrossMove(e.getX(), e.getY());
                        }
                    }
                }
            }, DOUBLE_TAP_DELAY);
            return super.onSingleTapUp(e);
        }

crossView

public class CrossView extends View {
    /**
     * 十字线移动的监听
     */
    public interface OnMoveListener {
        /**
         * 十字线移动(回调到数据存放的位置,判断是否需要画线后,再调用本界面画线方法)
         *
         * @param x x轴坐标
         * @param y y轴坐标
         */
        void onCrossMove(float x, float y);

        /**
         * 十字线消失的回调
         */
        void onDismiss();
    }
    private CrossBean bean;
    //手势控制
    private GestureDetector gestureDetector;
    private OnMoveListener onMoveListener;

    public CrossView(Context context, AttributeSet attrs) {
        super(context, attrs);
        gestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() {
            @Override
            public boolean onSingleTapUp(MotionEvent e) {
                //单击隐藏十字线
                setVisibility(GONE);
                if (onMoveListener != null)
                    onMoveListener.onDismiss();
                return super.onSingleTapUp(e);
            }

            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                //滑动时,通知到接口
                if (onMoveListener != null) {
                    onMoveListener.onCrossMove(e2.getX(), e2.getY());
                }
                return super.onScroll(e1, e2, distanceX, distanceY);
            }

        });
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (gestureDetector != null)
            gestureDetector.onTouchEvent(event);
        return true;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawCrossLine(canvas);
    }
    /**
     * //根据x,y画十字线
     *
     * @param canvas
     */
    private void drawCrossLine(Canvas canvas) {
        //当该点没有数据的时候,不画
        if (bean.x < 0 || bean.y < 0) return;
        boolean isJunXian = bean.y2 >= 0;
        Paint p = new Paint();
        p.setAntiAlias(true);
        p.setColor(ColorUtil.COLOR_CROSS_LINE);
        p.setStrokeWidth(2f);
        p.setStyle(Paint.Style.FILL);
        //横线
        canvas.drawLine(0, bean.y, getWidth(), bean.y, p);
        //竖线
        canvas.drawLine(bean.x, 0, bean.x, getHeight(), p);
        if (isJunXian) {
            //均线的时候才画出圆点
            //画十字线和均线价格线交汇的圆
            canvas.drawCircle(bean.x, bean.y, 10, p);
            p.setColor(ColorUtil.COLOR_SMA_LINE);
            canvas.drawCircle(bean.x, bean.y2, 10, p);
        }
        p.setColor(Color.BLACK);
        p.setTextSize(32f);
        //1, 写价格(竖线靠左时,价格需要写到右边)
        drawPriceTextWithRect(canvas, bean.x, bean.y, bean.price, p);
        //2, 写时间
        drawTimeTextWithRect(canvas, bean.x, bean.getTime(), p);
        //3,写指标的文字
        drawIndexTexts(canvas);
        p.reset();
    }

    private void drawIndexTexts(Canvas canvas) {
        if(bean.indexText == null || bean.indexColor == null) return;
        Paint p = new Paint();
        p.setAntiAlias(true);
        p.setTextSize(26f);
        float x = 0;
        float y = getHeight() * (ChartConstant.MAIN_SCALE + ChartConstant.TIME_SCALE) + 25;
        for(int i = 0;i < bean.indexText.length; i++) {
            p.setColor(bean.indexColor[i]);
            canvas.drawText(bean.indexText[i], x, y, p);
            x += LineUtil.getTextWidth(p, bean.indexText[i]) + 30;
        }

    }

    /**
     * 写时间,并且带框
     */
    private void drawTimeTextWithRect(Canvas canvas, float x, String time, Paint p) {
        p.setTextAlign(Paint.Align.LEFT);
        float textWidth = LineUtil.getTextWidth(p, time) + 20;
        float y = getHeight() * ChartConstant.MAIN_SCALE;
        Paint rp = new Paint();
        rp.setColor(Color.WHITE);
        rp.setStyle(Paint.Style.FILL);
        rp.setStrokeWidth(2f);
        //1,先画白底
        float startX = x - textWidth / 2;
        float endX = x + textWidth / 2;
        if(startX < 0) {
            startX = 2f;
            endX = startX + textWidth;
        }
        if(endX > getWidth()) {
            endX = getWidth() - 2;
            startX = endX - textWidth;
        }
        canvas.drawRect(startX, y + 2, endX, y + 30, rp);
        rp.setColor(Color.BLACK);
        rp.setStyle(Paint.Style.STROKE);
        //2,再画黑框
        canvas.drawRect(startX, y + 2, endX, y + 30, rp);
        //3,写文字
        canvas.drawText(time, startX + 10, y + 27.5f, p);
    }

    /**
     * 写文字,并且为文字带上背景,等于在文字后方画上一个Rect
     */
    private void drawPriceTextWithRect(Canvas canvas, float x, float y, String text, Paint p) {
        float textWidth = LineUtil.getTextWidth(p, text) + 10;
        Paint rp = new Paint();
        rp.setColor(Color.WHITE);
        rp.setStyle(Paint.Style.FILL);
        rp.setStrokeWidth(2f);
        float startY = y - 15f;
        float endY = y + 15f;
        if(startY < 0) {
            startY = 0f;
            endY = startY + 30f;
        } else if(endY > getHeight()) {
            endY = getHeight();
            startY = endY - 30f;
        }

        if (x < 100) {
            //X轴在左侧,该框画在右侧
            //1,先画白底
            canvas.drawRect(getWidth() - textWidth, startY, getWidth(), endY, rp);
            rp.setColor(Color.BLACK);
            rp.setStyle(Paint.Style.STROKE);
            //2,再画黑框
            canvas.drawRect(getWidth() - textWidth, startY, getWidth(), endY, rp);
            p.setTextAlign(Paint.Align.RIGHT);
            canvas.drawText(text, getWidth() - 5f, endY - 3, p);
        } else {
            //X轴在右侧,改框画左侧
            canvas.drawRect(0, startY, textWidth, endY, rp);
            rp.setColor(Color.BLACK);
            rp.setStyle(Paint.Style.STROKE);
            canvas.drawRect(0, startY, textWidth, endY, rp);
            p.setTextAlign(Paint.Align.LEFT);
            canvas.drawText(text, 5f, endY - 3, p);
        }
    }

    /**
     * 画分时线的十字线
     */
    public void drawLine(CrossBean bean) {
        this.bean = bean;
        postInvalidate();
    }

    /**
     * 设置移动监听
     *
     * @param onMoveListener
     */
    public void setOnMoveListener(OnMoveListener onMoveListener) {
        this.onMoveListener = onMoveListener;
    }

}

10,一些优化

    
分时线:服务器只需要返回变化的点,不需要全部返回,这些缺失的点直接使用前一分钟补全


K线:由于k线数据巨多,所以如果在服务器计算好指标再返回客户端的话,会使数据量*1.5差不多,所以这些指标还是在本地算好了,只需要算需要显示的,且不需要重复计算



11,github

https://github.com/xuzhou4520/AChart1


手把手教你画AndroidK线分时图及指标