Menampilkan Plot dalam App

Sebagian besar app analisis berdiri di atas satu komponen: axes tempat grafik digambar. Kebiasaan lama dari Command Window — memanggil plot(x, y) dan membiarkan MATLAB memakai current figure — justru menjadi sumber bug paling umum di app: tanpa target eksplisit, grafik tergambar di jendela baru di luar app. Chapter ini membahas komponen UIAxes, pola penargetan axes, pembaruan grafik yang responsif, dan ekspor hasilnya. Cakupannya:

• komponen UIAxes dan perbedaannya dari axes biasa
• menargetkan axes secara eksplisit di semua perintah grafik
• dua strategi pembaruan: clear-redraw versus update XData/YData
• beberapa seri, legend, dan ekspor lewat exportgraphics

Komponen UIAxes #

UIAxes adalah axes khusus untuk app berbasis uifigure — dibuat lewat App Designer (komponen Axes di Component Library) atau programatik dengan uiaxes(parent). Dokumentasi resmi menegaskan UIAxes sangat mirip dengan Axes yang dikembalikan fungsi axes(): objeknya bisa diteruskan ke hampir semua fungsi grafik yang menerima objek Axes. Perbedaannya ada di detail bawaan — misalnya satuan font bawaan UIAxes adalah piksel, bukan points — dan pada beberapa perilaku interaksi default.

Membuatnya programatik:

fig = uifigure;
ax = uiaxes(fig);
x = linspace(-pi, pi, 50);
y = 5*sin(x);
plot(ax, x, y)

Ketika kode di atas berjalan di desktop MATLAB, jendela app tampil berisi satu grafik sinus — semuanya di dalam jendela uifigure, bukan di figure terpisah.

Menargetkan Axes Secara Eksplisit #

Pola penulisannya seragam: axes menjadi argumen pertama fungsi grafik, atau diakses lewat dot notation untuk propertinya:

Contoh callback lengkap yang menggambar dua seri di satu axes:

function GambarButtonPushed(app, event)
    x = linspace(0, 2*pi, 200);

    cla(app.UIAxes);                 % bersihkan gambar lama
    hold(app.UIAxes, 'on');
    plot(app.UIAxes, x, sin(x), 'LineWidth', 1.5);
    plot(app.UIAxes, x, exp(-x/4).*sin(x), '--');

    hold(app.UIAxes, 'off');
    legend(app.UIAxes, 'sinus', 'teredam');
    app.UIAxes.XLabel.String = "x (radian)";
    app.UIAxes.Title.String = "Dua Seri dalam UIAxes";
end

Ketika tombol ditekan, axes app menampilkan dua kurva — garis penuh dan garis putus-putus — lengkap dengan legenda, label sumbu x, dan judul. Semua properti axes yang kita kenal dari bab plotting (XLim, YScale, GridColor, dan kawan-kawan) diakses dengan dot notation pada app.UIAxes.

Dua Strategi Pembaruan Grafik #

Strategi pertama — clear and redraw — sudah terlihat di callback di atas: cla() lalu plot() ulang setiap data berubah. Strategi ini paling sederhana dan cukup untuk data yang tidak terlalu besar.

Strategi kedua untuk data besar atau pembaruan cepat: jangan buat objek grafik baru — perbarui data objek lama. Objek garis yang dikembalikan plot() menyimpan datanya di properti XData dan YData; menulis ulang kedua properti itu menggerakkan kurva tanpa membangun ulang axes:

% Sekali saja, misalnya saat app dimulai:
app.hGaris = plot(app.UIAxes, x, y0);

% Setiap kali data berubah (misal dari slider):
app.hGaris.XData = xBaru;
app.hGaris.YData = yBaru;
drawnow limitrate

Mekanisme di balik layar: cla() + plot() menghapus dan membuat ulang objek grafik (alokasi baru, legenda dan pengaturan axes berpotensi ter-reset), sedangkan pembaruan XData/YData hanya memindahkan data objek yang sudah ada — jauh lebih murah untuk puluhan ribu titik yang berubah berkali-kali per detik. drawnow limitrate menjaga pembaruan layar tidak lebih cepat dari yang bisa dirender.

