MPAndroidChart雷达图的那些事
MPAndroidChart攻略——RadarChart雷达图的使用。
实现自定义x轴标签颜色及雷达图基本使用详细教程。
在最近的使用中，用到了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 雷达图的基本使用了，如果有什么不懂的，也欢迎随时提问，我们一起进步！！！
最后，附上github的链接。相应的源码也在其中。
https://github.com/Petterpx/MPAndroidChart_RadarChartDemo
