Gráfico

www.altova.com Expandir/Contraer todos Imprimir este apartado Página anterior Subir un nivel Página siguiente

Inicio >  Controles y eventos de control > Controles >

Gráfico

El control "Gráfico" permite la visualización de un archivo de datos de origen en forma de gráfico. Los tipos de gráficos disponibles son: gráficos circulares, gráficos de barras, gráficos de línea, gráficos de velas y gráfico indicador. Los datos para el eje X, el eje Y y otros componentes de gráfico se seleccionan con las expresiones XPath. El nodo del contexto para estas expresiones XPath se definen arrastrándolo de la estructura jerárquica en árbol de los datos origen y soltando en el control "gráfico" del diseño.

 

La configuración de la pantalla del gráfico dentro de la página se define en el Panel "Estilos & Propiedades". La configuración para el tipo de gráfico, la selección de datos y la apariencia se defienne en el cuadro de diálogo "Configuración del gráfico". A este cuadro de diálogo se puede acceder haciendo clic sobre el botón Cuadro de diálogo adicional de la propiedad Configuración del gráfico o simplemente haciendo doble clic sobre el gráfico en el diseño.

 

Para obtener una información más detallado sobre cómo configurar los gráficos, consulte la sección Gráficos

 

Haga clic para expandir/contraerNotas
Cuando el control se asocia con un nodo de la fuente de datos (vínculo con la fuente de página), al pasar el cursor por el control (en la vista Diseño de páginas) aparece el nodo asociado.
Todos los vínculos con fuentes de página de la estructura de fuentes de página aparecen en negrita. Los nodos de la estructura que no son vínculos de fuente de página no están en negrita.
Al pasar el cursor por el vínculo con la fuente de página en la estructura del diseño aparece información sobre el control asociado.
Para eliminar una asociación con el nodo de la fuente de datos (y por tanto los datos del control) haga clic con el botón derecho en el control (en la vista Diseño de páginas) y haga clic en Eliminar vínculo con la fuente de la página.
Para restaurar un estilo o una propiedad (en el panel Estilos y propiedades), seleccione el estilo/la propiedad y haga clic en Restaurar en la barra de herramientas del panel.
Los valores de varias propiedades se pueden configurar usando expresiones XPath. Así podrá utilizar valores dinámicos, es decir, valores calculados o tomados de los nodos de la fuente de datos en tiempo de ejecución. Para crear una expresión XPath, haga clic en el botón Editar XPath de la barra de herramientas del panel Estilos y propiedades.
Para editar la expresión XPath de un estilo o de una propiedad (en el panel Estilos y propiedades), seleccione el estilo/la propiedad y haga clic en el botón Editar XPath de la barra de herramientas del panel.
Para copiar un control y pegarlo en otra ubicación del diseño, pulse Ctrl mientras arrastra el control hasta su nueva posición.
Para asignar propiedades a un control, defina clases para el control (con la propiedad Clase CSS del explorador) y después asigne reglas a las clases en un archivo CSS externo (que se elije en el cuadro de diálogo Configuración del explorador).
Las propiedades CSS de los controles se pueden definir en el panel Estilos y propiedades y en archivos CSS externos, pero las que se definan en el panel Estilos y propiedades tienen prioridad.

 

Eventos del control Gráfico

Los gráficos pueden usar el evento AlHacerClicEnImagen. Para definir acciones para este evento, haga clic con el botón derecho en la etiqueta y seleccione Acciones de control para AlHacerClicEnImagen en el menú contextual. Consulte la sección Acciones para ver qué acciones se pueden configurar en este evento.

 

 

Haga clic para expandir/contraerAlHacerClicEnImagen (Al hacer clic, Al hacer clic largo)

