This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English version of the page.

Note: This page has been translated by MathWorks. Click here to see
To view all translated materials including this page, select Country from the country navigator on the bottom of this page.

Displaying Graphics in App Designer

Displaying graphics in App Designer requires a different workflow than you typically use at the MATLAB® command line. Once you understand this workflow and a few special cases, you will know how to call the functions you need for displaying almost any type of plot.

Calling Graphics Functions

Many of the graphics functions in MATLAB (and MATLAB toolboxes) have an argument for specifying the target axes or parent object. This argument is optional in most contexts, but when you call these functions in App Designer, you must specify that argument. Otherwise, MATLAB uses gcf or gca to get the target object for the operation. However, gcf cannot return an App Designer figure, and gca cannot return any axes within an App Designer figure. Thus, omitting the argument might produce unexpected results.

This code shows how to specify the target axes when plotting two lines. The first argument passed to plot and hold is app.UIAxes, which is the default name for the App Designer axes.

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

Some functions (such as imshow and triplot) use a name-value pair argument to specify the target object. For example, this code shows how to call the imshow function in App Designer.

imshow('peppers.png','Parent',app.UIAxes);
Whether you specify the target object as the first argument or a name-value pair argument depends on the function. See the documentation for the specific function you want to use to determine the appropriate arguments.

Displaying Plots Using Other Types of Axes

You can create most 2-D and 3-D plots using the App Designer axes (a uiaxes object). Starting in R2018b, you can create additional plots, such as those listed in the following table. Most of these plots require a different type of parent object and additional lines of code in your app. All of them use normalized units by default.

FunctionsCoding Details
polarplot
polarhistogram
polarscatter
compass

Create the polar axes by calling the polaraxes function. Specify the parent container as the first input argument (for example, app.UIFigure). Then call the plotting function with the polar axes as the first argument. For example:

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

subplot

Follow these steps:

  1. Set the AutoResizeChildren property to 'off'. Subplots do not support automatic resize behavior. You can set this property in the App Designer Inspector tab of the Component Browser or in your code.

  2. Specify the parent container using the 'Parent' name-value pair argument when you call subplot. Also, specify an output argument to store the axes.

  3. Call the plotting function with the axes as the first input argument.

For example:

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

pareto
plotmatrix

Follow these steps:

  1. Set the AutoResizeChildren property to 'off'. These plots do not support automatic resize behavior. You can set this property in the App Designer Inspector tab of the Component Browser or in your code.

  2. Create the axes by calling the axes function. Specify the parent container as the first input argument (for example, app.UIFigure).

  3. Call the pareto or plotmatrix function with the axes as the first input argument.

For example:

app.UIFigure.AutoResizeChildren = 'off';
ax = axes(app.UIFigure);
pareto(ax,[10 20 40 40])

geobubble
heatmap
parallelplot
scatterhistogram
stackedplot
wordcloud

Specify the parent container when calling these functions (for example, app.UIFigure) .

For example:

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

geoplot
geoscatter
geodensityplot

Create the geographic axes by calling the geoaxes function. Specify the parent container as the first input argument (for example, app.UIFigure). Then call the plotting function with the axes as the first argument. For example:

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

Unsupported Functionality

As of R2019a, some graphics functionality is not supported in App Designer. This table lists the functionality that is relevant to most app building workflows.

CategoryNot Supported
Animation
Annotations
Retrieving and Saving Data

Figures created programmatically with uifigure do support the save, load, savefig, and openfig functions.

Utilities
Functions not Recommended
Axes in Grid Layout Managers or Scrollable Containers

Workarounds:

  • To work around the grid layout manager limitation, place the axes or chart into a panel. Then place the panel into the grid.

  • To work around the scrollable container limitation, place the axes or chart into a panel with the Scrollable property set to 'off'. Then place the panel into the scrollable container.

Components
Properties
  • Some component properties are not supported in App Designer. For a list of supported properties for a particular component, see its property page on Designing Apps in App Designer.

See Also

|

Related Topics