如何在Android中绘制图形？

How to Draw graph in Android?

提问by Girish Patel

I want to draw graph like shown in the attached image.

我想绘制如图所示的图形。

I already tried by aChartEngine but it's not working successfully.

我已经通过 aChartEngine 尝试过，但没有成功。

采纳答案by Balázs édes

You could create a SurfaceView, in which you can draw to a Canvasin the onDraw()method. To draw your graph, you can use the Pathclass, and it's moveTo()and lineTo()methods. To change the appearance of the lines, use the Paintclass. Then use the Canvases drawPath()method, which takes a Path, and a Paintobject. I think it's a bit easier to start with, than OpenGl.

您可以创建一个SurfaceView，您可以在其中画上Canvas的onDraw()方法。要绘制图形，您可以使用Path该类moveTo()及其lineTo()方法。要更改线条的外观，请使用Paint该类。然后使用 CanvasesdrawPath()方法，它接受一个Path和一个Paint对象。我认为它比 OpenGl 更容易开始。

• SurfaceView
• Canvas
• Path
• Paint

• 表面视图
• 帆布
• 小路
• 画

Some tutorial

一些教程

Update:@Shakti Malik found a pretty good looking library, which looks easy to use: MPAndroidChart

更新：@Shakti Malik 发现了一个非常漂亮的库，看起来很容易使用：MPAndroidChart

回答by rokonoid

How about trying OpenGL ES ?

试试 OpenGL ES 怎么样？

you can create a GraphView which will extends GLSurfaceView

您可以创建一个扩展 GLSurfaceView 的 GraphView

example code-

示例代码-

public class GraphView extends GLSurfaceView {

private Renderer renderer;

public GraphView(Context context) {
    super(context);
    renderer = new GraphRenderer();
    setRenderer(renderer);
}
}

And your GraphRender

还有你的 GraphRender

ublic class GraphRenderer implements Renderer {

public void onDrawFrame(GL10 gl) {
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();

GLU.gluLookAt(gl, 0, 0, -5, 0f, 0f, 0f, 0f, 1.0f, 1.0f);
gl.glColor4f(1, 0, 0, .5f);
}

public void onSurfaceChanged(GL10 gl, int width, int height) {
gl.glViewport(0, 0, width, height);

float ratio = (float) width / height;
gl.glMatrixMode(GL10.GL_PROJECTION);
gl.glLoadIdentity();
gl.glFrustumf(-ratio, ratio, -1, 1, 3, 7);
}

public void onSurfaceCreated(GL10 gl, EGLConfig config) {

}

private void drawGraph(GL10 gl) {
gl.glLineWidth(1.0f);

// put your code here ..


}

public static int loadShader(int type, String shaderCode) {
int shader = GLES20.glCreateShader(type);
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}

}

}

You can try this way.

你可以试试这个方法。

回答by y30

Example code of Canvas + Paint:

Canvas + Paint 的示例代码：

In your XML layout:

在您的 XML 布局中：

<com.y30.histogramdisplay.GraphView
    android:id="@+id/histogram_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent" />

In the Activity:

在活动中：

protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   GraphView graphView = (GraphView)findViewById(R.id.histogram_view);
   int graphArray[] = new int[256];
   for(int i = 0; i < graphArray.length; ++i) {
       graphArray[i] = i % 50;
   }
   graphView.setGraphArray(graphArray);
}

And the new View:

和新视图：

public class GraphView extends View {

   int m_graphArray[] = null;
   int m_maxY = 0;

   Paint m_paint;


   public GraphView(Context context) {
       super(context);
       init();
   }

   public GraphView(Context context, AttributeSet attrs) {
       super(context, attrs);
       init();
   }

   public GraphView(Context context, AttributeSet attrs, int defStyle) {
       super(context, attrs, defStyle);
       init();
   }

   private void init() {
       m_paint = new Paint();
       m_paint.setColor(Color.BLUE);
       m_paint.setStrokeWidth(10);
   }

