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的文件添加:

 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/

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QCustomPlot 是一个 C++ 形绘库,它提供了丰富的绘功能,包括曲线、散点、柱状、等值线等。QCustomPlot 也支持绘制雷达蜘蛛网)。 在 QCustomPlot 中,绘制雷达需要使用 QCPGraph 类。该类提供了 setLineStyle、setScatterStyle、setData 等方法用于设置线型、散点和数据等属性。具体绘制步骤如下: 1. 创建一个 QCustomPlot 实例并设置其大小和背景色。 2. 创建一个 QCPGraph 实例并设置其线型、散点和数据等属性。 3. 创建一个 QCPAxisRect 实例并将其与 QCustomPlot 关联。 4. 创建一个 QCPAxis 实例并将其与 QCPAxisRect 关联,用于设置雷达的轴线。 5. 使用 QCustomPlot 的 addPlottable 方法将 QCPGraph 添加到 QCustomPlot 中。 6. 最后,调用 QCustomPlot 的 replot 方法刷新绘。 下面是一个简单的 QCustomPlot 绘制雷达的示例代码: ```cpp // 创建 QCustomPlot 实例并设置其大小和背景色 QCustomPlot *customPlot = new QCustomPlot(this); customPlot->setGeometry(10, 10, 400, 400); customPlot->setBackground(QBrush(Qt::white)); // 创建 QCPGraph 实例并设置其线型、散点和数据等属性 QVector<double> data = {1, 3, 2, 4, 5}; QCPGraph *graph = new QCPGraph(customPlot->xAxis, customPlot->yAxis); graph->setLineStyle(QCPGraph::lsLine); graph->setScatterStyle(QCPScatterStyle::ssCircle); graph->setData(QVector<double>({0, 1, 2, 3, 4}), data); // 创建 QCPAxisRect 实例并将其与 QCustomPlot 关联 QCPAxisRect *axisRect = new QCPAxisRect(customPlot); customPlot->plotLayout()->addElement(0, 0, axisRect); // 创建 QCPAxis 实例并将其与 QCPAxisRect 关联 QCPAxis *axis = new QCPAxis(axisRect, QCPAxis::AxisType::atPolar); axis->setRange(0, 5); axis->setTickStep(1); axis->setSubTickCount(4); axis->grid()->setVisible(true); axisRect->addAxis(QCPAxis::atLeft, axis); // 将 QCPGraph 添加到 QCustomPlot 中 customPlot->addPlottable(graph); // 刷新绘 customPlot->replot(); ``` 上述代码将绘制一个简单的雷达,其中包含一个 QCPGraph 对象,使用折线和圆圈表示数据点,使用 QCPAxisRect 和 QCPAxis 对象设置雷达的轴线。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值