El usuario final puede hacer clic en el control de dos maneras: un clic corto (Al hacer clic) y un clic largo (Al hacer clic largo). Por cada tipo de clic puede definir una secuencia diferente de acciones (imágenes siguientes a la izquierda y en el medio). La secuencia que se ejecutará depende del tipo de clic que utilice el usuario final. Además, después de estas acciones se puede lleva a cabo una secuencia de acciones adicional. Esta secuencia adicional debe colocarse después del evento Al hacer clic largo (imagen siguiente a la derecha).

MTDActionOnClick   MTDActionOnLongClick   MTDActionOnClickOnLongClick

Al hacer clic: acciones que se deben llevar a cabo cuando se hace clic en el control (primera imagen).
Al hacer clic largo: acciones que se deben llevar a cabo cuando se hace clic largo en un control (segunda imagen).
Secuencia de acciones adicional: acciones que se deben llevar a cabo después de que se ejecuten las acciones de Al hacer clic y Al hacer clic largo (tercera imagen). Si no define ninguna acción para Al hacer clic ni para Al hacer clic largo, entonces las acciones adicionales se llevan a cabo directamente cuando se haga clic o clic largo.

 

También puede utilizar combinaciones de acciones con los dos tipos de clic. El ejemplo de la imagen siguiente muestra cómo hacerlo con el evento Botón, pero funciona igual para el resto de controles.

MTDActionOnClickMultiple

En el control del ejemplo cada evento de clic tiene definida una secuencia de acciones. Además, después del evento Al hacer clic largo se definió el evento CuadroDeMensaje. Este CuadroDeMensaje se ejecutará cuando finalice la secuencia de acciones de Al hacer clic y Al hacer clic prolongado.

 

Al pulsar Entrar/Escape

Si la casilla del control Al pulsar Entrar o Al pulsar Escape está seleccionada, entonces las acciones del control se ejecutan cuando se pulsa la tecla correspondiente (Entrar o Escape). Pulsar una de estas teclas es una alternativa a los eventos Al hacer clic y se puede usar además del clic. La imagen siguiente muestra las casillas Al pulsar Entrar y Al pulsar Escape del control Botón. Esta opción tiene un aspecto parecido y funciona de forma similar con otros controles.

 

MTDOnEnterEscapeCheckBoxes

 

También se puede acceder a esta configuración desde la propiedad Al pulsar Entrar/Escape del control, que explicamos más abajo.

 

Nota:        si selecciona el comando de menú Página | Mostrar/Definir orden de tabulación, entonces los controles que se hayan asignado para cuando se pulsen las teclas Entrar o Escape estarán identificados con un símbolo de la tecla correspondiente.

 

Nota:   esta característica está disponible en clientes web y Windows, así como en simulaciones en todos los clientes.

 

 

Propiedades del control Gráfico

Las propiedades del control se pueden editar y consultar en el panel Estilos y propiedades y se describen en este apartado por orden de aparición en el panel.

 

Click to expand/collapseNombre

Se utiliza para hacer referencia al control desde otras partes de la página o del proyecto. Haga doble clic dentro del campo de valor para editar esta propiedad.

 

Haga clic para expandir/contraerConfiguración del gráfico

Haga clic en el botón Examinar para abrir el cuadro de diálogo "Configuración del gráfico". La configuración que elija en este cuadro de diálogo se aplicará al gráfico que esté seleccionado en el diseño en ese momento. Para más información consulte la sección Gráficos.

Haga clic para expandir/contraerID

Esta propiedad se debe introducir cuando el gráfico se coloque en una tabla extensible o en una fila extensible de una tabla dinámica. El valor de esta propiedad puede ser cualquier cadena de texto, pero debe dar como resultado un identificador distinto para cada instancia del gráfico. Esto se consigue asignando una expresión XPath dinámica como valor de la propiedad.

Haga clic para expandir/contraerCrear antes de cargar

En el cuadro combinado seleccione el valor true o false. Si elige true, el gráfico o la imagen base64 se crea antes de que se cargue la página. Si elige false, es necesario usar una acción de página para crear la imagen o el gráfico. El valor predeterminado es true.

 

Haga clic para expandir/contraerCreación de gráfico: ancho

