MiReal.me MiReal.me – Tu blog tecnológico con la más actualizada información
Bienvenido al repositorio de LiveChart ?
LiveChart es una biblioteca de Android de código abierto para dibujar gráficos hermosos pero poderosos. La biblioteca permite la personalización del color y la visualización de datos, en una API descriptiva fácil de aprender.
Dibuje desde una línea simple hasta un gráfico completamente etiquetado con límites y línea de base. La biblioteca es perfecta (y nació) para dibujar gráficos financieros donde la línea de base y el color del gráfico son importantes.
Agréguelo a su aplicación
Para insertar LiveChart en su compilación:
Paso 1. Agregue el repositorio JitPack a su archivo de compilación
Agréguelo en su build.gradle raíz al final de los repositorios:
allprojects {
repositorio {
... .
maven {url & # 39; https://jitpack.io & # 39; }
}
}
Paso 2. Agregue la dependencia
dependencias {
implementación & # 39; com.github.Pfuster12: LiveChart: 1.2.2 & # 39;
}
Contribuya
¡Cualquiera puede contribuir! El repositorio es compatible con Commitizen, consulte las pautas de mensajes de confirmación.
Hoja de ruta
La biblioteca LiveChart acaba de comenzar. Eche un vistazo a la hoja de ruta para ver nuevas funciones en el horizonte. ¿Tiene una solicitud? Abra un problema con una etiqueta de función.
Cómo utilizar
Necesitará una referencia a una visualización LiveChart a través de XML o mediante programación:
<? xml versión = " 1.0 " codificación = " utf-8 " [19659026]? >
< FrameLayout xmlns [19659028]: [19659028] Android = [19659009] " http://schemas.android.com/apk/res/android " [19659014] xmlns : herramientas = " http://schemas.android.com/tools "
android : [19659028] layout_width = " match_parent "
android : layout_height = " match_parent"
android : clipChildren = " false "
herramientas : context = " .MainActivity " >
< com .yabu.livechart.view.LiveChart
android : id = " @ + id / live_chart "
android : layout_width = " match_parent "
android : layout_height = " 300dp " />
</ FrameLayout >
val liveChart = findViewById ( R .id.live_chart)
LiveChart sabe cómo dibujar de un Solo conjunto de datos . Cree un nuevo conjunto de datos que contenga una lista de DataPoints :
val liveChart = findViewById ( R .id.live_chart)
val conjunto de datos = Conjunto de datos ( mutableListOf ( DataPoint ( 0f 1f]),
DataPoint ( 1f 3f ),
DataPoint ( 2f 6f )))
Para iniciar la operación de dibujo, la biblioteca utiliza una API pública descriptiva y concatenable: [19659061] val liveChart = findViewById ( R .id.live_chart)
val conjunto de datos = Conjunto de datos ( mutableListOf ( DataPoint ( 0f 1f]),
DataPoint ( 1f 3f ),
DataPoint ( 2f 6f )))
// establecer conjuntos de datos, mostrar opciones y … dibujar!
livechart.setDataset (conjunto de datos)
.drawYBounds ()
.drawBaseline ()
.drawFill ()
.drawDataset ()
Opciones de dibujo
El gráfico puede ser tan simple como dibujar una línea en un lienzo en blanco:
val dataset = Dataset ( mutableListOf ( DataPoint ( 0f 1f ),
DataPoint ( 1f 3f ),
DataPoint ( 2f 6f )))
livechart.setDataset (conjunto de datos)
.drawDataset ()
O proporcione el conjunto completo de capacidades de visualización agregando una línea de base, un relleno de degradado y límites de eje con etiquetas de datos:
val dataset = Conjunto de datos ( mutableListOf ( DataPoint ( 0f 1f ),
DataPoint ( 1f 3f ),
DataPoint ( 2f 6f )))
livechart.setDataset (conjunto de datos)
// Dibuja los límites del eje Y con puntos de datos de texto.
.drawYBounds ()
// Dibuja una línea de base personalizable desde el primer punto del conjunto de datos o establece manualmente un punto de datos
.drawBaseline ()
// Establezca manualmente el punto de datos desde el que dibujar la línea de base,
.setBaselineManually ( 1.5f )
// Dibuja un relleno en la línea del gráfico. Puede establecer si se dibuja con un degradado transparente
// o un relleno sólido. El valor predeterminado es degradado.
.drawFill (withGradient = true )
// dibuja el color de la ruta y el relleno en función de si está por encima o por debajo del punto de datos base
.drawBaselineConditionalColor ()
.drawDataset ()
Consulte la captura de pantalla para ver las diferentes opciones y el cambio de color por debajo de la línea de base / por encima de la línea de base.
Puede encontrar todas las opciones de dibujo posibles en la referencia API.
Estilo
Nivel de código de estilo
Desde v1.1.0 LiveChart admite el estilo personalizado de casi toda su interfaz a través de la clase LiveChartStyle . El objeto de estilo contiene todas las opciones de estilo disponibles como propiedades editables:
val style = LiveChartStyle (). aplicar {
textColor = Color . AZUL
textHeight = 30f
mainColor = Color . VERDE
mainFillColor = Color . MAGENTA
baselineColor = Color . AZUL
pathStrokeWidth = 12f
baselineStrokeWidth = 6f
}
// Pase el objeto de estilo para verlo mediante el método setLiveChartStyle (estilo: LiveChartStyle)
livechart.setDataset (conjunto de datos)
.setLiveChartStyle (estilo)
.drawBaseline ()
.drawFill (withGradient = true )
.drawYBounds ()
.drawDataset ()
El ejemplo anterior daría como resultado una vista bastante horrible (pero precisa) de:
Para ver el conjunto completo de atributos disponibles para personalizar, consulte Referencia de LiveChartStyle . Cualquier atributo que no se establezca explícitamente como alternativa a los valores predeterminados del objeto LiveChartAttributes también puede aparecer en la referencia.
Estilo con XML
También es posible aplicar estilo a varios atributos mediante atributos de diseño XML. Por ejemplo:
< com .yabu.livechart.view.LiveChart
android : id = " @ + id / live_chart "
android : layout_width = " match_parent "
android : layout_height = " 300dp "
app : labelTextColor = " @ color / colorAccent "
app : pathColor = " @ color / colorAccent "
aplicación : pathStrokeWidth = " 4dp "
aplicación : baselineStrokeWidth = " 4dp "
aplicación : baselineDashGap = " 8dp "
aplicación [19659028]: labelTextHeight = " 14sp "
aplicación : baselineColor = " @ color / colorPrimaryDark "[19659014] aplicación : overlayCircleColor = " @ color / colorPrimaryDark "
aplicación : [19659028] overlayLineColor ] = " @ color / colorPrimary "
aplicación : overlayCircleDiameter = " "[19659026] />
Para obtener un conjunto completo de atributos disponibles, puede consultar la referencia LiveChartView .
Segundo conjunto de datos
La biblioteca permite la comparación de datos trazando un segundo conjunto de datos en el mismo gráfico. El segundo conjunto de datos tiene de forma predeterminada un color gris, pero puede establecer el color manualmente mediante el objeto de estilo:
val firstDataset = Conjunto de datos ( mutableListOf ( DataPoint ( 0f 1f ),
DataPoint ( 1f 2f ),
DataPoint ( 2f 3f ),
DataPoint ( 3f 4f ),
DataPoint ( 4f 5f ),
DataPoint ( 5f 8f ),
DataPoint ( 6f 13f ),
DataPoint ( 7f 21f )
))
val secondDataset = Dataset ( mutableListOf ( DataPoint ( 0f 0f]),
DataPoint ( 1f 1f ),
DataPoint ( 2f 2f ),
DataPoint ( 3f 3f ),
DataPoint ( 4f 4f ),
DataPoint ( 5f 5f ),
DataPoint ( 6f 10f ),
DataPoint ( 7f 18f )
))
val style = LiveChartStyle (). aplicar {
mainColor = Color . GRIS
secondColor = Color . MAGENTA
pathStrokeWidth = 8f
secondPathStrokeWidth = 8f
}
livechart.setDataset (primer conjunto de datos)
.setSecondDataset (secondDataset)
.setLiveChartStyle (estilo)
.drawYBounds ()
.drawDataset ()
El resultado es el siguiente gráfico:
NOTA ¿Desea más de dos conjuntos de datos? No se preocupe, la hoja de ruta del proyecto está destinada a respaldar la elaboración de un número ilimitado de conjuntos de datos proporcionados en una lista.
Eventos táctiles
Desde v1.2.0 LiveChart admite eventos táctiles y puede dibujar un cursor DataPoint visual que se mueve con el dedo.
La superposición táctil está incorporada en la clase LiveChart . Puede definir el estilo del control deslizante vertical y el círculo mediante el objeto LiveChartStyle o mediante los atributos XML (ver arriba):
val chartStyle = [19659062] LiveChartStyle (). se aplica {
overlayLineColor = Color . AZUL
overlayCircleDiameter = 32f
overlayCircleColor = Color . VERDE
}
livechart.setDataset (conjunto de datos)
.setLiveChartStyle (chartStyle)
.drawDataset ()
Sin embargo, dibujar el cursor horizontal no nos dice mucho. Podemos agregar un oyente para obtener el DataPoint actual del evento táctil con LiveChart.OnTouchCallback :
val textView = findViewById ( R .id.text_view)
livechart.setDataset (conjunto de datos)
.setLiveChartStyle (chartStyle)
.setOnTouchCallbackListener ( objeto : LiveChart.OnTouchCallback {
sobrescribe la diversión en TouchCallback (punto : DataPoint ) {
textView.text = " ( $ {" %. 2f " .format (point.x)} [19659028] $ { "%. 2f " .format (point.y)} ) "
}
})
.drawDataset ()
Esto nos permite mostrar el punto actual que el usuario está arrastrando.
Desactivación de la superposición táctil
Si no desea la superposición táctil, se puede desactivar fácilmente:
livechart .setDataset (conjunto de datos)
.disableTouchOverlay ()
.drawDataset ()
Es posible que desee hacer esto cuando la vista del gráfico sea demasiado pequeña para aprovechar las interacciones táctiles, o si necesita una optimización adicional al dibujar la vista y requeriría la menor sobrecarga posible.
Consideraciones sobre las cosas
LiveChart intenta dejar la menor huella posible, extendiéndose desde la clase View integrada de Android para realizar operaciones de dibujo. A continuación se muestran los consejos de mejores prácticas para realizar solo operaciones de dibujo y evitar establecer variables en la memoria al llamar a onDraw () .
SIN EMBARGO dibujar grandes conjuntos de datos es una operación costosa y la interfaz de usuario de Android hará que parezca "janky" si no tiene cuidado con la cantidad de datos que ingresa.
Un buen ciudadano de Android dibujará solo los puntos de datos necesarios, evitará llamar repetidamente a drawDataset () y no animará LiveChartView en exceso.
Solo con LiveChartView
Aunque el punto de entrada principal a esta biblioteca es la clase de diseño LiveChart que contiene funcionalidad táctil adicional, la clase básica View ] LiveChartView que en realidad hace el dibujo, se mantiene público en caso de que existan requisitos de rendimiento y no sea necesario que las vistas táctiles superpuestas estén sobrecargadas (también puede deshabilitarlo, ver más arriba).
También le permite anularlo y agregar funcionalidad personalizada a esta clase base, ya que LiveChart se mantiene final.
La vista tiene exactamente los mismos atributos xml y API pública que la clase LiveChart por lo que son casi intercambiables.
.
