MPAndroidChart_RadarChart雷达图的那些事

MPAndroidChart雷达图的那些事

MPAndroidChart攻略——RadarChart雷达图的使用。
实现自定义x轴标签颜色及雷达图基本使用详细教程。
MPAndroidChart_折线图的那些事
MPAndroidChart_饼图的那些事
MPAndroidChart_动态柱状图
MPAndroidChart_水平条形图的那些事
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 雷达图的基本使用了,如果有什么不懂的,也欢迎随时提问,我们一起进步!!!

最后,附上github的链接。相应的源码也在其中。
https://github.com/Petterpx/MPAndroidChart_RadarChartDemo

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

petterp

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值