mxGraph
Pustaka Pembuatan Diagram JavaScript Sumber Terbuka
Buat Aplikasi Grafik dan Diagram Interaktif melalui Pustaka Diagram JavaScript Gratis Open Source.
mxGraph adalah pustaka diagram JavaScript open source yang menyediakan fungsionalitas untuk merender diagram SVG dan HTML. Tidak ada perangkat lunak pihak ketiga yang diperlukan untuk menggunakan perpustakaan mxGraph. Hal baik lainnya adalah tidak memerlukan plugin dan dapat diintegrasikan ke dalam hampir semua kerangka kerja. mxGraph menyediakan fitur yang dimaksudkan untuk menampilkan diagram dan grafik interaktif. API menyediakan semua fungsionalitas yang biasanya diperlukan untuk menggambar, berinteraksi dengan, dan mengaitkan konteks dengan diagram.
API menggunakan arsitektur yang sangat umum, memerlukan server web yang memiliki kemampuan untuk menangani halaman HTML dan browser web yang mendukung JavaScript. Ini terutama menggunakan satu file JavaScript yang berisi semua fungsi perpustakaan. File itu dimuat ke halaman web HTML di bagian JavaScript dan dieksekusi dalam wadah HTML di browser
Memulai dengan mxGraph
Cara yang disarankan untuk menginstal mxGraph adalah melalui npm, tersedia melalui manajer paket npm. Untuk menggunakan mxGraph sebagai dependensi, gunakan npm install.
Instal mxGraph melalui npm
npm install mxgraph --save
Hasilkan Grafik melalui JavaScript API
Pustaka mxGraph open source menyediakan fungsionalitas untuk membuat diagram atau grafik menggunakan JavaScript. Ini juga mendukung modifikasi grafik kompleks dengan membuat editor grafik baru atau menyesuaikannya. Pertama, Anda perlu membuat grafik di dalam wadah yang diberikan dan kemudian Anda dapat dengan mudah menambahkan sel ke model untuk membuat grafik. Anda dapat dengan mudah menambahkan judul diagram dan menempatkan catatan di beberapa peserta. Pustaka juga menyediakan fitur tambahan seperti efek visual, kontrol antarmuka pengguna, dan banyak lagi.
Menggabungkan Dua Grafik melalui JavaScript
mxGraph memungkinkan pemrogram komputer untuk menggabungkan dua grafik di dalam aplikasi JavaScript mereka sendiri. Pertama-tama, Anda perlu membuat grafik sampel di dalam wadah yang diberikan. Harap buat semua sel bulat dengan label putih tebal. Sekarang silahkan buat model graf kedua tanpa container. Tambahkan sel ke model target dalam satu langkah menggunakan id khusus untuk simpul. Sekarang Anda dapat menggabungkan model dari grafik kedua ke dalam model grafik pertama.
Menggambar Grid menggunakan JavaScript
Pustaka mxGraph memungkinkan pengembang perangkat lunak menggambar kisi secara dinamis di dalam aplikasi JavaScript mereka sendiri. Anda dapat dengan mudah menggambar grid secara dinamis menggunakan kanvas HTML 5. Pertama, buat grafik di dalam wadah yang diberikan dan Buat kisi secara dinamis yang membutuhkan kanvas. Anda perlu mengubah pemfilteran peristiwa untuk menerima kanvas sebagai penampung. Sekarang mempelajari latar belakang jika diperlukan dan menyetel jarak garis kisi dalam piksel. Sekarang menggambar grid yang sebenarnya.