前言
MPAndroidChart是一款基于Android的開源圖表庫,MPAndroidChart不僅可以在Android設備上繪制各種統計圖表,而且可以對圖表進行拖動和縮放操作,應用起來非常靈活。MPAndroidChart顯得更為輕巧和簡單,擁有常用的圖表類型:線型圖、餅圖、柱狀圖和散點圖。
MPAndroidChart自定義繪制最高點標識
距離上次發布關于 MPAndroidChart 的文章已經過去一個多月了,項目中新增了一個需求,看起來很簡單。就是在最高點繪制矩形框,標識最高點的數值,同時最高點處繪制一個小圈圈,以及繪制平均數值線,如下圖所示:

看起來很簡單,在 MPAndroidChart 的 demo 中也有 LineChart 具有小圓圈的和顯示數值的,不過只在最高點繪制似乎是沒有,并且也無法控制小空心圈圈的大小,所以只能自定義繪制了。
在 LineChart 中自定義渲染繪制需要自定義一個 Render,繼承于 LineChartRenderer,然后重寫 drawValues 方法。
接下來說說一個 LineChart 的基本構成,每一個點都是一個 Entry,其兩個參數分別是 X 軸和 Y 軸的值,X 軸的必須為整型,Y 軸的是浮點型。LineDataSet 是由很多個點構成,所以其參數是 ArrayList<Entry> ,LineDataSet 能控制線的顏色和背景顏色,是否顯示小圈圈,是否顯示每個點的數值標簽,遺憾的是不能精確到每個點,也就有了本文,再之上就是 LineData 了,其參數是 LineDataSet ,在此我默認每個 LineChart 只有一組曲線圖,所以在 drawValues 中可以獲取 LineDataSet 以及 ArrayList<Entry> :
LineDataSet dataSet = (LineDataSet) mChart.getLineData().getDataSetByIndex(0);List<Entry> entries = dataSet.getValues();
然后對 ArrayList<Entry> 遍歷,找到最大值,然后獲取其 (X,Y) 軸的值,通過 MPAndroidChart 的內置方法找到點在 Canvas 中的 (X,Y) 點的值。
Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());MPPointD pointD = trans.getPixelForValues(max_x, max_y);
接下來就可以在這個位置上繪制小圈圈,涉及到一點 Android Canvas 姿勢,這類的文章網上很多,我以前做過 C# WinForm GDI+ 相關的一些項目,對畫圖這塊略知一二理解起來尚不費力:
Paint paintDrawPointFill = new Paint(Paint.ANTI_ALIAS_FLAG);paintDrawPointFill.setStyle(Paint.Style.FILL);paintDrawPointFill.setColor(Color.WHITE);c.drawCircle((float) pointD.x, (float) pointD.y, ScreenUnit.dp2px(context, 6),paintDrawPointFill);
接下來繪制最大值文字和實心圓角矩形,我的思路是先繪制文字,測量出文字的高度和寬度,再在寬度分別左右加上邊距然后繪制實心圓角矩形。
String textTag="文字內容";Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setTextSize(ScreenUnit.dp2px(context, 12));paint.setColor(igsLineConfig.getMainColor());Rect rectTextBounds = new Rect();paint.getTextBounds(textTag, 0, textTag.length(), rectTextBounds);
獲取文字的寬和高:
int textWidth = (rectTextBounds.right - rectTextBounds.left); int textHeight = (rectTextBounds.bottom - rectTextBounds.top);
然后為了適配能讓文字和矩形上下左右均保持一定距離,就類似于 Padding,增加兩個參數 OffsetX 和 OffsetY 兩個參數,然后重新實例化一個矩形需要的坐標系統:
RectF rectF = new RectF((int) offset_x - textOffset, (int) offset_y - textHeight - textOffset, (int) offset_x + textWidth + textOffset, (int) offset_y + textOffset);
繪制圓角矩形:
c.drawRoundRect(rectF, igsLineConfig.getCorner(), igsLineConfig.getCorner(), paint);
還需要重新實現一個 LineChart,指定它的渲染為我們剛才實現對 LineChartRenderer 的實現,繼承 LineChart ,重寫 init 方法:
@Override protected void init() { super.init(); WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE); DisplayMetrics metrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(metrics); MyChartDataRender dataRender = new MyChartDataRender(this, mAnimator, mViewPortHandler, metrics.widthPixels, tag); dataRender.context = getContext(); dataRender.igsLineConfig = IgsChartConfigSingleton.instance.getIgsAltitudeLineConfig(); mRenderer = dataRender; }如果需要對 Canvas 繪制時做一些控制,或者傳遞一些參數,都可以在這個實現中去定義,比如我需要手動指定最大值的標簽顯示等:
private double maxValue;public double getMaxValue() { return maxValue;}public void setMaxValue(double maxValue) { this.maxValue = maxValue;}如果在 Render 的實現類中需要用到,可以獲取圖表對象,然后強轉為我們寫的實現類:
public void drawValues(Canvas c) { super.drawValues(c); MyLineChart chartInstance = (MyLineChart) mChart;}至此就完成了最高點的標識繪制了,還可以不用計算最高點值。改進這個 LineChart 的實現,自定義背景和前景都可以,然后共用一個 Render,話不多說,上個圖。

畫平均線很簡單,已經內置了實現,你要做的就是計算出所有的 Y 軸的值的平均值,或者數值如果來源于接口中,直接設置就可以。
LimitLine avgLine = new LimitLine((float) navg); avgLine.enableDashedLine(5.0f, 3.0f, 3.0f); avgLine.setLineColor(Color.parseColor("#33CC33")); lineChart1.getAxisLeft().addLimitLine(avgLine);OK,對 MPAndroidChart 的了解又更深一步了!
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答