Main Content

Mostrar gráficas en App Designer

Visión general de las gráficas de App Designer

Muchas de las funciones gráficas de MATLAB® (y toolboxes de MATLAB) tienen un argumento para especificar los ejes objetivo o el objeto principal. Este argumento es opcional en la mayoría de contextos, pero cuando llama a estas funciones en App Designer, debe especificar este argumento. La razón es que, en la mayoría de contextos, MATLAB utiliza de manera predeterminada las funciones gcf o gca para obtener el objeto objetivo de una operación. Pero estas funciones dependen de que la propiedad HandleVisibility de la figura principal esté en 'on', y de que la propiedad HandleVisibility de las figuras de App Designer esté establecida en 'off' de manera predeterminada. Esto quiere decir que gcf y gca no funcionan con normalidad. Como resultado, omitir el argumento para los ejes objetivo u objeto principal puede producir resultados inesperados.

Dependiendo de la función gráfica a la que llame, puede que necesite especificar:

  • Un componente UIAxes en el área de trabajo

  • Un contenedor principal en la app

  • Un componente de ejes que cree de forma programática en el código de la app

Existen muchas maneras de especificar el componente objetivo para una función gráfica. Algunos ejemplos de las sintaxis más comunes se muestran a continuación. Para determinar el objetivo y sintaxis correctos según el contexto, consulte la documentación para la función gráfica concreta que esté utilizando.

Mostrar gráficas en ejes existentes

La forma más habitual de mostrar gráficas en App Designer es especificar un objeto UIAxes en el área de trabajo de App Designer como el objetivo de la función gráfica. Cuando arrastra un componente de ejes desde la biblioteca Component Library hasta el área de trabajo, se crea un objeto UIAxes en la app. El nombre predeterminado para un objeto de ejes de App Designer es app.UIAxes. Para definir o cambiar el nombre de unos ejes específicos en el área de trabajo, seleccione el componente de ejes. Su nombre está enumerado y se puede editar en el explorador Component Browser

Especificar ejes como primer argumento

Muchas funciones gráficas tienen un primer argumento de entrada opcional para especificar el objeto de ejes objetivo. Por ejemplo, tanto la función plot como la función hold toman un objeto de ejes objetivo de esta manera. Para representar dos líneas en un conjunto de ejes en el área de trabajo, especifique el nombre del objeto de ejes como el primer argumento para cada función a la que llame.

plot(app.UIAxes,[1 2 3 4],'-r');
hold(app.UIAxes);
plot(app.UIAxes,[10 9 4 7],'--b');

Especificar ejes como argumento nombre-valor

Algunas funciones gráficas requieren que se especifique el objeto de ejes objetivo como un argumento nombre-valor. Por ejemplo, cuando llame a las funciones imshow y triplot, especifique el objeto de ejes que desee mostrar utilizando el argumento nombre-valor 'Parent'. Este código muestra una imagen de un conjunto existente de ejes en el área de trabajo:

imshow('peppers.png','Parent',app.UIAxes);

Mostrar gráficas en un contenedor

Algunas funciones gráficas se muestran en un componente contenedor, como una figura, panel o cuadrícula en lugar de un objeto de ejes. Por ejemplo, la función heatmap tiene un primer argumento opcional para especificar el contenedor en el que se mostrará la gráfica.

Cada app de App Designer tiene un objeto figura, denominado app.UIFigure de forma predeterminada, que es un contenedor para los componentes que forman la ventana principal de la app. Especifique app.UIFigure como el argumento del contenedor principal para mostrar gráficas en la ventana principal de la app. Por ejemplo, para crear un mapa de calor en la app, utilice esta sintaxis:

h = heatmap(app.UIFigure,rand(10));

Para seguir organizando y dividiendo en categorías las gráficas que toman como argumento de entrada un contenedor principal, arrastre un componente contenedor como un panel, pestaña o cuadrícula desde Component Library al área de trabajo. Determine el nombre del componente seleccionándolo y visualizando su nombre en Component Browser. Luego, puede especificar este contenedor como el principal cuando llame a la función gráfica.

Otras funciones gráficas de uso habitual que toman como entrada un contenedor principal incluyen annotation, geobubble, parallelplot, scatterhistogram, stackedplot, y wordcloud.

Crear ejes de forma programática

Algunas funciones gráficas representan datos en ejes especializados. Por ejemplo, las funciones que representan datos en coordenadas polares deben hacerlo en un objeto PolarAxes. A diferencia de los objetos UIAxes, que puede añadir a la app desde Component Library, debe añadir los ejes especializados a la app de forma programática en el código. Para crear un objeto de ejes de forma programática, cree un callback StartupFcn para la app. Dentro del callback, llame a la función gráfica correspondiente y especifique un contenedor principal en la app como objetivo.

Gráficas en ejes polares

