Vraag Hoe grafiek tekenen in Android?


Ik wil een grafiek tekenen zoals getoond in de bijgevoegde afbeelding.

Ik heb het al geprobeerd door aChartEngine, maar het werkt niet goed.

enter image description here


11
2017-09-22 17:09


oorsprong


antwoorden:


Je zou een kunnen maken SurfaceView, waarin je kunt tekenen naar a Canvas in de onDraw() methode. Om uw grafiek te tekenen, kunt u de Path klasse, en dat is het moveTo() en lineTo() methoden. Gebruik de knop om het uiterlijk van de lijnen te wijzigen Paint klasse. Gebruik vervolgens de doeken drawPath() methode, die een Path, en een Paint voorwerp. Ik denk dat het een beetje makkelijker is om mee te beginnen dan OpenGl.

Een tutorial

Bijwerken: Ik heb een behoorlijk goed uitziende bibliotheek gevonden die er gemakkelijk uitziet: MPAndroidChart


9
2017-09-22 17:44



Hoe zit het met het proberen van OpenGL ES?

u kunt een GraphView maken die GLSurfaceView verlengt

voorbeeld code-

public class GraphView extends GLSurfaceView {

private Renderer renderer;

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

En uw 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;
}

}

Je kunt het op deze manier proberen.


1
2017-09-22 17:26



Voorbeeldcode van Canvas + Paint:

In uw XML-indeling:

<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 de activiteit:

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);
}

En de nieuwe weergave:

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);
        }
    }
 }

0
2018-06-13 18:09