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() {
}
});
这里写图片描述
本期内容就讲到这里了，这只是个初版，以后还会改进，但是毕竟都是要经历的砍，所以还是放出来了，以后慢慢会优化，有好的建议希望能联系我，将更好的东西开源出来！
网友评论