Establece el ancho en píxeles del gráfico que se debe generar. Haga clic en el icono Editar XPath y escriba una expresión que devuelva un valor numérico. Este valor será el ancho en píxeles del gráfico que se debe generar.

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Haga clic para expandir/contraerCreación de gráfico: alto

Establece el alto en píxeles del gráfico que se debe generar. Haga clic en el icono Editar XPath y escriba una expresión que devuelva un valor numérico. Este valor será el alto en píxeles del gráfico que se debe generar.

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Haga clic para expandir/contraerAcción de control

Haga clic en el botón Examinar para abrir el cuadro de diálogo "Acciones". Aquí puede configurar qué acciones se llevan a cabo cuando se desencadena un evento del control. Los eventos del control están predefinidos y el cuadro de diálogo ofrece una pestaña para cada uno de ellos. En el panel izquierdo del cuadro de diálogo está la biblioteca de acciones. Desde aquí puede arrastrar una acción hasta la pestaña del evento correspondiente. Después puede definir las propiedades de la acción elegida. Por cada evento puede configurar varias acciones, que se ejecutarán en el orden en el que aparecen, de arriba a abajo.

 

Una vez definidas, las acciones del control se pueden editar en cualquier momento (haciendo clic en el botón Examinar de la propiedad). También puede acceder a un evento del control haciendo clic con el botón derecho del ratón en el control y seleccionando el evento en el menú contextual que aparece.

 

Haga clic para expandir/contraerVisible

Una expresión XPath que debe dar como resultado true() o false(). Si da como resultado false(), entonces el control no estará visible. Si la expresión da como resultado true() o devuelve algún otro valor, entonces el control estará visible. El valor predeterminado es true(). Haga doble clic en el campo de valor o clic en el botón XPath para escribir o editar la expresión XPath. Esta propiedad se puede usar para presentar en pantalla un objeto visible dependiendo de si la expresión XPath da como resultado true(). Es decir, la presentación en pantalla del objeto se puede configurar de forma dinámica, según el contenido o la estructura de los datos.

 

Nota:  para más información sobre la visibilidad de columnas/filas distribuidas consulte la sección Propiedades de tabla.

 

Nota:  la variable $MTControlValue no se puede usar para evaluar la propiedad Visible. Si la utiliza se producirá un error de validación.

 

Haga clic para expandir/contraerAlineación horizontal

Establece la alineación horizontal a la izquierda, en el centro o a la derecha. El valor predeterminado es center. También puede configurar el valor con una expresión XPath (lo cual permite generar el valor de forma dinámica).

 

Haga clic para expandir/contraerAncho del control

Establece el ancho del control. Seleccione un valor del cuadro combinado:

 

rellenar_principal: ajusta el ancho del control al ancho del elemento principal (por ejemplo, la celda de tabla o la página donde se incluye el control).
ajuste_automático_línea: ajusta el ancho del control al contenido. Cuando se selecciona este valor, se habilita la propiedad Ancho máximo del control.
valor porcentual: un porcentaje del ancho de la página. Seleccione un valor de la lista o escriba un valor directamente.
valor en píxeles: seleccione un valor en píxeles de la lista desplegable o escriba un valor directamente.

 

En efecto, fill_parent genera el ancho máximo, mientras que wrap_content crea el ancho mínimo.

 

El valor predeterminado para todos los controles es fill_parent, excepto para estos:

 

Image y Chart: el valor predeterminado de estos controles es wrap_content.
Geolocation Map: el valor predeterminado es el menor de los valores de $MT_CanvasX y $MT_CanvasY. Estas dos variables dinámicas dan, respectivamente, el ancho y el alto del área de visualización del dispositivo. El valor predeterminado de ambos controles es el mismo (en ambos casos, el menor de los valores de $MT_CanvasX y $MT_CanvasY), por lo que el área de visualización del control siempre será un cuadrado cuyo lado es igual a min($MT_CanvasX, $MT_CanvasY).

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Clic para expandir/contraerAncho de control máximo

