Android的雷达图 [英] Radar Chart for Android
问题描述
我想知道是否有可能在Android中复制这种图形.
I wonder if is possible replicate this kind of graph in Android.
直接从图像中输入数据并不重要，将在上一个屏幕中输入.
The data is not important to be entered directly from the image, will be entered on a previous screen.
如果不可能的话，可以使用简单的蜘蛛图来重新创建类似的图表(实际上，这很难)，但重要的是可以插入两个不同的序列，并且它们具有自己的标签.
If not possible recreate a similar chart (I think it's pretty hard in fact) is possible use a simple spider graph, but the important thing is that can insert two different series and they have their own labels.
实际上，请注意，大写的标签形成一个表面，而小写的那些将形成另一个. 你说你可以做这样的事情?
In fact, notice that the labels capitalized form a surface, while those written in lower case will form another. You say that you can do such a thing?
我找到了这个库( https://code.google.com/p/charts4j/)他也做图形蜘蛛图，但是我不能用他的传奇"输入其他系列！
I found this library (https://code.google.com/p/charts4j/) who also does graphic spider chart, but I can not enter a different series with his "legend"!
推荐答案
我在图表设计中已经解决了部分问题！ 现在，我可以绘制完全相同的表格并正确输入数据. 特别是，我创建了一个自定义View，该Image扩展了ImageView，并在 onDraw(画布画布)上添加了以下代码:(该代码根本没有经过优化，我知道，这仅仅是为了快速运行测试)
I have partially solved in the design of the chart! Now I can draw exactly the same form and enter the data correctly. In particular, I created a custom View that extending the ImageView and on onDraw (Canvas canvas) I added the following code: (The code is not optimized at all, I know, it's just to run tests quickly )
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
Paint paint_cibo = new Paint();
Paint paint_vino = new Paint();
Paint paint_text = new Paint();
final float x = getWidth() * 1.5f;
final float y = getHeight() * 1.5f;
final int[] valori_cibo = new int[]{2, 5, 4, 8, 3, 5};
final int[] valori_vino = new int[]{6, 7, 7, 6, 6, 6};
canvas.drawColor(Color.WHITE);
paint.setAntiAlias(true);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2f);
paint_cibo.setAntiAlias(true);
paint_cibo.setColor(Color.BLUE);
paint_cibo.setStyle(Paint.Style.STROKE);
paint_cibo.setStrokeWidth(2f);
paint_vino.setAntiAlias(true);
paint_vino.setColor(Color.RED);
paint_vino.setStyle(Paint.Style.STROKE);
paint_vino.setStrokeWidth(2f);
paint_text.setAntiAlias(true);
paint_text.setColor(Color.BLACK);
paint_text.setStyle(Paint.Style.FILL);
paint_text.setTextSize(10);
// Draw the circles
for(int i = 1; i <= 110; i += 10)
canvas.drawCircle(x, y, i, paint);
// Draw the intersection lines
canvas.drawLine(x + 10, y - 2.5f, (float)(x + 10 + 110 * Math.cos(returnGradi(90))), (float)(y - 2.5f - 110 * Math.sin(returnGradi(90))), paint);
canvas.drawLine(x, y, (float)(x + 110 * Math.cos(returnGradi(45))), (float)(y - 110 * Math.sin(returnGradi(45))), paint);
canvas.drawLine(x, y, (float)(x + 110 * Math.cos(returnGradi(30))), (float)(y - 110 * Math.sin(returnGradi(30))), paint);
canvas.drawLine(x + 10, y - 5, (float)(x + 10 + 110 * Math.cos(returnGradi(315))), (float)(y - 5 - 110 * Math.sin(returnGradi(315))), paint);
canvas.drawLine(x, y + 8, (float)(x + 110 * Math.cos(returnGradi(315))), (float)(y + 8 - 110 * Math.sin(returnGradi(315))), paint);
canvas.drawLine(x, y, (float)(x + 110 * Math.cos(returnGradi(280))), (float)(y - 110 * Math.sin(returnGradi(280))), paint);
canvas.drawLine(x, y, (float)(x + 110 * Math.cos(returnGradi(260))), (float)(y - 110 * Math.sin(returnGradi(260))), paint);
canvas.drawLine(x - 10, y - 5, (float)(x - 10 + 110 * Math.cos(returnGradi(225))), (float)(y - 5 - 110 * Math.sin(returnGradi(225))), paint);
canvas.drawLine(x, y + 8, (float)(x + 110 * Math.cos(returnGradi(225))), (float)(y + 8 - 110 * Math.sin(returnGradi(225))), paint);
canvas.drawLine(x - 10, y - 2.5f, (float)(x - 10 + 110 * Math.cos(returnGradi(90))), (float)(y - 2.5f - 110 * Math.sin(returnGradi(90))), paint);
canvas.drawLine(x, y, (float)(x + 110 * Math.cos(returnGradi(135))), (float)(y - 110 * Math.sin(returnGradi(135))), paint);
canvas.drawLine(x, y, (float)(x + 110 * Math.cos(returnGradi(150))), (float)(y - 110 * Math.sin(returnGradi(150))), paint);
// Draw the numbers
for(int i = 1; i <= 10; i++)
canvas.drawText(String.valueOf(i), x - 2.5f, y - i * 10, paint_text);
//Start drawing food
canvas.drawLine((float)(x + valori_cibo[0] * 10 * Math.cos(returnGradi(45))), (float)(y - valori_cibo[0] * 10 * Math.sin(returnGradi(45))), (float)(x + valori_cibo[1] * 10 * Math.cos(returnGradi(30))), (float)(y - valori_cibo[1] * 10 * Math.sin(returnGradi(30))), paint_cibo);
canvas.drawLine((float)(x + valori_cibo[1] * 10 * Math.cos(returnGradi(30))), (float)(y - valori_cibo[1] * 10 * Math.sin(returnGradi(30))), (float)(x + valori_cibo[2] * 10 * Math.cos(returnGradi(280))), (float)(y - valori_cibo[2] * 10 * Math.sin(returnGradi(280))), paint_cibo);
canvas.drawLine((float)(x + valori_cibo[2] * 10 * Math.cos(returnGradi(280))), (float)(y - valori_cibo[2] * 10 * Math.sin(returnGradi(280))), (float)(x + valori_cibo[3] * 10 * Math.cos(returnGradi(260))), (float)(y - valori_cibo[3] * 10 * Math.sin(returnGradi(260))), paint_cibo);
canvas.drawLine((float)(x + valori_cibo[3] * 10 * Math.cos(returnGradi(260))), (float)(y - valori_cibo[3] * 10 * Math.sin(returnGradi(260))), (float)(x + valori_cibo[4] * 10 * Math.cos(returnGradi(150))), (float)(y - valori_cibo[4] * 10 * Math.sin(returnGradi(150))), paint_cibo);
canvas.drawLine((float)(x + valori_cibo[4] * 10 * Math.cos(returnGradi(150))), (float)(y - valori_cibo[4] * 10 * Math.sin(returnGradi(150))), (float)(x + valori_cibo[5] * 10 * Math.cos(returnGradi(135))), (float)(y - valori_cibo[5] * 10 * Math.sin(returnGradi(135))), paint_cibo);
canvas.drawLine((float)(x + valori_cibo[5] * 10 * Math.cos(returnGradi(135))), (float)(y - valori_cibo[5] * 10 * Math.sin(returnGradi(135))), (float)(x + valori_cibo[0] * 10 * Math.cos(returnGradi(45))), (float)(y - valori_cibo[0] * 10 * Math.sin(returnGradi(45))), paint_cibo);
//Start drawing Wine
canvas.drawLine((float)(x + 10 + valori_vino[0] * 10 * Math.cos(returnGradi(90))), (float)(y - valori_vino[0] * 10 * Math.sin(returnGradi(90))), (float)(x + 10 + valori_vino[1] * 10 * Math.cos(returnGradi(315))), (float)(y - 5 - valori_vino[1] * 10 * Math.sin(returnGradi(315))), paint_vino);
canvas.drawLine((float)(x + 10 + valori_vino[1] * 10 * Math.cos(returnGradi(315))), (float)(y - 5 - valori_vino[1] * 10 * Math.sin(returnGradi(315))), (float)(x + 5 + valori_vino[3] * 10 * Math.cos(returnGradi(315))), (float)(y + 10 - valori_vino[3] * 10 * Math.sin(returnGradi(315))), paint_vino);
canvas.drawLine((float)(x + 5 + valori_vino[3] * 10 * Math.cos(returnGradi(315))), (float)(y + 10 - valori_vino[3] * 10 * Math.sin(returnGradi(315))), (float)(x + 5 + valori_vino[3] * 10 * Math.cos(returnGradi(225))), (float)(y + 5 - valori_vino[3] * 10 * Math.sin(returnGradi(225))), paint_vino);
canvas.drawLine((float)(x + 5 + valori_vino[3] * 10 * Math.cos(returnGradi(225))), (float)(y + 5 - valori_vino[3] * 10 * Math.sin(returnGradi(225))), (float)(x - 5 + valori_vino[4] * 10 * Math.cos(returnGradi(225))), (float)(y - 8 - valori_vino[4] * 10 * Math.sin(returnGradi(225))), paint_vino);
canvas.drawLine((float)(x - 5 + valori_vino[4] * 10 * Math.cos(returnGradi(225))), (float)(y - 8 - valori_vino[4] * 10 * Math.sin(returnGradi(225))), (float)(x - 10 + valori_vino[5] * 10 * Math.cos(returnGradi(90))), (float)(y - valori_vino[5] * 10 * Math.sin(returnGradi(90))), paint_vino);
canvas.drawLine((float)(x - 10 + valori_vino[5] * 10 * Math.cos(returnGradi(90))), (float)(y - valori_vino[5] * 10 * Math.sin(returnGradi(90))), (float)(x + 10 + valori_vino[0] * 10 * Math.cos(returnGradi(90))), (float)(y - valori_vino[0] * 10 * Math.sin(returnGradi(90))), paint_vino);
}
我重复一遍，不要考虑优化效果不佳的代码... 可以实现某种缩放以将焦点缩放保持在圆心的中心吗?
I repeat, not to consider the poorly optimized code... It's possible to implement some sort of zoom that maintaining the focus zoom in center of the circle's center?
这篇关于Android的雷达图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
