android 自定义柱形图简书,android 自定义网状图

网状图的应用很常见了 大多数用在用户分析 比如战斗力图表等等

image.png

简单的描述下 流程吧 下面直接用六边形的例子

1.第一步首先要分析绘制出六个角的位置

画几何图形 一般都用path去绘制

先计算出六个角度的大小 网状图的半径

//角度

/*PI就是圆周率π，PI是弧度制的π,也就是180°

所以，Math.PI = 3.14 = 180°

ps，PI是一个浮小数*/

//angle = 180°*2 / 6 = 1.04 = 60°

float angle = (float) (Math.PI * 2 / 6);

//网状图的半径大小

int radius = 300;

//开始绘制

Path path = new Path();

// 起点

path.moveTo(centerX, centerY - curR);

//延伸路径

for (int j = 0; j <6; j++) {

endX = (float) (centerX + curR * Math.sin(angle * j));

endY = (float) (centerY - curR * Math.cos(angle * j));

path.lineTo(endX, endY);

}

//闭环

path.close();

绘制

canvas.drawPath(path, polygonPaint);

形状到此就绘制玩了

2.第二部绘制对角线的位置

//其实和形状一样 唯一的区别就是 起始点位置

Path path = new Path();

for (int i = 0; i <6; i++) {

path.reset();

path.moveTo(centerX, centerY);

float x = (float) (centerX + radius * Math.sin(angle * i));

float y = (float) (centerY - radius * Math.cos(angle * i));

path.lineTo(x, y);

canvas.drawPath(path, linsPaint);

}

3.最后一步绘制区域的百分比

//区域也和绘制形状一样 唯一的区别就是 半径要根据 最大阀值百分比换算

for (int j = 0; j < data.size(); j++) {

float curR = radius * data.get(j).getValue() / maxValue;//当前半径

float endX = (float) (centerX + curR * Math.sin(angle * j));

float endY = (float) (centerY - curR * Math.cos(angle * j));

if (j == 0) {

path.moveTo(endX, endY);

}

path.lineTo(endX, endY);

}

path.close();

到此 绘制 形状就结束了

简单的封装了个demo 支持大于3的边角网状图

ReticularView

网状结构图 支持各种颜色 方法详情可见源码注释 三边 4边 12边 都可以

image.png

image.png

image.png

image.png