El Arsenal de Android – Gráficos

MiReal Desarrollo Android Deja un comentario 193 Visitas

AXGraphView Cree gráficos desplazables y con zoom.

Captura de pantalla

Vista previa (GIF)

Resumen

Instalación

AXGraphView está disponible en JCenter, así que simplemente agréguelo como una dependencia (módulo Gradle)

Gradle

implementation 'com.aghajari.graphview:AXGraphView:1.0.2'

Experto de

<dependency>
  <groupId>com.aghajari.graphview</groupId>
  <artifactId>AXGraphView</artifactId>
  <version>1.0.2</version>
  <type>pom</type>
</dependency>

Agregue vista a su diseño:

<com.aghajari.graphview.AXGraphView
    android:id="@+id/graph_view"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Establecer opciones de gráfico

AXGraphView graphView = findViewById(R.id.graph_view);
AXGraphOptions options = new AXGraphOptions(this);

options.scrollEnabled = true;
options.xDividerIntervalInPx = 100;
options.xDividerInterval = 0.5f;
options.yDividerIntervalInPx = 100;
options.yDividerInterval = 0.5f;
options.maxZoom = 6f;
options.minZoom = 0.5f
options.drawAxis = true;
...

graphView.setGraphOptions(options);

Agregar fórmula de gráfico

graphView.addFormula(new AXGraphFormula() { // x^2
    @Override
    public float function(float x) {
        return (float) Math.pow(x,2);
    }
});

graphView.addFormula(new AXGraphFormula() { 
    @Override
    public float function(float x) { // x^3
        return (float) Math.pow(x,3);
    }
});

O simplemente use Graph Formula Parser:

graphView.addFormula(new GraphFormulaParser(this,"(x)^2"));
graphView.addFormula(new GraphFormulaParser(this,"(x)^3"));

FormulaParser

Lo estoy usando actualmente Método de evaluación para analizar una fórmula en un ejemplo de AXGraphView, también puede usar otras bibliotecas para analizar la fórmula y dibujarla en AXGraphView.

Eje gráfico

Cambiar la posición del eje: puede cambiar la posición predeterminada del eje en las opciones.

options.axis = new PointF(-300,AXGraphOptions.DEFAULT);

Desactive el eje de dibujo y las líneas de cuadrícula:

options.drawAxisX = false;
options.drawAxisY = false;
options.drawGridXLines = false;
options.drawGridYLines = false;
options.drawAxisXDivider = false;
options.drawAxisYDivider = false;
options.drawXText = false;
options.drawYText = false;

options.axisPaint.setColor(Color.RED);
options.textPaint.setColor(Color.RED);
options.gridLinePaint.setColor(Color.GRAY);

Dominio del gráfico

Puede limitar el dominio del gráfico.

graphView.addFormula(new AXGraphFormula() { // x^2
    @Override
    public float function(float x) {
        return (float) Math.pow(x,2);
    }
    
    @Override
    public boolean isInDomain(float x) {
        return Math.abs(x) < 1;
    }
});

Puntos personalizados

Puede personalizar un punto específico del gráfico.

graphView.addFormula(new AXGraphFormula() { // Sin(x)

    @Override
    protected void init() {
        super.init();
        addCustomFunctionPoint(1);
        addCustomFunctionPoint(-1);
        addCustomPoint(0,3);
    }
    
    @Override
    public float function(float x) {
        return (float) Math.sin(x);
    }
    
    @Override
    public AXGraphPointType getPointType(float x, float y) {
        if (x==0) return AXGraphPointType.EMPTY;
        return super.getPointType(x, y);
    }
});

Para viajar

¡Puede mover (x & y) o cambiar la escala (x & y) de la función en el gráfico!

formula.applyTransformMove(3f,2.5f);
formula.applyTransformScale(1.5f,1.5f);

Multifórmula

También puede dibujar varias funciones juntas.

public class HeartGraphFormula extends AXGraphMultiFormula {

@Override
    public float[] multiFunction(float x) {
        return new float[] {
                function1(x),
                function2(x)
        };
    }

    public float function1(float x) {
        return (float) Math.sqrt(1 - Math.pow(Math.abs(x) - 1,2));
    }

    public float function2(float x) {
        return (float) (Math.acos(1 - Math.abs(x)) - Math.PI);
    }
}

Producción:

Diseño personalizado

Puede dibujar formas personalizadas usando AXGraphCanvas (del gráfico x, y):

public class CircleGraphFormula extends PaintedGraphFormula {

    private float r;
    private int angle;
    Paint paint;

    public CircleGraphFormula(Context context,float r,int angle){
        super(context);
        this.r = r;
        this.angle = angle;
        paint = new Paint();

        getGraphPaint().setStyle(Paint.Style.STROKE);
        getPointPaint().setColor(getGraphPaint().getColor());
        setPointCircleRadius(getPointCircleRadius()*1.2f);

        addCustomPoint(0,r);
        addCustomPoint(0,-r);
        addCustomPoint(r,0);
        addCustomPoint(-r,0);
    }

    @Override
    protected boolean onDraw(AXGraphCanvas canvas) {
        canvas.setRadiusFromAxis(true);
        canvas.drawCircle(0,0,r, getGraphPaint());

        if (angle!=0) {
            float angleR = (float) Math.toRadians(angle);
            String text = angle+"°";

            paint.setColor(Color.parseColor("#03DAC5"));
            paint.setStrokeWidth(getGraphPaint().getStrokeWidth());
            final float x = (float) Math.cos(angleR) * r;
            final float y = (float) Math.sin(angleR) * r;

            float r2 = r/5;
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(-r2,-r2,r2,r2,-angle,angle,true,paint);

            paint.setStyle(Paint.Style.FILL);
            paint.setTextSize(canvas.findGraphX(r)/10);
            canvas.drawText(text,r2,r2/1.5f, Gravity.CENTER_VERTICAL|Gravity.LEFT,paint);

            canvas.drawLine(0,0,x,0,paint);
            paint.setPathEffect(new DashPathEffect(new float[] {20f/canvas.getGraphScale(),20f/canvas.getGraphScale()}, 0f));
            canvas.drawLine(x,y,x,0,paint);
            canvas.drawLine(0,y,x,y,paint);
            paint.setPathEffect(null);

            paint.setColor(canvas.getGraphView().getContext().getResources().getColor(R.color.colorPrimary));
            canvas.drawLine(0,0,x,y,paint);

            int savedColor = getPointPaint().getColor();
            getPointPaint().setColor(paint.getColor());
            drawPoint(canvas,x,y, AXGraphPointType.CUSTOM);
            getPointPaint().setColor(savedColor);
        }
        return true; //skip drawing function
    }

    @Override
    public float function(float x) {
        return Float.POSITIVE_INFINITY; //undefined
    }
}

Gráficos famosos

Gráficos de fórmulas múltiples

Autor

Copyright 2021 Amir Hossein Aghajari
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

MiReal.me MiReal.me – Tu blog tecnológico con la más actualizada información