目錄

?

思路

實現

---

思路來源于Homilier，感謝博主！

效果是這樣子的：

思路

從RadarChart類中我們可以看到init()方法中的內容，可以看出來自定義了繪制類。僅從字面我們就可以看出RadarChartRenderer是繪制雷達的，YAxisRendererRadarChart和XAxisRendererRadarChart是繪制x軸/y軸相關內容的，既然這樣那我們就清楚了，進RadarChartRenderer看看里面的實現；

?從方法名上就可以看出端倪，drawValues(Canvas c) 是咱重點關注的內容。所以在這開造。

實現

?直接貼代碼，很基礎的繪制代碼，就不做介紹了。代碼過長，沒必要的就直接用省略號了，對比下RadarChartRenderer即可

public class RadarChartRenderer extends LineRadarRenderer {protected RadarChart mChart;/*** paint for drawing the web*/protected Paint mWebPaint;protected Paint mHighlightCirclePaint;public RadarChartRenderer(RadarChart chart, ChartAnimator animator,ViewPortHandler viewPortHandler) {super(animator, viewPortHandler);mChart = chart;mHighlightPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mHighlightPaint.setStyle(Paint.Style.STROKE);mHighlightPaint.setStrokeWidth(2f);mHighlightPaint.setColor(Color.rgb(255, 187, 115));mWebPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mWebPaint.setStyle(Paint.Style.STROKE);mHighlightCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);mValueCirclePaint = new Paint();}protected Path mDrawDataSetSurfacePathBuffer = new Path();........./*** 繪制RadarDataSet** @param c* @param dataSet* @param mostEntries 條目最多的數據集的條目計數*/protected void drawDataSet(Canvas c, IRadarDataSet dataSet, int mostEntries) {float phaseX = mAnimator.getPhaseX();float phaseY = mAnimator.getPhaseY();float sliceangle = mChart.getSliceAngle();// 計算將值轉換為像素所需的因子float factor = mChart.getFactor();MPPointF center = mChart.getCenterOffsets();MPPointF pOut = MPPointF.getInstance(0, 0);Path surface = mDrawDataSetSurfacePathBuffer;surface.reset();boolean hasMovedToPoint = false;for (int j = 0; j < dataSet.getEntryCount(); j++) {mRenderPaint.setColor(dataSet.getColor(j));RadarEntry e = dataSet.getEntryForIndex(j);Utils.getPosition(center, (e.getY() - mChart.getYChartMin()) * factor * phaseY, sliceangle * j * phaseX + mChart.getRotationAngle(), pOut);if (Float.isNaN(pOut.x)) {continue;}if (!hasMovedToPoint) {surface.moveTo(pOut.x, pOut.y);hasMovedToPoint = true;} else {surface.lineTo(pOut.x, pOut.y);}}if (dataSet.getEntryCount() > mostEntries) {// if this is not the largest set, draw a line to the center before closingsurface.lineTo(center.x, center.y);}surface.close();if (dataSet.isDrawFilledEnabled()) {final Drawable drawable = dataSet.getFillDrawable();if (drawable != null) {drawFilledPath(c, surface, drawable);} else {drawFilledPath(c, surface, dataSet.getFillColor(), dataSet.getFillAlpha());}}mRenderPaint.setStrokeWidth(dataSet.getLineWidth());mRenderPaint.setStyle(Paint.Style.STROKE);// 畫線（僅當禁用填充或alpha小于255時）if (!dataSet.isDrawFilledEnabled() || dataSet.getFillAlpha() < 255) {c.drawPath(surface, mRenderPaint);}MPPointF.recycleInstance(center);MPPointF.recycleInstance(pOut);}private Paint mValueCirclePaint;private float mValueCircleRadius = Utils.convertDpToPixel(5f);private int[] mValueCircleColors;private boolean mDrawValueCircle = false;private float mValueCircleRadiusUp = Utils.convertDpToPixel(3f);private int[] mValueCircleColorsUp;private boolean mDrawValueCircleUp = false;/*** 繪制數值-也就是和數值相關的位置** @param c*/@Overridepublic void drawValues(Canvas c) {float phaseX = mAnimator.getPhaseX();float phaseY = mAnimator.getPhaseY();float sliceangle = mChart.getSliceAngle();// 計算將值轉換為像素所需的因子float factor = mChart.getFactor();MPPointF center = mChart.getCenterOffsets();MPPointF pOut = MPPointF.getInstance(0, 0);MPPointF pIcon = MPPointF.getInstance(0, 0);float yoffset = Utils.convertDpToPixel(5f);for (int i = 0; i < mChart.getData().getDataSetCount(); i++) {IRadarDataSet dataSet = mChart.getData().getDataSetByIndex(i);if (!shouldDrawValues(dataSet)) {continue;}// 應用數據集定義的文本樣式applyValueTextStyle(dataSet);ValueFormatter formatter = dataSet.getValueFormatter();MPPointF iconsOffset = MPPointF.getInstance(dataSet.getIconsOffset());iconsOffset.x = Utils.convertDpToPixel(iconsOffset.x);iconsOffset.y = Utils.convertDpToPixel(iconsOffset.y);for (int j = 0; j < dataSet.getEntryCount(); j++) {RadarEntry entry = dataSet.getEntryForIndex(j);Utils.getPosition(center, (entry.getY() - mChart.getYChartMin()) * factor * phaseY,sliceangle * j * phaseX + mChart.getRotationAngle(), pOut);if (dataSet.isDrawValuesEnabled()) {drawValue(c, formatter.getRadarLabel(entry), pOut.x, pOut.y - yoffset, dataSet.getValueTextColor(j));}if (entry.getIcon() != null && dataSet.isDrawIconsEnabled()) {Drawable icon = entry.getIcon();Utils.getPosition(center, (entry.getY()) * factor * phaseY + iconsOffset.y, sliceangle * j * phaseX + mChart.getRotationAngle(), pIcon);//無檢查SuspiciousNameCombinationpIcon.y += iconsOffset.x;Utils.drawImage(c, icon, (int) pIcon.x, (int) pIcon.y, icon.getIntrinsicWidth(), icon.getIntrinsicHeight());}if (mDrawValueCircle) {mValueCirclePaint.setColor(mValueCircleColors == null || mValueCircleColors.length == 0 ? Color.BLACK : this.mValueCircleColors[i % mValueCircleColors.length]);c.drawCircle(pOut.x, pOut.y, mValueCircleRadius, mValueCirclePaint);}if (mDrawValueCircleUp) {mValueCirclePaint.setColor(mValueCircleColorsUp == null || mValueCircleColorsUp.length == 0 ? Color.BLACK : this.mValueCircleColorsUp[i % mValueCircleColorsUp.length]);c.drawCircle(pOut.x, pOut.y, mValueCircleRadiusUp, mValueCirclePaint);} // c.drawCircle(center.x, center.y, 8, mWebPaint);}MPPointF.recycleInstance(iconsOffset);}MPPointF.recycleInstance(center);MPPointF.recycleInstance(pOut);MPPointF.recycleInstance(pIcon);}/*** 數值圓點顏色** @param colors 顏色*/public void setValueCircleColor(int[] colors, int[] colorsUp) {this.mValueCircleColors = colors;this.mValueCircleColorsUp = colorsUp;}/*** 數值圓點半徑** @param radius 半徑*/public void setValueCircleRadius(float radius, float radiusUp) {this.mValueCircleRadius = Utils.convertDpToPixel(radius);this.mValueCircleRadiusUp = Utils.convertDpToPixel(radiusUp);}/*** 是否繪制數值圓點** @param draw*/public void setDrawValueCircle(boolean draw, boolean drawUp) {this.mDrawValueCircleUp = drawUp;this.mDrawValueCircle = draw;}......... }

RadarChart添加三個方法

public class RadarChart extends PieRadarChartBase<RadarData> {......../*** 頂角圓點顏色* @param colors 顏色*/public void setValueCircleColor(int[] colors,int[] colorsUp){((RadarChartRenderer) this.mRenderer).setValueCircleColor(colors,colorsUp);}/*** 頂角圓點半徑* @param radius 半徑*/public void setValueCircleRadius(float radius,float radiusUp){((RadarChartRenderer) this.mRenderer).setValueCircleRadius(radius,radiusUp);}/*** 是否繪制頂角圓點* @param draw*/public void setDrawValueCircle(boolean draw,boolean drawUp){((RadarChartRenderer) this.mRenderer).setDrawValueCircle(draw,drawUp);}........ }

自己項目中應用：

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_radarchart);RadarChart chart = findViewById(R.id.chart1);chart.setWebLineWidth(1f);chart.setWebColor(Color.LTGRAY);chart.setWebLineWidthInner(1f);chart.setWebColorInner(Color.LTGRAY);chart.setWebAlpha(100);// 創建一個自定義MarkerView（擴展MarkerView）并指定布局用它MarkerView mv = new RadarMarkerView(this, R.layout.radar_markerview);//重點在這//設置數據圓點 第一個true表示繪制下層圓 第二個true繪制上層圓 形成圓環形式的圓chart.setDrawValueCircle(true, true);//設置半徑 第一個參數大于第二個參數 才會有圓環的那種樣子chart.setValueCircleRadius(6, 4);//可以設置多個顏色，第一個數組是下層圓 第二個數組是下層圓chart.setValueCircleColor(new int[]{Color.parseColor("#36a9ce"),Color.parseColor("#33ff66"),}, new int[]{Color.parseColor("#ffffff"),Color.parseColor("#000000")});}

總結

以上是生活随笔為你收集整理的Android-MPAndroidChart：RadarChart（雷达蜘蛛图）绘制圆点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。