mxGraph
Açık Kaynak JavaScript Diyagram Kitaplığı
Açık Kaynak Ücretsiz JavaScript Şema Kitaplığı aracılığıyla Etkileşimli Grafik ve Grafik Uygulamaları oluşturun.
mxGraph, SVG ve HTML diyagramlarını işlemek için işlevsellik sağlayan açık kaynaklı bir JavaScript diyagram oluşturma kitaplığıdır. mxGraph kitaplığını kullanmak için üçüncü taraf yazılımı gerekmez. Diğer iyi şey ise eklenti gerektirmemesi ve hemen hemen her çerçeveye entegre edilebilmesidir. mxGraph, etkileşimli diyagramları ve grafikleri görüntülemeye yönelik özellikler sağlar. API, bir bağlamı bir diyagramla çizmek, etkileşim kurmak ve ilişkilendirmek için yaygın olarak gereken tüm işlevleri sağlar.
API çok yaygın bir mimari kullanır, HTML sayfalarını işleme yeteneğine sahip bir web sunucusu ve JavaScript'i destekleyen bir web tarayıcısı gerektirir. Öncelikle tüm kitaplık işlevlerini içeren bir JavaScript dosyası kullanır. Bu dosya, bir JavaScript bölümündeki bir HTML web sayfasına yüklenir ve tarayıcıdaki bir HTML kapsayıcısında yürütülür.
mxGraph'a Başlarken
mxGraph'ı kurmanın önerilen yolu npm'dir, npm paket yöneticisi aracılığıyla kullanılabilir. mxGraph'ı bağımlılık olarak kullanmak için npm kurulumunu kullanın.
mxGraph'ı npm aracılığıyla yükleyin
npm install mxgraph --save
JavaScript API ile Grafikler Oluşturun
Açık kaynak kodlu mxGraph kitaplığı, JavaScript kullanarak bir diyagram veya grafikler oluşturmak için işlevsellik sağlar. Ayrıca, yeni grafik düzenleyiciler oluşturarak veya bunları özelleştirerek karmaşık grafikleri değiştirmeyi de destekler. Öncelikle, verilen kap içinde bir grafik oluşturmanız gerekir ve ardından grafiği oluşturmak için modele kolayca hücreler ekleyebilirsiniz. Kolayca diyagram başlıkları ekleyebilir ve birden fazla katılımcının üzerine notlar yerleştirebilirsiniz. Kütüphane ayrıca görsel efektler, kullanıcı arayüzü kontrolü ve daha fazlası gibi ek özellikler sağlar.
JavaScript ile İki Grafiği Birleştirme
mxGraph, bilgisayar programcılarının kendi JavaScript uygulamalarında iki grafiği birleştirmelerini sağlar. Her şeyden önce, verilen kap içinde örnek bir grafik oluşturmanız gerekir. Lütfen tüm hücreleri beyaz, kalın bir etiketle yuvarlak hale getirin. Şimdi lütfen ikinci grafik modelini kapsayıcı olmadan oluşturun. Köşeler için özel kimlikleri kullanarak tek adımda hedef modele hücreler ekleyin. Şimdi ikinci grafikteki modeli ilk grafiğin modeliyle birleştirebilirsiniz.
JavaScript kullanarak Izgara Çizimi
mxGraph kitaplığı, yazılım geliştiricilerin kendi JavaScript uygulamalarının içinde dinamik olarak bir ızgara çizmelerini sağlar. HTML 5 tuvalini kullanarak dinamik olarak kolayca bir ızgara çizebilirsiniz. Önce lütfen grafiği verilen kap içinde oluşturun ve dinamik olarak bir tuval gerektiren bir ızgara oluşturun. Tuvali kapsayıcı olarak kabul etmek için etkinlik filtrelemeyi değiştirmeniz gerekir. Artık cgerekirse arka planı öğrenir ve kılavuz çizgilerinin mesafesini piksel olarak ayarlar. Şimdi gerçek ızgarayı çizer.