アプリでの数値データのプロット

アプリを開く

App Designer では、数値データをプロットし、ユーザー入力に応じて更新するアプリを作成できます。この例のアプリでは、ユーザー入力を収集し、入力に基づいて各月の支払金額の計算を行ってから、元金と利子の金額を経時的にプロットします。この例では、次のアプリ作成タスクを示します。

UI コンポーネントからプロパティ値にアクセスする。
アプリ内でデータをプロットする。

設計ビューでの UI コンポーネントのレイアウト

このアプリでは、次のコンポーネントを使用して、単純な割賦返済計算機を作成します。

数値編集フィールド — 借入額、金利、返済期間などの数値を入力します。計算された各月の支払金額が表示されます。MATLAB® は、値が数値で、指定された範囲内であるか自動的にチェックします。
プッシュボタン — 指定された入力から各月の支払金額を計算します。
座標軸 — ローンの分割払いに対する元金と利子額のプロットを表示します。

UI コンポーネントのレイアウト

ローン計算機を作成するには、まず、App Designer スタートページから自動リフロー機能を備えた新しい 2 パネルアプリを開きます。[設計ビュー] で、数値編集フィールド、プッシュボタン、および座標軸を [コンポーネントライブラリ] からアプリキャンバスにドラッグします。

コンポーネントの外観の構成

コンポーネントの外観を変更するには、キャンバス上でコンポーネントを直接編集するか、[コンポーネントブラウザー] でプロパティを変更します。以下に例を示します。

コンポーネントのラベルを対話的に編集する。アプリキャンバスで編集フィールドのラベルをダブルクリックし、ラベルのテキストを変更します。
[Monthly Payment] 編集フィールドでデータを編集する機能をオフにする。編集フィールドコンポーネントを選択し、[コンポーネントブラウザー] で [編集可能] チェックボックスをオフにします。

アプリコンポーネントをレイアウトした後、[設計ビュー] のアプリキャンバスには、アプリユーザーが借入額、金利、返済期間を入力するフィールドと、各月の支払金額を計算するためのボタンが表示されます。このボタンはまだ機能しません。[Principal and Interest] プロットは空です。アプリコンポーネントの配置の詳細については、App Designer の設計ビューでのアプリのレイアウトを参照してください。

コードビューでのアプリの動作のプログラム

[コードビュー] でアプリの動作をプログラムするには、アプリユーザーが特定のアプリコンポーネントを操作するたびに実行されるコールバック関数を使用します。たとえば、各月の支払金額を計算し、ユーザーがボタンを押したときにデータをプロットする、[Monthly Payment] ボタン用のコールバック関数を作成します。

コールバック関数の追加

[コンポーネントブラウザー] で app.MonthlyPaymentButton を右クリックし、[Monthly Payment] ボタン用の ButtonPushedFcn コールバック関数を追加します。次に、コンテキストメニューで [コールバック]、[ButtonPushedFcn コールバックの追加] を選択します。App Designer は [コードビュー] で空の関数を自動的に生成し、その関数をコールバック関数としてボタンに割り当てます。コールバックの詳細については、App Designer のコールバックを参照してください。

次に、作成したコールバック関数内に、各月の支払金額を計算し、元金と利子の金額を経時的にプロットするコードを追加します。コールバックがボタンに割り当てられているため、ユーザーが [Monthly Payment] ボタンをクリックすると、このコードが実行されます。

各月の支払金額の計算

ドット表記 app.ComponentName.Property を使用して、アプリコンポーネントの数値入力値にアクセスします。たとえば、[Loan Amount] フィールドの入力をコールバック関数内のローカル変数に格納します。

amount = app.LoanAmountEditField.Value;

[Loan Amount]、[Interest Rate]、および [Loan 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 を使用し、アプリ内の UIAxes オブジェクトを最初の引数として指定して、アプリ内でデータをプロットします。たとえば、元金と利子の金額を PrincipalInterestUIAxes という名前の座標軸にプロットします。

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

座標軸の外観の編集

対応する関数の最初の引数として UIAxes オブジェクトを指定して、軸の範囲とラベルを調整します。たとえば、座標軸に凡例を追加し、関数 legend、関数 xlim、関数 ylim のそれぞれの最初の入力引数として app.PrincipalInterestUIAxes を指定して軸の範囲を調整します。

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

アプリの実行

アプリを実行するには、App Designer のツールストリップで [実行] をクリックします。数値フィールドに値を入力し、[Monthly Payment] ボタンをクリックします。アプリは各月の支払金額を計算し、元金と利子のデータをプロットします。

アプリでの数値データのプロット

設計ビューでの UI コンポーネントのレイアウト

コードビューでのアプリの動作のプログラム

参考

関数

プロパティ

関連するトピック

アプリでの数値データのプロット

設計ビューでの UI コンポーネントのレイアウト

コード ビューでのアプリの動作のプログラム

参考

関数

プロパティ

関連するトピック

コードビューでのアプリの動作のプログラム