# 在 APP 中绘制数值曲线
在 APP 设计工具中，您可以创建一个绘制数值数据并根据用户输入进行更新的 APP。此示例中的 APP 收集用户输入，根据输入计算每月还款额，然后绘制一段时间内的本金和利息金额。此示例演示以下 APP 构建任务：
从 UI 组件访问属性值。
在 APP 中绘制数据。
本示例的 APP 源文件下载链接为在 APP 中绘制数值曲线。
# 在设计视图中布局 UI 组件
此 APP 使用以下组件来创建简单的抵押贷款摊销计算器：
数值编辑字段 - 输入数值，如贷款金额、利率和贷款期限，并查看计算出的每月还款额。
普通按钮 - 根据提供的输入计算每月还款额。
坐标区 - 显示本金和利息金额相对于抵押分期付款变化的图。
布局 UI 组件
要创建抵押贷款计算器，请首先从 APP 设计工具创建一个新的 APP。在设计视图中，将数值编辑字段、普通按钮和坐标区从组件库拖到 APP 画布上。
配置部件外观
您可以通过直接在画布上编辑组件或在组件浏览器中更改属性来修改组件的外观。例如：
修改组件的标签。单击 APP 画布上的编辑字段，在组件浏览器中修改标签文本。
关闭在 Monthly Payment 编辑字段中编辑数据的功能。选中编辑字段组件，然后清除组件浏览器中的Editable复选框。
在布局 APP 组件后，设计视图中的 APP 画布显示供 APP 用户输入贷款金额、利率和贷款期限的字段，以及用于计算每月还款额的按钮，但该按钮尚未生效。本金与利息绘图为空。有关排列 APP 组件的详细信息，请参阅在 APP 设计工具的设计视图中布局 APP。
# 在代码视图进行 APP 行为编程
要在代码视图中对 APP 行为进行编程，请使用回调函数，只要 APP 用户与特定的 APP 组件进行交互，这些函数就会执行。例如，为 Monthly Payment 按钮编写一个回调函数，它在用户按下该按钮时计算每月还款额并对一些数据绘图。
添加回调函数
在组件浏览器中右键单击 app.Button，为 Monthly Payment 按钮添加一个 ButtonPushedFcn 回调函数。然后在上下文菜单中选择回调 > 添加 ButtonPushedFcn 回调。APP 设计工具会在代码视图中自动生成一个空白函数，并将其作为回调函数分配给按钮。有关回调的详细信息，请参阅 APP 设计工具中的回调。
然后，在您刚刚创建的回调函数中，添加代码来计算每月还款额，并绘制本金和利息随时间变化的图。由于回调已分配给按钮的，因此当用户单击 Monthly Payment 按钮时，此代码就会执行。
计算每月还款额
使用圆点表示法 app.ComponentName.Property 访问 APP 组件的数值输入值。例如，将 Loan Amount 字段中的输入存储到回调函数中的一个局部变量中。
amount = app.EditField.Value;
使用 Loan Amount、Interest Rate 和 Loan Period 的数值编辑字段中的输入，在回调函数中计算每月还款额。
rate = app.EditField2.Value/12/100;
nper = 12*app.EditField3.Value;
payment = (amount*rate)/(1-(1+rate)^-nper);
要在 Monthly Payment 数值编辑字段中输出计算的还款额，请将 Monthly Payment 值设置为计算的还款额。
app.EditField4.Value = round(payment;digits=2);
在坐标区中绘制数据
要从 Monthly Payment 值生成本金和利息金额，请首先预分配和初始化变量。
remaining_principal = amount
Principal = Float64[]
Interest = Float64[]
for _ in 1:nper
# 计算每月利息
interest = remaining_principal * rate
# 计算每月本金
principal = payment - interest
# 更新剩余本金
remaining_principal -= principal
push!(Principal,principal)
push!(Interest, interest)
end
使用 plot 函数在 APP 中绘制数据，并将 APP 中的 UIAxes 对象指定为第一个参量。例如，在名为 UIAxes 的坐标区上绘制本金和利息金额。
plot(app.UIAxes,1:nper,Principal,1:nper,Interest)
编辑坐标区外观
通过将 xlabel、ylabel 函数指定坐标轴的标签，通过 title 函数指定坐标区的标题，通过 legend 函数向坐标区添加图例。
xlabel(app.UIAxes,"Time(Months)")
ylabel(app.UIAxes,"Amount")
title(app.UIAxes,"Principal and Interest")
legend(app.UIAxes,["Principal","Interest"])
运行 APP
要运行该 APP，请单击 APP 设计工具的菜单栏中的运行。在数值字段中输入一些值，然后单击 Monthly Payment 按钮。该 APP 计算每月还款额，并绘制本金和利息数据。