React gráfico de acciones
La Ignite UI for React, a veces denominada Gráfico financiero React o gráfico de velas japonesas, es una visualización compuesta que representa datos de cotizaciones bursátiles o datos de precios en una visualización interactiva de series de tiempo. El gráfico de acciones muestra los precios de las acciones para un ticker a lo largo del tiempo en un eje X de serie temporal. Además, este gráfico muestra información de los datos de teletipo de una empresa, como precio de apertura, precio máximo, precio bajo y precio de cierre (OHLC) durante un período de tiempo configurable. El gráfico de acciones ofrece múltiples formas de visualizar e interpretar los datos, incluidos modos de visualización de precio y volumen y una serie de indicadores de acciones.
React Stock Chart Example
Puede crear un gráfico de acciones utilizando el control IgrFinancialChart vinculando sus datos y, opcionalmente, configurando la propiedad chartType en el valor de Line, como se muestra en el siguiente ejemplo.
Stock Chart Recommendations
Are React Stock Charts right for your project?
El gráfico bursátil típico se representa con datos de ticker en un gráfico de velas que se utiliza para el análisis técnico de los rangos de precios. Un gráfico de velas compara los precios máximos y mínimos de un día con la apertura y el cierre del símbolo de cotización.
- El cuerpo del gráfico de velas muestra los valores comerciales de apertura y cierre (O/C).
- Las mechas del gráfico de velas muestran los precios comerciales máximos y mínimos (H/L).
- La distancia entre la parte superior e inferior del valor del ticker es el rango de días del precio del ticker.
- El valor del gráfico de velas es vacío cuando el activo cerró por encima de su apertura.
- El valor del ticker del gráfico de velas se completa cuando el activo cerró por debajo de su apertura.
- Una vela negra o roja representa un precio con un precio de cierre más bajo que el cierre de la vela anterior.
- Una vela blanca o verde representa un precio de cierre más alto que el cierre de la vela anterior.
El gráfico de acciones se puede configurar para que muestre uno de los siguientes:
- Gráfico de velas
- Gráfico de barras
- Gráfico de columnas
- Gráfico de líneas
Dado que un gráfico de acciones está destinado a permitir al usuario realizar funciones de análisis de datos, incluye elementos interactivos como:
- Filtros basados en el tiempo
- Precios Ver
- Vista de volumen
- Vista de indicadores
- Líneas de tendencia
- Vista de navegación/barra de zoom
Stock Chart Data Structure:
- La fuente de datos debe ser una matriz o una lista de elementos de datos.
- La fuente de datos debe contener al menos un elemento de datos.
- Todos los elementos de datos deben contener al menos una columna de fecha y hora (o cadena) que represente la fecha de los datos del teletipo.
- Todos los elementos de datos deben contener 1 columna numérica para el gráfico de barras, líneas y columnas.
- Todos los elementos de datos deben contener 4 columnas numéricas para apertura, máximo, mínimo y cierre (OHLC) para un gráfico de velas japonesas.
- Todos los elementos de datos deben contener 5 columnas numéricas para apertura, máximo, mínimo, cierre y volumen para un gráfico de velas japonesas.
React Stock Chart with Multiple Series
React gráfico de acciones
En este ejemplo, el gráfico de acciones representa el S&P 500 a lo largo de un año; útil para inversores y para realizar análisis técnicos y pronosticar precios/informes futuros.
React Stock Chart Styling
Si necesita un gráfico de acciones con más funciones, como otras series compuestas, puede configurar el grosor, los contornos, los pinceles, los contornos negativos y los pinceles negativos como se muestra a continuación. En este ejemplo, el gráfico de acciones compara los ingresos entre Amazon, Microsoft y Tesla.
React Chart Annotations
La capa de anotación en forma de cruz proporciona líneas cruzadas que se encuentran en el valor real de cada serie objetivo. Los tipos de punto de mira incluyen: Horizontal, Vertical y Ambos. La mira también se puede configurar para ajustarse a puntos de datos estableciendo la propiedad crosshairsSnapToData en verdadero; de lo contrario, la mira se interpolará entre los puntos de datos. También se pueden habilitar anotaciones para mostrar el valor de la cruz a lo largo del eje.
La capa de valor final proporciona una vista rápida a lo largo del eje del valor final mostrado en una serie.
La capa de llamada muestra una llamada en las posiciones X/Y.
Nota: Cuando se utiliza el modo del eje X ordinal, CalloutsXMemberPath debe apuntar al índice numérico del elemento; de lo contrario, CalloutsXMemberPath debe apuntar al valor de tiempo.
React Chart Panes
Están disponibles los siguientes paneles:
- Panel de precios: representa precios utilizando líneas, velas japonesas, barras (OHLC), líneas de tendencia y superposiciones financieras.
- Panel de indicadores: muestra todos los indicadores financieros en un gráfico separado, mientras que las superposiciones de BollingerBands y PriceChannel se representan en el panel de precios porque comparten el mismo rango de valores en el eje Y.
- Panel de volumen: representa volúmenes de acciones utilizando tipos de gráficos de columnas, líneas y áreas debajo de todos los paneles anteriores.
- Panel de zoom: controla el zoom de todos los paneles y siempre se representa en la parte inferior del gráfico.
Indicator Pane
Los comerciantes suelen utilizar indicadores financieros para medir cambios y mostrar tendencias en los precios de las acciones. Estos indicadores generalmente se muestran debajo del panel de precios porque no comparten la misma escala del eje Y.
De forma predeterminada, los paneles indicadores no se muestran. La barra de herramientas permite al usuario final seleccionar qué indicador mostrar en tiempo de ejecución. Para mostrar inicialmente un panel de indicadores, la propiedad indicatorTypes debe establecerse en al menos un tipo de indicador, como se demuestra en el siguiente código:
Volume Pane
El panel de volumen representa la cantidad de acciones negociadas durante un período determinado. Un volumen bajo indicaría poco interés, mientras que un volumen alto indicaría un alto interés con muchas operaciones. Esto se puede mostrar usando tipos de gráficos de columnas, líneas o áreas. La barra de herramientas permite al usuario final mostrar el panel de volumen seleccionando un tipo de gráfico para representar los datos en tiempo de ejecución. Para mostrar el panel, se debe configurar un tipo de volumen, como se demuestra en el siguiente código:
Price Pane
Este panel muestra los precios de las acciones y muestra los precios máximo, mínimo, de apertura y de cierre de las acciones a lo largo del tiempo. Además, puede mostrar líneas de tendencia y superposiciones. Su usuario final puede elegir diferentes tipos de gráficos en la barra de herramientas. De forma predeterminada, el tipo de gráfico está configurado en Auto. Puede anular la configuración predeterminada, como se demuestra en el siguiente código:
Tenga en cuenta que se recomienda utilizar el tipo de gráfico de líneas si se trazan múltiples fuentes de datos o si se traza una fuente de datos con muchos puntos de datos.
Zoom Pane
Este panel controla el zoom de todos los paneles mostrados. Este panel se muestra de forma predeterminada. Se puede desactivar configurando zoomSliderType en none como se demuestra en el siguiente código:
Tenga en cuenta que debe establecer la opción zoomSliderType en el mismo valor que la opción chartType. De esta manera, el control deslizante de zoom mostrará una vista previa correcta del panel de precios. El siguiente código demuestra cómo hacer esto:
En este ejemplo, el gráfico de acciones representa los ingresos de Estados Unidos.
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
- Animaciones de gráficos
- Anotaciones de gráfico
- Navegación de cartas
- Líneas de tendencia del gráfico
- Rendimiento del gráfico
API References
La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores: