前言

MPAndroidChart是一款基于Android的開源圖表庫(kù)，MPAndroidChart不僅可以在Android設(shè)備上繪制各種統(tǒng)計(jì)圖表，而且可以對(duì)圖表進(jìn)行拖動(dòng)和縮放操作，應(yīng)用起來非常靈活。MPAndroidChart顯得更為輕巧和簡(jiǎn)單，擁有常用的圖表類型：線型圖、餅圖、柱狀圖和散點(diǎn)圖。

MPAndroidChart自定義繪制最高點(diǎn)標(biāo)識(shí)

距離上次發(fā)布關(guān)于 MPAndroidChart 的文章已經(jīng)過去一個(gè)多月了，項(xiàng)目中新增了一個(gè)需求，看起來很簡(jiǎn)單。就是在最高點(diǎn)繪制矩形框，標(biāo)識(shí)最高點(diǎn)的數(shù)值，同時(shí)最高點(diǎn)處繪制一個(gè)小圈圈，以及繪制平均數(shù)值線，如下圖所示：

看起來很簡(jiǎn)單，在 MPAndroidChart 的 demo 中也有 LineChart 具有小圓圈的和顯示數(shù)值的，不過只在最高點(diǎn)繪制似乎是沒有，并且也無法控制小空心圈圈的大小，所以只能自定義繪制了。

在 LineChart 中自定義渲染繪制需要自定義一個(gè) Render，繼承于 LineChartRenderer，然后重寫 drawValues 方法。

接下來說說一個(gè) LineChart 的基本構(gòu)成，每一個(gè)點(diǎn)都是一個(gè) Entry，其兩個(gè)參數(shù)分別是 X 軸和 Y 軸的值，X 軸的必須為整型，Y 軸的是浮點(diǎn)型。LineDataSet 是由很多個(gè)點(diǎn)構(gòu)成，所以其參數(shù)是 ArrayList<Entry> ，LineDataSet 能控制線的顏色和背景顏色，是否顯示小圈圈，是否顯示每個(gè)點(diǎn)的數(shù)值標(biāo)簽，遺憾的是不能精確到每個(gè)點(diǎn)，也就有了本文，再之上就是 LineData 了，其參數(shù)是 LineDataSet ，在此我默認(rèn)每個(gè) LineChart 只有一組曲線圖，所以在 drawValues 中可以獲取 LineDataSet 以及 ArrayList<Entry> ：

LineDataSet dataSet = (LineDataSet) mChart.getLineData().getDataSetByIndex(0);
List<Entry> entries = dataSet.getValues();

然后對(duì) ArrayList<Entry> 遍歷，找到最大值，然后獲取其 (X,Y) 軸的值，通過 MPAndroidChart 的內(nèi)置方法找到點(diǎn)在 Canvas 中的 (X,Y) 點(diǎn)的值。

Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
MPPointD pointD = trans.getPixelForValues(max_x, max_y);

接下來就可以在這個(gè)位置上繪制小圈圈，涉及到一點(diǎn) Android Canvas 姿勢(shì)，這類的文章網(wǎng)上很多，我以前做過 C# WinForm GDI+ 相關(guān)的一些項(xiàng)目，對(duì)畫圖這塊略知一二理解起來尚不費(fèi)力：

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);

接下來繪制最大值文字和實(shí)心圓角矩形，我的思路是先繪制文字，測(cè)量出文字的高度和寬度，再在寬度分別左右加上邊距然后繪制實(shí)心圓角矩形。

String textTag="文字內(nèi)容";
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，增加兩個(gè)參數(shù) OffsetX 和 OffsetY 兩個(gè)參數(shù)，然后重新實(shí)例化一個(gè)矩形需要的坐標(biāo)系統(tǒng)：

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);

還需要重新實(shí)現(xiàn)一個(gè) LineChart，指定它的渲染為我們剛才實(shí)現(xiàn)對(duì) LineChartRenderer 的實(shí)現(xiàn)，繼承 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;
 }

如果需要對(duì) Canvas 繪制時(shí)做一些控制，或者傳遞一些參數(shù)，都可以在這個(gè)實(shí)現(xiàn)中去定義，比如我需要手動(dòng)指定最大值的標(biāo)簽顯示等：

private double maxValue;
public double getMaxValue() {
  return maxValue;
}

public void setMaxValue(double maxValue) {
  this.maxValue = maxValue;
}

如果在 Render 的實(shí)現(xiàn)類中需要用到，可以獲取圖表對(duì)象，然后強(qiáng)轉(zhuǎn)為我們寫的實(shí)現(xiàn)類：

public void drawValues(Canvas c) {
  super.drawValues(c);
  MyLineChart chartInstance = (MyLineChart) mChart;
}

至此就完成了最高點(diǎn)的標(biāo)識(shí)繪制了，還可以不用計(jì)算最高點(diǎn)值。改進(jìn)這個(gè) LineChart 的實(shí)現(xiàn)，自定義背景和前景都可以，然后共用一個(gè) Render，話不多說，上個(gè)圖。

畫平均線很簡(jiǎn)單，已經(jīng)內(nèi)置了實(shí)現(xiàn)，你要做的就是計(jì)算出所有的 Y 軸的值的平均值，或者數(shù)值如果來源于接口中，直接設(shè)置就可以。

LimitLine avgLine = new LimitLine((float) navg);
 avgLine.enableDashedLine(5.0f, 3.0f, 3.0f);
 avgLine.setLineColor(Color.parseColor("#33CC33"));
 lineChart1.getAxisLeft().addLimitLine(avgLine);

OK，對(duì) MPAndroidChart 的了解又更深一步了！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論