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/