Android MPAndroidChart RadarChart (蜘蛛网图)

it2022-05-06  7

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

1、Github地址:MPAndroidChart

官方使用RadarChart demo:RadarChartActivitry

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

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

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

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

1 repositories { 2 flatDir { 3 dirs 'libs' 4 } 5 maven { url "https://jitpack.io" } 6 maven { // this is for realm-db 7 url 'http://oss.jfrog.org/artifactory/oss-snapshot-local' 8 } 9 } 10 11 dependencies { 12 compile fileTree(dir: 'libs', include: ['*.jar']) 13 compile project(':MPChartLib') 14 }

在setting.gradle的文件添加:

1 include ':MPChartLib'

 对于实心填充

设置图例:

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

设置x、y:

1 XAxis xAxis = mChart.getXAxis(); 2 // X坐标值字体样式 3 // xAxis.setTypeface(tf); 4 // X坐标值字体大小 5 xAxis.setTextSize(12f); 6 xAxis.setTextColor(textColor); 7 8 YAxis yAxis = mChart.getYAxis(); 9 // Y坐标值字体样式 10 // yAxis.setTypeface(tf); 11 // Y坐标值标签个数 12 yAxis.setLabelCount(6, false); 13 // Y坐标值字体大小 14 yAxis.setTextSize(15f); 15 // Y坐标值是否从0开始 16 yAxis.setStartAtZero(true); 17 // 是否显示y值在图表上 18 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 方法中,有如下三行:

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

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

(1)首先会看到第一个循环体,这个循环体是进行从中心点发出到六边角的直线:

1 // 图表中心点到各六边角的的直线绘画,所以可在此之后增加直线后绘制的内容,比如增加圆点等。 2 for (int i = 0; i < mChart.getData().getXValCount(); i += xIncrements) { 3 4 PointF p = Utils.getPosition( 5 center, 6 mChart.getYRange() * factor, 7 sliceangle * i + rotationangle); 8 9 c.drawLine(center.x, center.y, p.x, p.y, mWebPaint); 10 11 p = Utils.getPosition( 12 center, 13 mChart.getYRange() * factor + 15, 14 sliceangle * i + rotationangle); 15 16 // 画圆点 17 c.drawCircle(p.x, p.y, 5, mWebPointPaint); 18 }

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

1 // y轴标签数,就是多少层网。 2 for (int j = 0; j < labelCount; j++) { 3 4 if(j < 5) { 5 mWebPaint.setAlpha(0); 6 } 7 8 if(j >= 5) { 9 mWebPaint.setAlpha(10); 10 mWebPaint.setStrokeWidth(0.5f + width); 11 width += 0.5f; 12 } 13 14 if(j == labelCount - 1){ 15 mWebPaint.setAlpha(20); 16 mWebPaint.setStrokeWidth(0.5f + width); 17 } 18 19 Path path3 = new Path(); 20 // 绘制循环到的网层 21 for (int i = 0; i < mChart.getData().getXValCount(); i++) { 22 23 float r = (mChart.getYAxis().mEntries[j] - mChart.getYChartMin()) * factor; 24 25 PointF p1 = Utils.getPosition(center, r, sliceangle * i + rotationangle); 26 PointF p2 = Utils.getPosition(center, r, sliceangle * (i + 1) + rotationangle); 27 28 c.drawLine(p1.x, p1.y, p2.x, p2.y, mWebPaint); 29 30 // 从50% 开始 31 if(j >= 5) { 32 if (i == 0) { 33 path3.moveTo(p1.x, p1.y); 34 path3.lineTo(p2.x, p2.y); 35 } 36 path3.lineTo(p1.x, p1.y); 37 } 38 } 39 40 // 从50% 开始 41 if(j >= 5){ 42 mWebContentPaint.setAlpha(5); 43 path3.close(); 44 c.drawPath(path3, mWebContentPaint); 45 } 46 }

 

查找到的资源:

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/

 

转载于:https://www.cnblogs.com/CharlesGrant/p/5193249.html

相关资源:垃圾分类数据集及代码

最新回复(0)