K線圖越做發(fā)現(xiàn)坑越多，跟之前做的分時(shí)圖完全不是一個(gè)重量級(jí)的啊涧偷，分時(shí)圖不需要滾動(dòng)簸喂，少走了很多彎路，K線圖因?yàn)闈L動(dòng)的問題燎潮，會(huì)導(dǎo)致很多其他問題喻鳄，比如：
- 多個(gè)圖表之間滾動(dòng)時(shí)怎么聯(lián)動(dòng)
- 高亮滾動(dòng)沖突
- 放縮聯(lián)動(dòng)
...
表對(duì)齊
下面我們就開始介紹本節(jié)的內(nèi)容，要想實(shí)現(xiàn)圖表之間的聯(lián)動(dòng)确封，那么必須得保證圖表是對(duì)齊的除呵，聯(lián)動(dòng)起來效果才能保持一致，圖表對(duì)齊功能爪喘，我們?cè)诜謺r(shí)圖部分已經(jīng)講解颜曾，代碼一致，還是簡單貼下代碼：
/*設(shè)置量表對(duì)齊*/
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...函數(shù)是針對(duì)圖表相對(duì)位置計(jì)算秉剑，比如A表offLeftA=20dp,B表offLeftB=30dp,則A.setExtraLeftOffset(10),并不是30泛豪，還有注意單位轉(zhuǎn)換*/
if (barLeft < lineLeft) {
offsetLeft = Utils.convertPixelsToDp(lineLeft - barLeft);
barChart.setExtraLeftOffset(offsetLeft);
} else {
offsetLeft = Utils.convertPixelsToDp(barLeft-lineLeft);
combinedchart.setExtraLeftOffset(offsetLeft);
}
/*注：setExtraRight...函數(shù)是針對(duì)圖表絕對(duì)位置計(jì)算，比如A表offRightA=20dp,B表offRightB=30dp,則A.setExtraLeftOffset(30),并不是10侦鹏，還有注意單位轉(zhuǎn)換*/
if (barRight < lineRight) {
offsetRight = Utils.convertPixelsToDp(lineRight);
barChart.setExtraRightOffset(offsetRight);
} else {
offsetRight = Utils.convertPixelsToDp(barRight);
combinedchart.setExtraRightOffset(offsetRight);
}
}
表聯(lián)動(dòng)
表的聯(lián)動(dòng)這里包括滾動(dòng)聯(lián)動(dòng)诡曙、放縮聯(lián)動(dòng)，具體操作效果圖還是參照自選股：
博主在stackover上發(fā)現(xiàn)了有人曾提過類似問題：
幸運(yùn)的是有人也回答了這個(gè)問題略水，具體請(qǐng)點(diǎn)擊上面的鏈接查看价卤。
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);
}
}
}
}
于是抱著試試看的態(tài)度試了一下，卻發(fā)現(xiàn)問題了渊涝，請(qǐng)看：
我們發(fā)現(xiàn)對(duì)同一個(gè)表進(jìn)行滾動(dòng)時(shí)慎璧，沒有任何問題，但是在一個(gè)表滾動(dòng)ing跨释，再對(duì)另一個(gè)表進(jìn)行滾動(dòng)胸私，就會(huì)出現(xiàn)沖突了，剛開始我以為是我的問題煤傍，后來發(fā)現(xiàn)同樣用這端代碼的其他人盖文，也出現(xiàn)這個(gè)問題，不知道哪位大神能給出解決方法蚯姆，請(qǐng)大神留下您那寶貴的意見。
考慮到這個(gè)沖突問題比較嚴(yán)重洒敏，稍微滑動(dòng)就會(huì)出現(xiàn)這種情況龄恋，所以機(jī)智的樓主想出了另一招，加了兩行代碼：
combinedchart.setDragDecelerationEnabled(false);
barChart.setDragDecelerationEnabled(false);
估計(jì)有人已經(jīng)知道這兩句代碼的意思了凶伙，作用就是手指滑動(dòng)屏幕郭毕，離開后不會(huì)有慣性滾動(dòng)，這雖然解決了上面的bug函荣，但是在體驗(yàn)上卻大不如前显押，不過只好先這么著了扳肛，看效果圖：
滾動(dòng)聯(lián)動(dòng)已經(jīng)完成，還有放縮聯(lián)動(dòng)呢乘碑，我們看下效果圖：
ok挖息，木有問題，圖表聯(lián)動(dòng)部分到這里結(jié)束兽肤，下面初步介紹一下高亮聯(lián)動(dòng)套腹，因?yàn)檫@里涉及到手勢(shì)沖突問題，目前只實(shí)現(xiàn)了簡單的點(diǎn)擊高亮聯(lián)動(dòng)资铡，具體的在滾動(dòng)中然后使用高亮电禀，我們?nèi)蘸笤傩醒a(bǔ)充，這里邏輯和分時(shí)圖一樣笤休，直接上代碼：
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() {
}
});
本期內(nèi)容就講到這里了尖飞，這只是個(gè)初版，以后還會(huì)改進(jìn)店雅，但是畢竟都是要經(jīng)歷的砍政基，所以還是放出來了，以后慢慢會(huì)優(yōu)化底洗，有好的建議希望能聯(lián)系我腋么，將更好的東西開源出來！