Esta propiedad solamente está disponible cuando la propiedad Ancho del control del control tiene el valor ajuste_automático_línea. La propiedad Ancho de control máximo establece el ancho máximo del control. Seleccione un valor del cuadro combinado de la propiedad. Estos son los valores disponibles:

 

valor porcentual: un porcentaje del ancho de la página. Seleccione un valor de la lista desplegable o escriba un valor directamente.
valor en píxeles: seleccione un valor en píxeles de la lista desplegable o escriba un valor directamente.

 

Haga clic para expandir/contraerLimitar altura del control al lienzo

Seleccione uno de los valores permitidos en el cuadro combinado: true o false. Si la altura del control supera la altura del dispositivo, el valor true restringiría la altura a la del dispositivo. El valor predeterminado es true.

Haga clic para expandir/contraerMargen

Indica el margen máximo del control en relación a los objetos que lo rodean o al borde del objeto que lo contiene. Seleccione un valor en píxeles de la lista desplegable del cuadro combinado o haga doble clic en el campo del valor para escribir un valor en píxeles. La configuración definida se aplicará a los cuatro lados del control. Para definir un margen distinto para alguno de los cuatro lados, expanda la propiedad Margen para mostrar las propiedades individuales de ancho (izquierda, derecha, superior e inferior) e indique el valor deseado. Por ejemplo, si indica que el Margen es de 6px y el Margen inferior es de 12px, entonces el margen será de 6px en los lados izquierdo, derecho e inferior, y de 12px en el lado inferior.

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Clic para expandir/contraerAl pulsar Entrar/Escape

Se da uno de tres valores:

 

OnEnter: especifica que las acciones de este control se ejecuten al pulsar la tecla Entrar.
OnEscape: especifica que las acciones de este control se ejecuten al pulsar la tecla Escape.
Ninguno: ninguna acción al pulsar las teclas Entrar o Escape. Este es el valor predeterminado.

 

Si se usan expresiones XPath para generar valores, las expresiones deben evaluar con "AlPulsarEntrar" o "AlPulsarEscape". Si se da el mismo valor ("AlPulsarEntrar" o "AlPulsarEscape") a más de un control en la misma página, al pulsar la tecla se selecciona el primer control visible y habilitado de ese valor. (Véanse las propiedades Visible y Habilitado/Editable).

 

Esta configuración también se puede aplicar con el cuadro de diálogo para configurar las acciones AlHacerClic (véase la descripción de los eventos del control, más arriba).

 

Nota: si selecciona el comando de menú Mostrar/Definir orden de tabulación, entonces los controles que se hayan asignado para cuando se pulsen las teclas Entrar o Escape estarán identificados con un símbolo de la tecla correspondiente.

 

Nota: esta característica solo está disponible en clientes web y Windows, así como en simulaciones en todos los clientes.

 

Clic para expandir/contraerHoja de estilos

La propiedad Hoja de estilos establece qué hoja de estilos se debe usar para el control. La lista desplegable del cuadro combinado de esta propiedad incluye todas las hojas de estilos creadas por el usuario definidas en el proyecto. Seleccione la hoja de estilos que desea usar para el control. Si lo prefiere, también puede usar una expresión XPath para seleccionar la hoja de estilos. La ventaja de usar una XPath es que la selección de la hoja de estilos puede ser condicional (véase Aplicar hojas de estilos creadas por el usuario). Para más información consulte la sección Hojas de estilos.

 

Haga clic para expandir/contraerClase CSS del explorador

El nombre de la clase CSS que quiere asociar con este control. Si quiere asociar varias clases con el control, sepárelas por medio de espacios (p. ej. Clase1 Clase2). Después puede usar estas clases en un archivo CSS (el que se especifica en el cuadro de diálogo "Configuración del explorador") para asignar propiedades para este control concretamente. También puede usar una expresión XPath para generar los nombres de clase o recuperarlos.

 

 


© 2019 Altova GmbH