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

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

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;}……@Overridepublic void onChartScale(MotionEvent me, float scaleX, float scaleY) {
//        Log.d(TAG, "onChartScale " + scaleX + "/" + scaleY + " X=" + me.getX() + "Y=" + me.getY());syncCharts();}@Overridepublic 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() {@Overridepublic void onValueSelected(Entry e, int dataSetIndex, Highlight h) {barChart.highlightValues(new Highlight[]{h});// combinedchart.setHighlightValue(h);}@Overridepublic void onNothingSelected() {}});barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {@Overridepublic void onValueSelected(Entry e, int dataSetIndex, Highlight h) {combinedchart.highlightValues(new Highlight[]{h});}@Overridepublic void onNothingSelected() {}});

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

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

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

一步一步教你写股票走势图——K线图四（高亮联动一）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——K线图三（添加均线）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
android 分时图x轴宽度,一步一步教你写股票走势图——分时图二（自定义xy轴）...
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——分时图二（自定义xy轴）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——K线图五（高亮联动二）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步步教你画股票图,K线图,高仿雪球股票
股票图,K线图,蜡烛图,高仿雪球股票,教你一步步实现股票图项目地址 _005.gif _006.gif 讲K线图之前,先来一个引言. 前两天听了朱凯大神的知乎live,其中说到一点,作为Androi ...
股票图,K线图,蜡烛图,高仿雪球股票
股票图,K线图,蜡烛图,高仿雪球股票,教你一步步实现股票图项目地址讲K线图之前,先来一个引言. 作为Android开发者需要立即提升的三项技能: 分别是:UI,网络,线程,而UI又分:布局,绘制, ...
StockChart Android股票图/K线图开发库
项目地址:GitHub 一.介绍 StockChart 一款适用于Android的高扩展性.高性能股票图/K线图开发库,支持多图组合,除了使用内置子图还支持定制子图满足复杂的业务需求. 特点内置子图 ...
python股票交易接口实现股票分时图K线图及抓取level2行情的开发程序分析
大家对股票交易接口并不陌生,那么要想获取股票数据获取,也是可以通过python股票交易接口实现股票分时图K线图及抓取level2行情的开发程序分析如下: import sys from PyQt5 i ...

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

表对齐

表联动

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

最新文章

热门文章