App Designer におけるチャートを使用したカスタム UI コンポーネントの作成

この例では、チャートをカスタム UI コンポーネントに取り込む方法を説明します。アプリ作成者がこのコンポーネントを使用すれば、アプリユーザーはバブルチャートデータの表示を対話形式で変更できるようになります。コンポーネントのインターフェイスは以下で構成されます。

バブルチャートでプロットするデータを指定するパブリックプロパティ (XData、YData、SizeData など)
バブルチャートの表示を構成するパブリックプロパティ (XLabel、YLabel、ShowLegend など)
ユーザーインターフェイスコントロールを構成するパブリックプロパティ (ShowSizeUI、ShowTransparencyUI など)
アプリユーザーがアプリでサイズと透明度のコントロールを操作するときに実行されるパブリックコールバック BubbleSizeChangedFcn および BubbleTransparencyChangedFcn

カスタムのコンポーネントコードを調べるには、App Designer で InteractiveBubbleChart.mlapp ファイルを開きます。

カスタムコンポーネントの動作を検証するには、最初に新しいスクリプトファイルを開き、プロットするランダムデータを作成します。

x = 1:20;
y = rand(1,20);
bsize = rand(1,20);

このコードを追加して InteractiveBubbleChart オブジェクトをプログラムで作成し、データ関連のパブリックプロパティを名前と値の引数として指定します。

comp = InteractiveBubbleChart(XData=x,YData=y,SizeData=bsize);

次のコードをファイルに追加して、プロットの凡例を表示するようにコンポーネントを更新し、バブルサイズが大きいときに凡例を隠すコールバック関数を定義します。コードを実行し、コンポーネントを操作して動作を確認します。

comp.ShowLegend = true;
comp.BubbleSizeChangedFcn = @toggleLegend;

function toggleLegend(src,event)
    if src.BubbleSize == "Large"
        src.ShowLegend = false;
    else
        src.ShowLegend = true;
    end
end

関連するトピック