全部产品
Search

搜索本产品

    DataV：Membangun aplikasi visualisasi pada kanvas kosong

    文档中心

    DataV：Membangun aplikasi visualisasi pada kanvas kosong

    更新时间：Jul 06, 2025

    Bab ini menggunakan WebSite Data Dashboard sebagai contoh untuk menunjukkan cara mengembangkan proyek aplikasi visualisasi menggunakan template kosong DataV.

    Informasi latar belakang

    • Contoh ini menggunakan Static Data, sehingga Anda dapat langsung menempelkan data yang telah disiapkan di area konfigurasi data komponen. Jika sumber data Anda adalah CSV File, Database, atau jenis lainnya, Anda perlu menambahkan sumber data terlebih dahulu.

    • Jika Anda perlu menggunakan sumber data API, Anda dapat langsung memasukkan alamat API di bilah konfigurasi data. Saat mengonfigurasi, jika Anda perlu mengaktifkan operasi seperti Server Proxy Request, lihat Konfigurasikan data lintas domain.

    Tampilan efek

    Setelah menyelesaikan konfigurasi yang disediakan dalam artikel ini, Anda akan menghasilkan dasbor data dengan efek berikut.

    image

    Catatan

    Aplikasi visualisasi melibatkan banyak konfigurasi, dan konfigurasi yang berbeda menghasilkan gaya yang berbeda. Contoh ini hanya digunakan untuk memahami fitur dan alur operasi terkait. Efek sebenarnya tergantung pada operasi Anda.

    Informasi komponen

    Gambar berikut menunjukkan daftar periksa komponen yang digunakan dalam contoh, termasuk nama dan jumlah masing-masing komponen.

    image

    Prosedur

    Anda dapat membangun aplikasi visualisasi pada kanvas kosong dan dengan cepat menjelajahi fitur terkait dari DataV-Board menggunakan langkah-langkah berikut.

    Langkah 1: Buat aplikasi visualisasi

    1. Masuk ke Konsol DataV.

    2. Di halaman Projects, klik PC Creation.. Di halaman tersebut, pilih Blank Canvas dan klik Create Project.

    3. Di kotak dialog Create Project, masukkan nama aplikasi visualisasi dan pilih kelompok proyek. Jika belum ada kelompok yang dibuat, Anda dapat memilih Ungrouped.

      Setelah aplikasi berhasil dibuat, Anda akan diarahkan ke halaman editor aplikasi. Anda dapat menghubungkan ke sumber data dan mengonfigurasi informasi kanvas sesuai kebutuhan.

      Catatan

      Ukuran kanvas default adalah 1920×1080. Anda dapat menyesuaikannya sesuai kebutuhan di area Page Setting di sisi kanan editor kanvas.

    Langkah 2: Tambahkan dan konfigurasikan komponen

    Catatan

    • Operasi Pemilihan Ganda: Di Windows, tahan tombol Ctrl (tombol Command di Mac) dan klik komponen untuk memilih beberapa komponen.

    • Pindahkan Komponen: Anda dapat menyesuaikan posisi komponen di kanvas dengan menyeretnya atau memodifikasi koordinatnya di panel konfigurasi.

    • Penyesuaian Lapisan: Di panel lapisan di sebelah kiri, Anda dapat menyeret komponen ke atas atau ke bawah untuk mengubah tingkat lapisannya. Saat memindahkan lapisan, ketika dua komponen tumpang tindih, komponen di posisi depan akan menutupi yang di posisi belakang.

    Tren indikator bisnis

    1. Di panel All Assets di sebelah kiri kanvas, klik Information > Business Metric Trend untuk menambahkan komponen ke kanvas.

    2. Klik komponen tersebut, dan di panel Configuration di sebelah kanan aplikasi visualisasi, konfigurasikan Title, Icon, dan Value di panel bawah sesuai dengan diagram efek.image

    3. Ulangi langkah-langkah di atas untuk menyelesaikan konfigurasi semua komponen tren indikator bisnis.

    Judul umum

    1. Di panel Semua Aset di sisi kiri kanvas, klik Info > General Titles untuk menambahkan komponen judul umum ke kanvas.

    2. Klik komponen tersebut, dan di panel Configuration di sebelah kanan aplikasi visualisasi, konfigurasikan gaya Common Title.通用标题-样式

    3. Di panel Configure tab Common Title, ubah nama judulnya. image

    4. Ulangi operasi di atas untuk terus menambahkan komponen General Title lainnya.

    Papan ticker

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Info > Trader.

    2. Klik komponen tersebut, dan di panel Configuration di sebelah kanan aplikasi visualisasi, konfigurasikan gaya Ticker Board.

      数字翻牌器-样式

    3. Di Ticker Board pada Data Panel, ubah nilai menjadi data yang ingin ditampilkan.

      配置数字翻牌器组件数据

    4. Ulangi operasi di atas untuk terus menambahkan komponen Ticker Board lainnya.

    Timer

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Info > Timer.

    2. Konfigurasikan gaya Timer, modifikasi Icon Style, Timer, dan konfigurasi lainnya.image

    Blok latar belakang kustom

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Media > Customized Background.

    2. Konfigurasikan gaya Customized Background, modifikasi Custom Style dan Custom Background Style.

      image

    Dasbor

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Chart > Pie Chart > Dashboard.

    2. Konfigurasikan gaya Dashboard, modifikasi bidang seperti Dashboard Pointer di bawah Series.

      image

    3. Modifikasi file JSON item data sesuai kebutuhan.image

    Grafik kolom gelembung beranotasi

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Chart > Column Chart > Label Bubble Column Chart..

    2. Konfigurasikan gaya untuk Label Bubble Column Chart,. Ubah Element Style di bawah Series, serta modifikasi sumber data dan konfigurasi lainnya.

      imageimage

    Grafik area

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Charts > Area Chart.

    2. Konfigurasikan gaya Area Chart, modifikasi Line Style dan Set Data Source.

      imageimage

    3. Ulangi operasi di atas untuk terus menambahkan komponen Area Chart lainnya.

    Gambar tunggal

    1. Di panel All Assets di sebelah kiri kanvas, klik komponen Media > Image.

    2. Modifikasi Background Image gambar tunggal sesuai kebutuhan.image

    3. Ulangi operasi di atas untuk terus menambahkan komponen Single Image lainnya.

    Langkah 3: Pratinjau dan publikasikan aplikasi visualisasi

    Setelah mengonfigurasi gaya dan sumber data komponen, Anda dapat mempratinjau dan mempublikasikan aplikasi visualisasi untuk mencapai pemutaran dan demonstrasi daring dasbor. Langkah ini memperkenalkan cara mempratinjau dan mempublikasikan aplikasi visualisasi.

    1. Klik ikon {FA4AF138-6B6B-4DF3-AA90-521D2359AFB3} di pojok kanan atas editor kanvas untuk melompat ke halaman baru guna mempratinjau aplikasi visualisasi.

      Setelah pratinjau berhasil, Anda dapat mempublikasikan aplikasi visualisasi dengan mengikuti langkah-langkah berikut.

    2. Klik ikon {F18FCB2F-9D3E-4A35-9995-D9A7EFEA0EF6} di pojok kanan atas editor kanvas, dan di kotak dialog yang muncul, klik Publish Project untuk membuka halaman publikasi.

    3. Di halaman publikasi, klik ikon di sebelah kanan Sharing URL image.png untuk menyalin tautannya.

      Catatan

      Di halaman publikasi, Anda dapat melakukan manajemen informasi publikasi dan snapshot sesuai kebutuhan.

    4. Salin dan tempel URL ke bilah alamat browser untuk melihat proyek yang telah dipublikasikan.

    Referensi