自定義蜘蛛網狀圖

運行效果：

繪製分爲三步：
1、繪製蜘蛛網格線
2、繪製格中線
3、繪製數據

獲取中心點想x，y座標和半徑：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    radius = Math.min(w, h) / 2 * 0.9f;
    centerX = w / 2;
    centerY = h / 2;
    postInvalidate();

    super.onSizeChanged(w, h, oldw, oldh);
}

onDraw()方法：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //繪製蜘蛛網格線
    drawPolygon(canvas);
    //繪製格中線
    drawLine(canvas);
    //繪製數據
    drawRegion(canvas);
}

繪製蜘蛛網格線：

/**
 * 繪製蜘蛛網格線
 * @param canvas
 */
private void drawPolygon(Canvas canvas) {
    Path path = new Path();
    //每一圈之間的間距
  float r = radius / (count);
    for (int i = 1; i <= count; i++) {
        //當前圈半徑
    float curR = r * i;
        path.reset();
        for (int j = 0; j < count; j++) {
            if (j == 0) {
                //第一個點
        path.moveTo(centerX + curR, centerY);
            } else {
                //根據半徑算出六邊形下一個點座標
         float x = (float) (centerX + curR * Math.cos(angle * j));
                float y = (float) (centerY + curR * Math.sin(angle * j));
                path.lineTo(x, y);
            }
        }
        path.close();
        canvas.drawPath(path, radarPaint);
    }
}

第一個點的座標爲：（centerX+radius,centerY）,下一個點的座標爲：(centerX+radiuscos(α)，centerY+radiussin(α))，第三個點是：(centerX+radiuscos(α2)，centerY+radiussin(α2))。
通過path.lineTo(x，y)連接路徑。循環增加半徑繪製。

繪製格中線：

/**
 * 繪製格中線
 * @param canvas
 */
private void drawLine(Canvas canvas) {
    Path path = new Path();
    for (int i = 0; i < count; i++) {
        path.reset();
        path.moveTo(centerX, centerY);
        float x = (float) (centerX + radius * Math.cos(angle * i));
        float y = (float) (centerY + radius * Math.sin(angle * i));
        path.lineTo(x, y);

        canvas.drawPath(path, radarPaint);
    }
}

繪製數據：

/**
 * 繪製數據
 * @param canvas
 */
private void drawRegion(Canvas canvas) {
    Path path = new Path();
    valuePaint.setAlpha(127);
    for (int i = 0; i < count; i++) {
        double percent = data[i] / maxValue;
        float x = (float) (centerX + radius * Math.cos(angle * i) * percent);
        float y = (float) (centerY + radius * Math.sin(angle * i) * percent);
        if (i == 0) {
            path.moveTo(x, centerY);
        } else {
            path.lineTo(x, y);
        }
        //繪製圓點
        canvas.drawCircle(x, y, 10, valuePaint);
    }
    valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawPath(path, valuePaint);
}