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

article/2025/10/28 20:44:16

目录
一步一步教你写股票走势图——分时图一（概述）
一步一步教你写股票走势图——分时图二（自定义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() {}});