MPAndroidChart雷达图的那些事
在最近的使用中，用到了RadarChart，也就是雷达图或者说是蜘蛛图，网上对RadarChart的介绍也并不是很多，所以这里来做一个比较详细的介绍。今天我会带给大家一些使用方法，及通过重写源码实现自定义顶点颜色的操作。如果看过我以前帖子的话，那么应该会很快上手的。好啦废话不多说，我们开始吧。
先看一下大概的效果吧。
是不是觉得还不错，那下面我们来看看具体代码吧。
先从布局开始吧，没什么说的
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.github.mikephil.charting.charts.RadarChart android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
然后来看代码
/** * @author Petterp on 2019/5/11 * Summary:RoadarChart雷达图的使用 * 邮箱：1509492795@qq.com */ public class MainActivity extends AppCompatActivity { private RadarChart chart; private int[] colors = {Color.RED, Color.BLACK, Color.GREEN, Color.BLUE, Color.GRAY}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initChart(); setData(); } /** * 一些轴上的设置等等 */ private void initChart() { chart = findViewById(R.id.chart); //设置web线的颜色(即就是外面包着的那个颜色) chart.setWebColorInner(Color.BLACK); //设置中心线颜色(也就是竖着的线条) chart.setWebColor(Color.BLACK); chart.setWebAlpha(50); XAxis xAxis = chart.getXAxis(); //设置x轴标签字体颜色 xAxis.setLabelCount(4, true); xAxis.setAxisMaximum(4f); xAxis.setAxisMinimum(0f); xAxis.setTextSize(20f); //自定义y轴标签，x轴同理 xAxis.setValueFormatter(new ValueFormatter() { @Override public String getFormattedValue(float value) { //这里只是自定义了标签的颜色，如果要使用自定义标签颜色，请更改布局文件为自定为RoadarCharts类 chart.getXAxis().setTextColor(colors[(int) Math.abs(value % 5)]); return super.getFormattedValue(value); } }); YAxis yAxis = chart.getYAxis(); //设置y轴的标签个数 yAxis.setLabelCount(5, true); //设置y轴从0f开始 yAxis.setAxisMinimum(0f); /*启用绘制Y轴顶点标签，这个是最新添加的功能 * */ yAxis.setDrawTopYLabelEntry(false); //设置字体大小 yAxis.setTextSize(15f); //设置字体颜色 yAxis.setTextColor(Color.RED); //启用线条，如果禁用，则无任何线条 chart.setDrawWeb(true); //禁用图例和图表描述 chart.getDescription().setEnabled(false); chart.getLegend().setEnabled(false); } /** * 设置数据 */ private void setData() { List<RadarEntry> list = new ArrayList<>(); for (int i = 0; i < 5; i++) { list.add(new RadarEntry((float) (Math.random() * 100))); } RadarDataSet set = new RadarDataSet(list, "Petterp"); //禁用标签 set.setDrawValues(false); //设置填充颜色 set.setFillColor(Color.BLUE); //设置填充透明度 set.setFillAlpha(40); //设置启用填充 set.setDrawFilled(true); //设置点击之后标签是否显示圆形外围 set.setDrawHighlightCircleEnabled(true); //设置点击之后标签圆形外围的颜色 set.setHighlightCircleFillColor(Color.RED); //设置点击之后标签圆形外围的透明度 set.setHighlightCircleStrokeAlpha(40); //设置点击之后标签圆形外围的半径 set.setHighlightCircleInnerRadius(20f); //设置点击之后标签圆形外围内圆的半径 set.setHighlightCircleOuterRadius(10f); RadarData data = new RadarData(set); chart.setData(data); chart.invalidate(); } }
相应的注释也都在上面，很详细。
这里我们重点提一下自定义标签部分。
重写这两个类 RadarChart和 XAxisRendererRadarChart。其实也就是更改一个方法，别觉得有什么太困难。
我们先看一下为什么我们需要重写源码。
RadarChart源码里并没有提供多颜色标签的方法。点进去setTextColor()，我们可以发现。
我们找getTextColor（）,也就是看看在哪里用了这个颜色。
一点发现，好多方法，我们只看我们需要的，比如现在我们要定义的是x轴标签，也就是最外围的标签，所以选择XAxisRendererRadarChart，
进去之后，发现在这里获取了颜色的值，接着往下看
这个方法就是进行我们标签绘制的地方。接着我们开始操作。
/** * @author Petterp on 2019/5/11 * Summary:重写XAxisRendererRadarChart * 邮箱：1509492795@qq.com */ public class XAxisRendererRandarChart extends XAxisRendererRadarChart { private RadarChart mChart; public XAxisRendererRandarChart(ViewPortHandler viewPortHandler, XAxis xAxis, RadarChart chart) { super(viewPortHandler, xAxis, chart); mChart=chart; } @Override public void renderAxisLabels(Canvas c) { if (!mXAxis.isEnabled() || !mXAxis.isDrawLabelsEnabled()) return; final float labelRotationAngleDegrees = mXAxis.getLabelRotationAngle(); final MPPointF drawLabelAnchor = MPPointF.getInstance(0.5f, 0.25f); mAxisLabelPaint.setTypeface(mXAxis.getTypeface()); mAxisLabelPaint.setTextSize(mXAxis.getTextSize()); // 将这句话移到下面 // mAxisLabelPaint.setColor(mXAxis.getTextColor()); float sliceangle = mChart.getSliceAngle(); // calculate the factor that is needed for transforming the value to // pixels float factor = mChart.getFactor(); MPPointF center = mChart.getCenterOffsets(); MPPointF pOut = MPPointF.getInstance(0,0); for (int i = 0; i < mChart.getData().getMaxEntryCountSet().getEntryCount(); i++) { //这里是改动的地方 mAxisLabelPaint.setColor(mXAxis.getTextColor()); String label = mXAxis.getValueFormatter().getAxisLabel(i, mXAxis); float angle = (sliceangle * i + mChart.getRotationAngle()) % 360f; Utils.getPosition(center, mChart.getYRange() * factor + mXAxis.mLabelRotatedWidth / 2f, angle, pOut); drawLabel(c, label, pOut.x, pOut.y - mXAxis.mLabelRotatedHeight / 2.f, drawLabelAnchor, labelRotationAngleDegrees); } MPPointF.recycleInstance(center); MPPointF.recycleInstance(pOut); MPPointF.recycleInstance(drawLabelAnchor); } }
但是就这样还不行，我们还需要重写一个类，RadarCharts ，要不然你用的还是官方的类，不就等于没改吗。
所以继续看。
RodarCharts类这里这两个方法，是不是就是刚才我们重新的其中一个。接着往下看。
这里创建了XAxisRendererRadarChart的实例。所以我们需要更改的地方很简单，那就是将这里的类替换成我们的类即可。
这里我就不贴代码了，有点长。也没啥重要的。
最后在布局文件处进行更改，这样就完成了自定义x轴标签，当然我们只做了最简单的几个操作，是不是很简单吧。
<com.petterp.radchart.RadarCharts android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="match_parent" />
好了，以上就是MPAndroidChart 雷达图的基本使用了，如果有什么不懂的，也欢迎随时提问，我们一起进步！！！
