一步一步教你写股票走势图——K线图二（图表联动）

最新推荐文章于 2023-10-08 23:38:32 发布

置顶 A-Jiang

最新推荐文章于 2023-10-08 23:38:32 发布

阅读量1.7w

点赞数 5

文章标签： mpandroid chart 联动高亮股票

本文链接：https://blog.csdn.net/qqyanjiang/article/details/51684050

版权

demo更新地址https://github.com/AndroidJiang/StockChart

K线图越做发现坑越多，跟之前做的分时图完全不是一个重量级的啊，分时图不需要滚动，少走了很多弯路，K线图因为滚动的问题，会导致很多其他问题，比如：

多个图表之间滚动时怎么联动
高亮滚动冲突
放缩联动
…

表对齐

下面我们就开始介绍本节的内容，要想实现图表之间的联动，那么必须得保证图表是对齐的，联动起来效果才能保持一致，图表对齐功能，我们在分时图部分已经讲解，代码一致，还是简单贴下代码：

 /*设置量表对齐*/
    private void setOffset() {
        float lineLeft = combinedchart.getViewPortHandler().offsetLeft();
        float barLeft = barChart.getViewPortHandler().offsetLeft();
        float lineRight = combinedchart.getViewPortHandler().offsetRight();
        float barRight = barChart.getViewPortHandler().offsetRight();
        float offsetLeft, offsetRight;
 /*注：setExtraLeft...函数是针对图表相对位置计算，比如A表offLeftA=20dp,B表offLeftB=30dp,则A.setExtraLeftOffset(10),并不是30，还有注意单位转换*/
        if (barLeft < lineLeft) {
            offsetLeft = Utils.convertPixelsToDp(lineLeft - barLeft);
            barChart.setExtraLeftOffset(offsetLeft);
        } else {
            offsetLeft = Utils.convertPixelsToDp(barLeft-lineLeft);
            combinedchart.setExtraLeftOffset(offsetLeft);
        }
  /*注：setExtraRight...函数是针对图表绝对位置计算，比如A表offRightA=20dp,B表offRightB=30dp,则A.setExtraLeftOffset(30),并不是10，还有注意单位转换*/
        if (barRight < lineRight) {
            offsetRight = Utils.convertPixelsToDp(lineRight);
            barChart.setExtraRightOffset(offsetRight);
        } else {
            offsetRight = Utils.convertPixelsToDp(barRight);
            combinedchart.setExtraRightOffset(offsetRight);
        }

    }

表联动

表的联动这里包括滚动联动、放缩联动，具体操作效果图还是参照自选股：

这里写图片描述

博主在stackover上发现了有人曾提过类似问题：

这里写图片描述

幸运的是有人也回答了这个问题，具体请点击上面的链接查看。

public class CoupleChartGestureListener implements OnChartGestureListener {

    private static final String TAG = CoupleChartGestureListener.class.getSimpleName();

    private Chart srcChart;
    private Chart[] dstCharts;

    public CoupleChartGestureListener(Chart srcChart, Chart[] dstCharts) {
        this.srcChart = srcChart;
        this.dstCharts = dstCharts;
    }

  ……

    @Override
    public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
//        Log.d(TAG, "onChartScale " + scaleX + "/" + scaleY + " X=" + me.getX() + "Y=" + me.getY());
        syncCharts();
    }

    @Override
    public void onChartTranslate(MotionEvent me, float dX, float dY) {
//        Log.d(TAG, "onChartTranslate " + dX + "/" + dY + " X=" + me.getX() + "Y=" + me.getY());
        syncCharts();
    }

    public void syncCharts() {
        Matrix srcMatrix;
        float[] srcVals = new float[9];
        Matrix dstMatrix;
        float[] dstVals = new float[9];

        // get src chart translation matrix:
        srcMatrix = srcChart.getViewPortHandler().getMatrixTouch();
        srcMatrix.getValues(srcVals);

        // apply X axis scaling and position to dst charts:
        for (Chart dstChart : dstCharts) {
            if (dstChart.getVisibility() == View.VISIBLE) {
                dstMatrix = dstChart.getViewPortHandler().getMatrixTouch();
                dstMatrix.getValues(dstVals);

                dstVals[Matrix.MSCALE_X] = srcVals[Matrix.MSCALE_X];
                dstVals[Matrix.MSKEW_X] = srcVals[Matrix.MSKEW_X];
                dstVals[Matrix.MTRANS_X] = srcVals[Matrix.MTRANS_X];
                dstVals[Matrix.MSKEW_Y] = srcVals[Matrix.MSKEW_Y];
                dstVals[Matrix.MSCALE_Y] = srcVals[Matrix.MSCALE_Y];
                dstVals[Matrix.MTRANS_Y] = srcVals[Matrix.MTRANS_Y];
                dstVals[Matrix.MPERSP_0] = srcVals[Matrix.MPERSP_0];
                dstVals[Matrix.MPERSP_1] = srcVals[Matrix.MPERSP_1];
                dstVals[Matrix.MPERSP_2] = srcVals[Matrix.MPERSP_2];

                dstMatrix.setValues(dstVals);
                dstChart.getViewPortHandler().refresh(dstMatrix, dstChart, true);
            }
        }
    }
}

于是抱着试试看的态度试了一下，却发现问题了，请看：

这里写图片描述

我们发现对同一个表进行滚动时，没有任何问题，但是在一个表滚动ing，再对另一个表进行滚动，就会出现冲突了，刚开始我以为是我的问题，后来发现同样用这端代码的其他人，也出现这个问题，不知道哪位大神能给出解决方法，请大神留下您那宝贵的意见。
考虑到这个冲突问题比较严重，稍微滑动就会出现这种情况，所以机智的楼主想出了另一招，加了两行代码：

  combinedchart.setDragDecelerationEnabled(false);
  barChart.setDragDecelerationEnabled(false);

估计有人已经知道这两句代码的意思了，作用就是手指滑动屏幕，离开后不会有惯性滚动，这虽然解决了上面的bug，但是在体验上却大不如前，不过只好先这么着了，看效果图：
这里写图片描述

滚动联动已经完成，还有放缩联动呢，我们看下效果图：

这里写图片描述

ok，木有问题，图表联动部分到这里结束，下面初步介绍一下高亮联动，因为这里涉及到手势冲突问题，目前只实现了简单的点击高亮联动，具体的在滚动中然后使用高亮，我们日后再行补充，这里逻辑和分时图一样，直接上代码：

 combinedchart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
                barChart.highlightValues(new Highlight[]{h});
               // combinedchart.setHighlightValue(h);
            }

            @Override
            public void onNothingSelected() {

            }
        });
        barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
                combinedchart.highlightValues(new Highlight[]{h});

            }

            @Override
            public void onNothingSelected() {

            }
        });

这里写图片描述

本期内容就讲到这里了，这只是个初版，以后还会改进，但是毕竟都是要经历的砍，所以还是放出来了，以后慢慢会优化，有好的建议希望能联系我，将更好的东西开源出来！

demo更新地址https://github.com/AndroidJiang/StockChart

A-Jiang

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
19
评论
一步一步教你写股票走势图——K线图二（图表联动）

目录一步一步教你写股票走势图——分时图一（概述）一步一步教你写股票走势图——分时图二（自定义xy轴）一步一步教你写股票走势图——分时图三（对齐图表、自定义柱状图高亮）一步一步教你写股票走势图——分时图四（高亮联动）一步一步教你写股票走势图——分时图五（自定义标记）一步一步教你写股票走势图——K线图一（概述）一步一步教你写股票走势图——K线图二（图表联动）一步一步教你写
复制链接

扫一扫