Beberapa Seri, Ekspor, dan Resize #

Untuk app yang menggambar beberapa seri, simpan handle setiap garis di properti app (app.hSeri1, app.hSeri2) supaya callback pembaruan bisa menyasar seri tertentu tanpa menggambar ulang semuanya. Ukuran jendela ditangani layout: taruh UIAxes di baris '1x' dari grid layout, dan axes ikut membesar-mengecil bersama jendela — komponen anak figure di-resize otomatis secara bawaan, dan grid layout yang mengatur pembagian ruangnya.

Hasil grafik app diekspor dengan exportgraphics — sintaksnya terverifikasi dari dokumentasi resmi: fungsi ini menerima objek axes dan berkas tujuan, hasilnya terpotong rapi hanya di sekitar konten, dan komponen UI tidak ikut tertangkap (hanya isi axes-nya):

function SimpanButtonPushed(app, event)
    exportgraphics(app.UIAxes, "grafik_app.png", Resolution=150);
    app.StatusLabel.Text = "Grafik tersimpan.";
end

Komputasi Data Plot, Terisolasi #

Sebelum digambar, data plot harus dihitung — dan komputasi itulah bagian yang bisa diuji tanpa jendela. Berkas contoh.m di folder chapter ini membangun tiga seri dari satu vektor x lalu melaporkan statistiknya untuk panel ringkasan:

jumlahTitik = 200;
seri = buatDataPlot(0, 2*pi, jumlahTitik);

fprintf('Data plot siap: %d titik, %d seri\n', ...
    jumlahTitik, numel(seri));
for k = 1:numel(seri)
    s = statistikSeri(seri(k).y);
    fprintf('%-9s min=%8.4f max=%8.4f rms=%7.4f\n', ...
        seri(k).nama, s.min, s.maks, s.rms);
end

% Pendekatan performa: perbarui YData line object, tanpa clear+redraw.
yBaru = seri(2).y * 0.5;
fprintf('update seri "%s" (YData baru): amplitudo maks=%.4f\n', ...
    seri(2).nama, max(abs(yBaru)));

Mari kita bedah baris-baris kode di atas:

1. Baris 2 (seri = buatDataPlot(...)): fungsi murni menghasilkan struct array berisi nama, x, dan y per seri — persis struktur data yang callback nyata teruskan ke plot(app.UIAxes, s.x, s.y).
2. Baris 6-11 (for k = ...): statistik tiap seri dihitung statistikSeri() — nilai-nilai ini yang di app sungguhan mengisi label ringkasan di bawah axes.
3. Baris 13-16 (yBaru = seri(2).y * 0.5): simulasi pembaruan YData — data baru dihitung lebih dulu, baru nanti dituliskan ke app.hGaris.YData di versi GUI-nya.

Output yang Dihasilkan:

Data plot siap: 200 titik, 3 seri
sinus     min= -1.0000 max=  1.0000 rms= 0.7053
teredam   min= -0.3175 max=  0.6964 rms= 0.3776
harmonik  min= -0.3333 max=  0.3333 rms= 0.2351
update seri "teredam" (YData baru): amplitudo maks=0.3482

Ringkasan #

Grafik app hidup di komponen UIAxes — sepupu Axes yang dibuat uiaxes() atau lewat App Designer. Semua perintah grafik di dalam app wajib menargetkan axes secara eksplisit: plot(app.UIAxes, x, y), hold(app.UIAxes, 'on'), legend(app.UIAxes, ...), cla(app.UIAxes) — dan properti sumbu diakses lewat app.UIAxes.XLabel.String. Pembaruan grafik punya dua strategi: clear-redraw untuk kesederhanaan, atau pembaruan XData/YData pada line object yang disimpan untuk performa. Hasil diekspor dengan exportgraphics(app.UIAxes, berkas). Komputasi datanya — tiga seri beserta statistiknya — teruji penuh di contoh.m tanpa satu jendela pun.