Display Graphics in App Designer
App Designer Graphics Overview
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 this argument. The reason is that, in most contexts, MATLAB defaults to using the gcf
or gca
functions to get the target object for an operation. But these functions depend on the HandleVisibility
property of the parent figure being 'on'
, and the HandleVisibility
property of App Designer figures is set to 'off'
by default. This means that gcf
and gca
do not work as normal. As a result, omitting the argument for a target axes or parent object can produce unexpected results.
Depending on the graphics function you call, you might need to specify:
A
UIAxes
component on the canvasA parent container in your app
An axes component that you create programmatically in your app code
There are a number of ways to specify the target component for a graphics function. Some examples of the most common syntaxes are given below. To determine the correct target and syntax in your context, see the documentation for the specific graphics function you are using.
Display Graphics on Existing Axes
The most common way to display graphics in App Designer is to specify a UIAxes
object on the App Designer canvas as the graphics function target. When you drag an axes component from the Component Library onto the canvas, this creates a UIAxes
object in your app. The default name for an App Designer axes object is app.UIAxes
. To determine or change the name of a specific axes on your canvas, select the axes component. Its name is listed and can be edited in the Component Browser
Specify Axes as First Argument
Many graphics functions have an optional first input argument to specify the target axes object. For example, both the plot
function and the hold
function take a target axes object in this way. To plot two lines on a set of axes on the canvas, specify the name of the axes object as the first argument to each function you call.
plot(app.UIAxes,[1 2 3 4],'-r');hold(app.UIAxes);plot(app.UIAxes,[10 9 4 7],'--b');
Specify Axes as Name-Value Argument
Some graphics functions require the target axes object to be specified as a name-value argument. For example, when you call the imshow
and triplot
functions, specify the axes object to display on using the 'Parent'
name-value argument. This code displays an image on an existing set of axes on your canvas:
imshow('peppers.png','Parent',app.UIAxes);
Display Graphics in Container
Some graphics functions display in a container component, such as a figure, panel, or grid layout, instead of an axes object. For example, the heatmap
function has an optional first argument for specifying the container that the chart will display in.
Every App Designer app has a figure object, by default named app.UIFigure
, that is a container for the components that make up the main app window. Specify app.UIFigure
as the parent container argument to display graphics in the main app window. For example, to create a heat map in your app, use this syntax:
h = heatmap(app.UIFigure,rand(10));
To further organize and compartmentalize graphics that take a parent container input argument, drag a container component such as a panel, tab, or grid layout from the Component Library onto the canvas. Determine the name of the component by selecting it and viewing its name in the Component Browser. You can then specify this container as the parent when you call the graphics function.
Other commonly used graphics functions that take a parent container as input include annotation
, geobubble
, parallelplot
, scatterhistogram
, stackedplot
, and wordcloud
.
Create Axes Programmatically
Some graphics functions plot data on specialized axes. For example, functions that plot polar data must do so on a PolarAxes
object. Unlike UIAxes
objects, which you can add to your app from the Component Library, you must add specialized axes to your app programmatically in your code. To create an axes object programmatically, create a StartupFcn
callback for your app. Within it, call the appropriate graphics function and specify a parent container in your app as the target.
Plot on Polar Axes
Functions such as polarplot
, polarhistogram
, and polarscatter
take a polar axes object as a target. Create a polar axes programmatically by calling the polaraxes function. For example, to plot a polar equation in a panel, first drag a panel component from the Component Library onto your canvas. In the code for your app, create the polar axes object by calling the polaraxes
function and specifying the panel as the parent container. Then, plot your equation with the polarplot
function, specifying the polar axes as the target axes.
theta = 0:0.01:2*pi;rho = sin(2*theta).*cos(2*theta);pax = polaraxes(app.Panel);polarplot(pax,theta,rho)
Plot on Geographic Axes
Functions such as geoplot
, geoscatter
, and geodensityplot
take a geographic axes object as a target. Create a geographic axes programmatically by calling the geoaxes function. For example, to plot geographic data in a panel, use the following code:
latSeattle = 47 + 37/60;lonSeattle = -(122 + 20/60);gx = geoaxes(app.Panel);geoplot(gx,latSeattle,lonSeattle)
Create Tiled Chart Layout
To tile multiple charts using the tiledlayout
function, create a tiled chart layout in a panel and programmatically create axes in it using the nexttile
function. Return the axes object from the nexttile
function and use it to specify the axes for your charts or plots.
t = tiledlayout(app.Panel,2,1);[X,Y,Z] = peaks(20)% Tile 1ax1 = nexttile(t);surf(ax1,X,Y,Z)% Tile 2ax2 = nexttile(t);contour(ax2,X,Y,Z)
Use Functions with No Target Argument
Some graphics functions, such as ginput
and gtext
, do not have an argument for specifying a target. As a result, you must set the HandleVisibility
property of the App Designer figure to 'callback'
or 'on'
before calling these functions. After you call these functions, you can set the HandleVisibility
property back to 'off'
. For example, this code shows how to define a callback that allows you to identify the coordinates of two points using the ginput
function.
function pushButtonCallback(app,event) app.UIFigure.HandleVisibility = 'callback'; ginput(2) app.UIFigure.HandleVisibility = 'off';end
Use Functions That Don't Support Automatic Resizing
App Designer figures are resizable by default. This means that when you run an app and resize the figure window, components in the figure are automatically resized and repositioned to fit. However, some graphics functions do not support automatic resizing. To use these functions in App Designer, create a panel in which to display the output of the function and set the AutoResizeChildren
property of the panel to 'off'
. You can set this property in the Panel tab of the Component Browser or in your code.
For example, the subplot
function does not support automatic resizing. To use this function in your app:
Drag a panel component from the Component Library onto your canvas.
Set the
AutoResizeChildren
property of the panel to'off'
.Specify the panel as the parent container using the
'Parent'
name-value argument when you callsubplot
. Also, specify an output argument to store the axes.Call the plotting function with the axes as the first input argument.
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])
Other commonly used functions that do not support automatic resizing include pareto
and plotmatrix
.
For more information about managing resize behavior, see Alternatives to Default Auto-Resize Behaviors.
Unsupported Functionality
Some graphics functionality is not supported in App Designer. This table lists the unsupported functionality that is most relevant to app building workflows.
Category | Not Supported |
---|---|
Retrieving and Saving Data | These functions are not supported: Instead of the Figures created programmatically with |
Web Apps | If you are using App Designer to create a deployed web app (requires MATLAB Compiler™), additional graphics limitations apply. For more information, see Web App Limitations and Unsupported Functionality (MATLAB Compiler). |
See Also
UI Figure Properties | UIAxes Properties
Related Topics
- Plot Polar Equations in an App
- App Building Components
- Add UI Components to App Designer Programmatically
- Manage Resizable Apps in App Designer
MATLAB-Befehl
Sie haben auf einen Link geklickt, der diesem MATLAB-Befehl entspricht:
Führen Sie den Befehl durch Eingabe in das MATLAB-Befehlsfenster aus. Webbrowser unterstützen keine MATLAB-Befehle.
Select a Web Site
Choose a web site to get translated content where available and see local events and offers. Based on your location, we recommend that you select: .
You can also select a web site from the following list:
Americas
- América Latina (Español)
- Canada (English)
- United States (English)
Europe
- Belgium (English)
- Denmark (English)
- Deutschland (Deutsch)
- España (Español)
- Finland (English)
- France (Français)
- Ireland (English)
- Italia (Italiano)
- Luxembourg (English)
- Netherlands (English)
- Norway (English)
- Österreich (Deutsch)
- Portugal (English)
- Sweden (English)
- Switzerland
- Deutsch
- English
- Français
- United Kingdom (English)
Asia Pacific
- Australia (English)
- India (English)
- New Zealand (English)
- 中国
- 日本 (日本語)
- 한국 (한국어)
Contact your local office