   public void setGraphArray(int Xi_graphArray[], int Xi_maxY)
   {
       m_graphArray = Xi_graphArray;
       m_maxY = Xi_maxY;
   }

   public void setGraphArray(int Xi_graphArray[])
   {
       int maxY = 0;
       for(int i = 0; i < Xi_graphArray.length; ++i)
       {
           if(Xi_graphArray[i] > maxY)
           {
               maxY = Xi_graphArray[i];
           }
       }
       setGraphArray(Xi_graphArray, maxY);
   }


   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);

       if(m_graphArray == null)
       {
           return;
       }

       int maxX = m_graphArray.length;

       float factorX = getWidth() / (float)maxX;
       float factorY = getHeight() / (float)m_maxY;

       for(int i = 1; i < m_graphArray.length; ++i) {
           int x0 = i - 1;
           int y0 = m_graphArray[i-1];
           int x1 = i;
           int y1 = m_graphArray[i];

           int sx = (int)(x0 * factorX);
           int sy = getHeight() - (int)(y0* factorY);
           int ex = (int)(x1*factorX);
           int ey = getHeight() - (int)(y1* factorY);
           canvas.drawLine(sx, sy, ex, ey, m_paint);
        }
    }
 }

回答by ebrahim ashraf elsify

implementation 'com.jjoe64:graphview:4.2.1'

eduGrades = new String[5]; behGrades = new String[5];

eduGrades = 新字符串[5]; behGrades = new String[5];

    eduGrades[0] = getString(R.string.fail);
    eduGrades[1] = getString(R.string.pass);
    eduGrades[2] = getString(R.string.good);
    eduGrades[3] = getString(R.string.very_good);
    eduGrades[4] = getString(R.string.excellent);

    behGrades[0] = getString(R.string.baad);
    behGrades[1] = getString(R.string.accepted);
    behGrades[2] =  getString(R.string.good);
    behGrades[3] =  getString(R.string.very_good);
    behGrades[4] =  getString(R.string.excellent);

DataPoint[] eduDp = new DataPoint[results.size()]; DataPoint[] behDp = new DataPoint[results.size()];

数据点[] eduDp = 新数据点[results.size()]; DataPoint[] behDp = new DataPoint[results.size()];

            dates = new String[results.size()];

            for (int i = 0; i < results.size(); i++) {

                dates[i] = results.get(i).getDateOfNote();

                eduDp[i] = new DataPoint(i, (double) results.get(i).getEducationEvaluationSign());
                behDp[i] = new DataPoint(i, (double) results.get(i).getBehaviorEvaluationSign());

            }

            LineGraphSeries<DataPoint> eduSeries = new LineGraphSeries<>(eduDp);
            educationalGraphView.addSeries(eduSeries);
            eduSeries.setDrawBackground(true);
            eduSeries.setColor(getResources().getColor(R.color.blue));
            eduSeries.setBackgroundColor(getResources().getColor(R.color.blue));
            StaticLabelsFormatter staticLabelsFormatter;
            staticLabelsFormatter = new StaticLabelsFormatter(educationalGraphView);
            staticLabelsFormatter.setVerticalLabels(eduGrades);
            staticLabelsFormatter.setHorizontalLabels(dates);

            educationalGraphView.getGridLabelRenderer().setHorizontalLabelsColor(getResources().getColor(R.color.colorPrimaryDark));
            educationalGraphView.getGridLabelRenderer().setVerticalLabelsColor(getResources().getColor(R.color.colorPrimaryDark));
            educationalGraphView.getGridLabelRenderer().setGridColor(getResources().getColor(R.color.white));
            educationalGraphView.getGridLabelRenderer().setHorizontalLabelsAngle(145);
            educationalGraphView.getGridLabelRenderer().setTextSize(23f);
            educationalGraphView.getGridLabelRenderer().setLabelsSpace(20);
            educationalGraphView.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter);