Main Content

在 App 中绘制数值数据

在 App 设计工具中,您可以创建一个绘制数值数据并根据用户输入进行更新的 App。此示例中的 App 收集用户输入,根据输入计算每月还款额,然后绘制一段时间内的本金和利息金额。此示例演示以下 App 构建任务:

  • 从 UI 组件访问属性值。

  • 在 App 中绘制数据。

在设计视图中布局 UI 组件

此 App 使用以下组件来创建简单的抵押贷款摊销计算器:

  • 数值编辑字段 - 输入数值,如贷款金额、利率和贷款期限,并查看计算出的每月还款额。MATLAB® 会自动检查以确保值为数值并且处于您指定的范围内。

  • 普通按钮 - 根据提供的输入计算每月还款额。

  • 坐标区 - 显示本金和利息金额相对于抵押分期付款变化的图。

布局 UI 组件

要创建抵押贷款计算器,请首先从 App 设计工具起始页打开一个新的可自动调整布局的两栏式 App。在设计视图中,将数值编辑字段、普通按钮和坐标区从组件库拖到 App 画布上。

配置部件外观

您可以通过直接在画布上编辑组件或在组件浏览器中更改属性来修改组件的外观。例如:

  • 以交互方式编辑组件的标签。双击 App 画布上的编辑字段标签,并修改标签文本。

  • 关闭在 Monthly Payment 编辑字段中编辑数据的功能。选中编辑字段组件,然后清除组件浏览器中的“可编辑”复选框。

在布局 App 组件后,设计视图中的 App 画布显示供 App 用户输入贷款金额、利率和贷款期限的字段,以及用于计算每月还款额的按钮,但该按钮尚未生效。本金与利息绘图为空。有关排列 App 组件的详细信息,请参阅在 App 设计工具的设计视图中布局 App

在代码视图进行 App 行为编程

要在代码视图中对 App 行为进行编程,请使用回调函数,只要 App 用户与特定的 App 组件进行交互,这些函数就会执行。例如,为 Monthly Payment 按钮编写一个回调函数,它在用户按下该按钮时计算每月还款额并对一些数据绘图。

添加回调函数

组件浏览器中右键点击 app.MonthlyPaymentButton,为 Monthly Payment 按钮添加一个 ButtonPushedFcn 回调函数。然后在上下文菜单中选择回调 > 添加 ButtonPushedFcn 回调。App 设计工具会在代码视图中自动生成一个空白函数,并将其作为回调函数分配给按钮。有关回调的详细信息,请参阅 App 设计工具中的回调

然后,在您刚刚创建的回调函数中,添加代码来计算每月还款额,并绘制本金和利息随时间变化的图。由于回调已分配给按钮的,因此当用户点击 Monthly Payment 按钮时,此代码就会执行。

计算每月还款额

使用圆点表示法 app.ComponentName.Property 访问 App 组件的数值输入值。例如,将 Loan Amount 字段中的输入存储到回调函数中的一个局部变量中。

amount = app.LoanAmountEditField.Value;

使用 Loan AmountInterest RateLoan Period 的数值编辑字段中的输入,在回调函数中计算每月还款额。

payment = (amount*rate)/(1-(1+rate)^-nper);

要在 Monthly Payment 数值编辑字段中输出计算的还款额,请将 Monthly Payment 值设置为计算的还款额。

app.MonthlyPaymentEditField.Value = payment;

在坐标区中绘制数据

要从 Monthly Payment 值生成本金和利息金额,请首先预分配和初始化变量。

interest = zeros(1,nper);
principal = zeros(1,nper);
balance = zeros(1,nper);
balance(1) = amount;

然后计算本金和利息。

for i = 1:nper
   interest(i)  = balance(i)*rate;
   principal(i) = payment - interest(i);
   balance(i+1) = balance(i) - principal(i);
end

使用 plot 函数在 App 中绘制数据,并将 App 中的 UIAxes 对象指定为第一个参量。例如,在名为 PrincipalInterestUIAxes 的坐标区上绘制本金和利息金额。

plot(app.PrincipalInterestUIAxes,(1:nper)',principal,(1:nper)',interest);

编辑坐标区外观

通过将 UIAxes 对象指定为对应函数中的第一个参量来调整轴范围和标签。例如,通过分别在 legendxlimylim 函数中将 app.PrincipalInterestUIAxes 指定为第一个输入参量,向坐标区添加图例并调整坐标区范围。

legend(app.PrincipalInterestUIAxes,{"Principal","Interest"},"Location","Best");
xlim(app.PrincipalInterestUIAxes,[0 nper]);
ylim(app.PrincipalInterestUIAxes,"auto");

运行 App

要运行该 App,请点击 App 设计工具的工具条中的运行。在数值字段中输入一些值,然后点击 Monthly Payment 按钮。该 App 计算每月还款额,并绘制本金和利息数据。

另请参阅

函数

属性

相关主题