问题
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?
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"!
回答1:
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?
回答2:
Look at Android-Charts project on GitHub.
来源：https://stackoverflow.com/questions/20357544/radar-chart-for-android