Las funciones como polarplot, polarhistogram, y polarscatter toman un objeto de ejes polares como objetivo. Cree un eje polar de forma programática llamando a la función polaraxes. Por ejemplo, para representar una ecuación polar en un panel, primero arrastre un componente de panel desde Component Library al área de trabajo. En el código de la app, cree el objeto de ejes polares llamando a la función polaraxes y especificando el panel como el contenedor principal. Luego, represente la ecuación con la función polarplot, especificando los ejes polares como los ejes objetivo.

theta = 0:0.01:2*pi;
rho = sin(2*theta).*cos(2*theta);
pax = polaraxes(app.Panel);
polarplot(pax,theta,rho)

Gráficas en ejes geográficos

Las funciones como geoplot, geoscatter y geodensityplot toman un objeto de ejes geográficos como objetivo. Cree un eje geográfico de forma programática llamando a la función geoaxes. Por ejemplo, para representar datos geográficos en un panel, utilice el siguiente código:

latSeattle = 47 + 37/60;
lonSeattle = -(122 + 20/60);
gx = geoaxes(app.Panel);
geoplot(gx,latSeattle,lonSeattle)

Crear un diseño de gráfica en mosaico

Para representar en mosaico varias gráficas con la función tiledlayout, cree un diseño de gráfica en mosaico en un panel y de forma programática cree ejes en él utilizando la función nexttile. Devuelva el objeto de ejes de la función nexttile y utilícelo para especificar los ejes para sus gráficas o diagramas.

t = tiledlayout(app.Panel,2,1);
[X,Y,Z] = peaks(20)

% Tile 1
ax1 = nexttile(t);
surf(ax1,X,Y,Z)

% Tile 2
ax2 = nexttile(t);
contour(ax2,X,Y,Z)

Utilizar funciones sin argumento objetivo

Algunas funciones gráficas, como ginput y gtext, no tienen un argumento para especificar un objetivo. Por consiguiente, debe establecer la propiedad HandleVisibility de la figura de App Designer en 'callback' o en 'on' antes de llamar a estas funciones. Después de llamar a estas funciones, puede reestablecer la propiedad HandleVisibility en 'off'. Por ejemplo, este código muestra cómo definir un callback que permite identificar las coordenadas de dos puntos utilizando la función ginput.

function pushButtonCallback(app,event) 
    app.UIFigure.HandleVisibility = 'callback';
    ginput(2)
    app.UIFigure.HandleVisibility = 'off';
end

Utilizar funciones no compatibles con el redimensionamiento automático

Las figuras de App Designer son redimensionables de forma predeterminada. Esto significa que cuando ejecuta una app y cambia el tamaño de la ventana de la figura, los componentes de la figura cambian de tamaño automáticamente y se vuelven a posicionar para ajustarse. Sin embargo, algunas funciones gráficas no son compatibles con el redimensionamiento automático. Para utilizar estas funciones en App Designer, cree un panel en el que se muestre la salida de la función y establezca la propiedad AutoResizeChildren del panel en 'off'. Puede establecer esta propiedad en la pestaña Panel de Component Browser o en el código.

Por ejemplo, la función subplot no es compatible con el redimensionamiento automático. Para utilizar esta función en la app:

  1. Arrastre un componente de panel desde Component Library hasta el área de trabajo.

  2. Establezca la propiedad AutoResizeChildren del panel en 'off'.

  3. Especifique el panel como el contenedor principal utilizando el argumento nombre-valor 'Parent' cuando llame a subplot. Además, especifique un argumento de salida para almacenar los ejes.

  4. Llame a la función gráfica con los ejes como primer argumento de entrada.

app.Panel.AutoResizeChildren = 'off';
ax1 = subplot(1,2,1,'Parent',app.Panel);
ax2 = subplot(1,2,2,'Parent',app.Panel);
plot(ax1,[1 2 3 4])
plot(ax2,[10 9 4 7])

Otras funciones comúnmente utilizadas que no son compatibles con el redimensionamiento automático incluyen pareto y plotmatrix.

Para obtener más información sobre cómo gestionar el comportamiento del redimensionamiento, consulte Alternatives to Default Auto-Resize Behaviors.

Funcionalidades no compatibles

Algunas funcionalidades de gráficas no son compatibles con App Designer. Esta tabla enumera las funcionalidades no compatibles más relevantes para los flujos de trabajo de creación de apps.

CategoríaNo compatible
Recuperar y guardar datos

Estas funciones no son compatibles: hgexport, hgload, hgsave, save, load, savefig, openfig, saveas y print.

En lugar de las funciones saveas o print, utilice la función exportapp para guardar el contenido de una ventana de la app. Para guardar gráficas en una app, utilice las funciones exportgraphics o copygraphics.

Las figuras creadas de forma programática con uifigure son compatibles con las funciones save, load, savefig y openfig.

Apps web

Si está usando App Designer para crear una app web desplegada (requiere MATLAB Compiler™), se aplican limitaciones gráficas adicionales.

Para obtener más información, consulte Web App Limitations and Unsupported Functionality (MATLAB Compiler).

Consulte también

|

Temas relacionados