MPAndroidChart3使用详解7：RadarChart（雷达图）

1 简述

2 使用

Step 1：在布局文件（.xml）中添加雷达图控件

Step 2：声明控件

private RadarChart rc;

Step 3：获取控件

rc = findViewById(R.id.rc);

3 设置数据

• 代码

    /**
     * 设置图表数据
     */
    private void setChartData2_2() {
        /* RadarData的无参构造方法 */
//        RadarData data = new RadarData();
//        data.addDataSet(creatingData("学习驾驶人不按指定时间上盗录学习驾驶的"));
//        data.addDataSet(creatingData("拖拉机驶入大中城市中心城区内道路的"));
        /* RadarData的不限参数的构造方法 */
//        RadarData data = new RadarData(
//                creatingData("驾驶摩托车在车把上悬挂物品的"),
//                creatingData("拖拉机驶入大中城市中心城区内道路的"),
//                creatingData("拖拉机违法规定载人的"),
//                creatingData("拖拉机牵引多辆挂车的"),
//                creatingData("学习驾驶人不按指定时间上盗录学习驾驶的")
//        );
        /* RadarData的List类型参数的构造方法 */
        List dataSets = new ArrayList<>();
        dataSets.add(creatingData("驾驶摩托车在车把上悬挂物品的"));
        dataSets.add(creatingData("拖拉机驶入大中城市中心城区内道路的"));
        dataSets.add(creatingData("拖拉机违法规定载人的"));
        dataSets.add(creatingData("拖拉机牵引多辆挂车的"));
        dataSets.add(creatingData("学习驾驶人不按指定时间上盗录学习驾驶的"));
        RadarData data = new RadarData(dataSets);

        rc.setData(data);
    }

    /**
     * 创建虚拟图表数据
     * @param lable 数据标签
     * @return
     */
    private RadarDataSet creatingData(String lable) {
        List yVals = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            yVals.add(new RadarEntry((float) (Math.random() * 100))); // 生成1-100的随机数
        }
        RadarDataSet ds = new RadarDataSet(yVals, lable);
        return ds;
    }

• 效果

3 图表的渲染与定制

3.1 为每组数据设置不同的颜色

• 代码

    /**
     * 设置图表数据
     */
    private void setChartData2_3_1() {
        List dataSets = new ArrayList<>();
        dataSets.add(creatingData("驾驶摩托车在车把上悬挂物品的", Color.parseColor("#36a9ce")));
        dataSets.add(creatingData("拖拉机驶入大中城市中心城区内道路的", Color.parseColor("#33ff66")));
        dataSets.add(creatingData("拖拉机违法规定载人的", Color.parseColor("#ef5aa1")));
        dataSets.add(creatingData("拖拉机牵引多辆挂车的", Color.parseColor("#ff0000")));
        dataSets.add(creatingData("学习驾驶人不按指定时间上盗录学习驾驶的", Color.parseColor("#6600ff")));
        RadarData data = new RadarData(dataSets);
        rc.setData(data);
    }

    /**
     * 创建一组虚拟图表数据
     * @param lable 标签
     * @param color 颜色
     * @return
     */
    private RadarDataSet creatingData(String lable, int color) {
        RadarDataSet ds = creatingData(lable);
        ds.setColor(color);
//        ds.setColor(color, 102); // 第二个参数（alpha）设置颜色的透明度
        ds.setDrawFilled(true); // 绘制填充，默认为false
        ds.setFillColor(color); // 填充颜色
        ds.setFillAlpha(51); // 填充内容透明度
        return ds;
    }

• 效果

不同线条颜色效果

填充颜色效果

3.2 不显示图表顶点的标签（label）

• 代码

XAxis xAxis = rc.getXAxis();
xAxis.setDrawLabels(false);

• 效果

3.3 不显示每组数据值标签（label）

• 代码

ds.setDrawValues(false); // 指定那组数据（RadarDataSet对象）不显示标签

• 效果

3.4 Y轴固定最大值

• 代码

YAxis yAxis = rc.getYAxis();
yAxis.setAxisMaximum(80f); // 要达到100需要把该值设为80，至于原因可以试着向下调小和向上调大看看效果就

• 效果

3.5 点击某个顶点高亮显示的样式

• 代码

s.setHighLightColor(Color.RED); // 高亮线条颜色
ds.setHighlightLineWidth(1f); // 高亮线条宽度
ds.setDrawHighlightCircleEnabled(true);  // 是否绘制高亮显示器焦点中心的点，默认为false
ds.setHighlightCircleFillColor(color); // 高亮显示器焦点中心的圆颜色
ds.setHighlightCircleInnerRadius(4f); // 高亮显示器焦点中心的点内圆半径
ds.setHighlightCircleOuterRadius(6f); // 高亮显示器焦点中心的点外圆半径
ds.setHighlightCircleStrokeColor(color); // 高亮显示器焦点中心的点边（光晕效果）颜色
ds.setHighlightCircleStrokeAlpha(102); // 高亮显示器焦点中心的点边（光晕效果）透明度
ds.setHighlightCircleStrokeWidth(6f); // 高亮显示器焦点中心的点边（光晕效果）宽度
// ds.setDrawHorizontalHighlightIndicator(false); // 是否绘制高亮水平线，默认为true
// ds.setDrawVerticalHighlightIndicator(false); // 是否绘制高亮垂直线，默认为true

• 效果

3.6 取消点击某个顶点高亮显示的效果

• 代码

ds.setHighlightEnabled(false); // 是否绘制高亮效果，默认为true
// ds.setDrawHighlightIndicators(false); // 是否绘制高亮显示器，默认为true

3.7 图表顶角显示不同颜色的小圆点

• 实现（两套方案）

① 额外设置一组顶点值数据：https://blog.csdn.net/Honiler/article/details/90441603

② 重写RadarChart控件添加顶角圆点绘制：https://blog.csdn.net/Honiler/article/details/90441899

• 效果