重寫MPAndroidChart顯示標記

標籤：

MPAndroidChart是實現圖表功能的優秀控制項, 可以完成大多數繪製需求. 對於修改第三方庫而言, 優秀的架構是繼承開發, 而不是把源碼拆分出去. MP在顯示標記控制項(MarkView)時, 會有異常, 導致標誌在圖表邊緣顯示不全, 則需要重寫控制項解決問題.

繼承LineChart, 提取高亮位置座標getHighLightPos, 重繪標記drawMarkers.

/** * 資料中心的圖表折線圖, 繼承MPChart的折線圖 * <p> * Created by wangchenlong on 15/10/13. */public class CYDataLineChart extends LineChart {    @SuppressWarnings("unused")    private static final String TAG = "DEBUG-WCL: " + CYDataLineChart.class.getSimpleName();    // 預設構造器    public CYDataLineChart(Context context) {        super(context);    }    public CYDataLineChart(Context context, AttributeSet attrs) {        super(context, attrs);    }    public CYDataLineChart(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    // 擷取高亮點座標    public float[] getHighLightPos(Entry e, Highlight highlight) {        return getMarkerPosition(e, highlight);    }    // 重寫這個方法, 修複Bug    @Override    protected void drawMarkers(Canvas canvas) {        // if there is no marker view or drawing marker is disabled        if (mMarkerView == null || !mDrawMarkerViews || !valuesToHighlight())            return;        Rect newRect = canvas.getClipBounds();        newRect.inset(-80, 0);  //make the rect larger        canvas.clipRect(newRect, Region.Op.REPLACE);        //noinspection ForLoopReplaceableByForEach        for (int i = 0; i < mIndicesToHighlight.length; i++) {            Highlight highlight = mIndicesToHighlight[i];            int xIndex = highlight.getXIndex();            if (xIndex <= mDeltaX && xIndex <= mDeltaX * mAnimator.getPhaseX()) {                Entry e = mData.getEntryForHighlight(mIndicesToHighlight[i]);                // make sure entry not null                if (e == null || e.getXIndex() != mIndicesToHighlight[i].getXIndex())                    continue;                float[] pos = getMarkerPosition(e, highlight);                // Marker位移                float tmpY = pos[1] - 8 * AppUtils.getPerDp();                Paint paint = new Paint();                paint.setStyle(Paint.Style.FILL);                paint.setAntiAlias(true);                paint.setStrokeWidth(5);                // noinspection deprecation                paint.setColor(getResources().getColor(R.color.chart_circle));                canvas.drawCircle(pos[0], pos[1], 2 * AppUtils.getPerDp(), paint);                // check bounds                if (!mViewPortHandler.isInBounds(pos[0], tmpY))                    continue;                mMarkerView.refreshContent(e, highlight);                mMarkerView.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),                        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));                mMarkerView.layout(0, 0, mMarkerView.getMeasuredWidth(),                        mMarkerView.getMeasuredHeight());                if (tmpY - mMarkerView.getHeight() <= 0) {                    float y = mMarkerView.getHeight() - tmpY;                    mMarkerView.draw(canvas, pos[0], tmpY + y);                } else {                    mMarkerView.draw(canvas, pos[0], tmpY);                }            }        }    }}

getMarkerPosition是LineChart類中的protected方法, 繼承類, 使用public方法匯出.
float tmpY = pos[1] - 8 * AppUtils.getPerDp();, 重新計算Y座標, 偏離原始畫布.

但是這樣做有一個問題, 在移動MarkView時, 父控制項會有殘留. 如何解決呢? 辦法就是在移動時, 重繪父控制項的canvas, 使用invalidate()函數.

        // 設定圖表點擊事件, 監聽高亮位置        mLcChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {            @Override            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {                int index = e.getXIndex();                Log.e(TAG, "index = " + index);                setChartIndex(index);                mCallback.setCurIndex(index);                mIndex = index;                float[] pos = mLcChart.getHighLightPos(e, h);                Log.e(TAG, "x: " + pos[0] + ", y: " + pos[1]);                mLlContainer.invalidate(); // 重繪父控制項, 避免殘留            }            @Override            public void onNothingSelected() {                // 再次點擊時調用這個, 要不非高亮                mLcChart.highlightValue(mIndex, 0);            }        });

    // 外部設定圖表高亮    private void setChartHighlight(int index) {        if (mLcChart.getData() == null) return;        mMarkerView.setDateText(mMarkers.get(index));        mLcChart.highlightValue(index, 0);        mLlContainer.invalidate(); // 重繪父控制項, 避免殘留    }

在圖表控制項中, 內部外部都會觸發高亮位置.

OK, Enjoy It!

重寫MPAndroidChart顯示標記