Angular Gráfico de acciones

    El gráfico de acciones de Ignite UI for Angular, a veces denominado gráfico de Angular Gráfico financiero o de velas, es una visualización compuesta que representa datos de cotización de acciones o datos de precios en una visualización interactiva de series temporales. El gráfico de acciones muestra los precios de las acciones de un ticker a lo largo del tiempo en un eje X de series temporales. Además, este gráfico muestra información sobre los datos de cotización de una empresa, como el precio de apertura, el precio máximo, el precio mínimo y el precio de cierre (OHLC) durante un período de tiempo configurable. El gráfico de acciones ofrece múltiples formas en las que se pueden visualizar e interpretar los datos, incluidos los modos de visualización de precio y volumen y una gran cantidad de indicadores de acciones.

    Angular Stock Chart Example

    Puedes crear un gráfico bursátil usando elIgxFinancialChartComponent control vinculando tus datos y, opcionalmente, configurandochartType la propiedad comoLine valor, como se muestra en el ejemplo siguiente.

    Stock Chart Recommendations

    Are Angular 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.

    Angular Stock Chart with Multiple Series

    Angular 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.

    Angular 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.

    Angular Chart Annotations

    La Capa de Anotación de Mira proporciona líneas de cruce que se encuentran en el valor real de cada serie objetivo. Los tipos de mira incluyen: horizontal, vertical y ambos. Las Cruces también pueden configurarse para acoplarse a puntos de datos configurando lacrosshairsSnapToData propiedad en verdadero, de lo contrario las miras se interpolarán entre puntos de datos. También se pueden habilitar anotaciones para mostrar el valor de la mira 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.

    Angular 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.

    Por defecto, 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, laindicatorTypes propiedad debe estar configurada al menos con 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áximos, mínimos, de apertura y cierre de la acción a lo largo del tiempo. Además, puede mostrar líneas de tendencia y superposiciones. Tu usuario final puede elegir diferentes tipos de gráficos desde la barra de herramientas. Por defecto, el tipo de gráfico está configurado enAuto. Puedes anular la configuración predeterminada, como se muestra 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 por defecto. Se puede desactivar estableciendo elzoomSliderType tonone como se muestra en el siguiente código:

    Ten en cuenta que deberías establecer lazoomSliderType opción al mismo valor que lachartType opción. De este modo, el control deslizante de zoom mostrará una vista previa correcta del panel de precios. El siguiente código demuestra cómo hacerlo:

    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:

    API References

    La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores: