Android MPAndroidChart RadarChart (蜘蛛网图)

最近项目涉及到这个统计图形，经过实现，记录下，防止忘记了。

1、Github地址：MPAndroidChart

官方使用RadarChart demo：RadarChartActivitry

2、使用MPAndroidChart，还需要添加 nineoldandroids-2.4.0.jar

官方地址：http://nineoldandroids.com/

使用的是MPAndroidChart v2.2.2 的，还没有jar包。

在app目录下build.gradle的文件添加：

 repositories {
     flatDir {
         dirs 'libs'
     }
     maven { url "https://jitpack.io" }
     maven { // this is for realm-db
         url 'http://oss.jfrog.org/artifactory/oss-snapshot-local'
     }
 }

 dependencies {
     compile fileTree(dir: 'libs', include: ['*.jar'])
     compile project(':MPChartLib')
 }

在setting.gradle的文件添加：

 include ':MPChartLib'

对于实心填充

设置图例：

 Legend l = mChart.getLegend();
 // 图例位置
 l.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);
 // 图例字体样式
 // l.setTypeface(tf);
 // 图例X间距
 l.setXEntrySpace(2f);
 // 图例Y间距
 l.setYEntrySpace(1f);
 l.setTextColor(textColor); //字体颜色

设置x、y：

 XAxis xAxis = mChart.getXAxis();
 // X坐标值字体样式
 // xAxis.setTypeface(tf);
 // X坐标值字体大小
 xAxis.setTextSize(12f);
 xAxis.setTextColor(textColor);

 YAxis yAxis = mChart.getYAxis();
 // Y坐标值字体样式
 // yAxis.setTypeface(tf);
 // Y坐标值标签个数
 yAxis.setLabelCount(6, false);
 // Y坐标值字体大小
 yAxis.setTextSize(15f);
 // Y坐标值是否从0开始
 yAxis.setStartAtZero(true);
 // 是否显示y值在图表上
 yAxis.setDrawLabels(false);

设置显示内容块：

RadarDataSet set1 = new RadarDataSet(yVals, "虾米手机");
// 数据颜色设置
set1.setColor(ColorTemplate.VORDIPLOM_COLORS[0]);
// 实心填充区域颜色
set1.setFillColor(ColorTemplate.VORDIPLOM_COLORS[0]);
// 是否实心填充区域
set1.setDrawFilled(true);
// 数据线条宽度
set1.setLineWidth(2f);

来一发效果图：



如果想要自定义网状：

1、com.github.mikephil.charting.charts.RadarChart

2、在上面类中的 init 方法中，有如下三行：

 // 对网进行绘画
 mRenderer = new RadarChartRenderer(this, mAnimator, mViewPortHandler);
 // 对y轴的绘画
 mYAxisRenderer = new YAxisRendererRadarChart(mViewPortHandler, mYAxis, this);
 // 对x轴的绘画
 mXAxisRenderer = new XAxisRendererRadarChart(mViewPortHandler, mXAxis, this);

3、这下找到 RadarChartRenderer 下的 drawWeb(Canvas c)：

（1）首先会看到第一个循环体，这个循环体是进行从中心点发出到六边角的直线：

 // 图表中心点到各六边角的的直线绘画，所以可在此之后增加直线后绘制的内容，比如增加圆点等。
 for (int i = 0; i < mChart.getData().getXValCount(); i += xIncrements) {

     PointF p = Utils.getPosition(
              center,
              mChart.getYRange() * factor,
              sliceangle * i + rotationangle);

     c.drawLine(center.x, center.y, p.x, p.y, mWebPaint);

     p = Utils.getPosition(
              center,
              mChart.getYRange() * factor + 15,
              sliceangle * i + rotationangle);

     // 画圆点
     c.drawCircle(p.x, p.y, 5, mWebPointPaint);
  }

（2）往下有第二个循环体，开始绘制点到点的直线，绘制成网，这个时候就可以针对一层层网的背景，进行自定义绘制：

 // y轴标签数，就是多少层网。
 for (int j = 0; j < labelCount; j++) {

     if(j < 5) {
         mWebPaint.setAlpha(0);
     }

     if(j >= 5) {
         mWebPaint.setAlpha(10);
         mWebPaint.setStrokeWidth(0.5f + width);
         width += 0.5f;
     }

     if(j == labelCount - 1){
         mWebPaint.setAlpha(20);
         mWebPaint.setStrokeWidth(0.5f + width);
     }

     Path path3 = new Path();
     // 绘制循环到的网层
     for (int i = 0; i < mChart.getData().getXValCount(); i++) {

         float r = (mChart.getYAxis().mEntries[j] - mChart.getYChartMin()) * factor;

         PointF p1 = Utils.getPosition(center, r, sliceangle * i + rotationangle);
         PointF p2 = Utils.getPosition(center, r, sliceangle * (i + 1) + rotationangle);

         c.drawLine(p1.x, p1.y, p2.x, p2.y, mWebPaint);

         // 从50% 开始
         if(j >= 5) {
           if (i == 0) {
              path3.moveTo(p1.x, p1.y);
              path3.lineTo(p2.x, p2.y);
           }
           path3.lineTo(p1.x, p1.y);
           }
     }

     // 从50% 开始
     if(j >= 5){
        mWebContentPaint.setAlpha(5);
        path3.close();
        c.drawPath(path3, mWebContentPaint);
      }
  }    

查找到的资源：

1、SpiderWebChart：http://code1.okbase.net/codefile/SpiderWebChart.java_2014121928718_71.htm

2、csdn 上分享写的 MPAndroidChart 教程

3、 Android雷达图(蜘蛛网图)绘制

4、Radar (Spider Charts) ｛html用的｝http://www.fusioncharts.com/charts/radar-spider-charts/