Perlu melaksanakan fungsi pengurusan projek dalam apl React anda? Kemungkinan besar anda telah menganggap carta Gantt sebagai pilihan, kerana ia merupakan alat yang berkesan untuk perancangan projek selama bertahun-tahun.

Walau bagaimanapun, melaksanakan carta Gantt tersuai yang kaya dengan ciri dalam React boleh menjadi mencabar dan memakan masa. Itulah sebabnya pasukan SVAR mengeluarkan SVAR React Gantt, komponen UI interaktif sumber terbuka yang membawa visualisasi projek yang berkuasa kepada apl web anda.

Mengapa Perpustakaan Carta Gantt Lain?

SVAR Gantt dibina dengan mengambil kira pembangun React. Ia mudah digunakan, sangat disesuaikan dan direka bentuk untuk menjimatkan masa pembangunan anda berjam-jam. Bukan sahaja ia menyediakan ciri rajah Gantt yang paling penting, ia juga mengendalikan sejumlah besar data dengan prestasi sepantas kilat.

Sama ada anda sedang membina alat pengurusan projek, sistem penjadualan atau sebarang aplikasi yang memerlukan visualisasi garis masa, anda boleh menyediakan carta Gantt interaktif yang menarik secara visual dan berjalan dengan usaha yang minimum.

Jadi, apakah ciri utama SVAR React Gantt?

? Pengurusan Tugas Teras

Komponen SVAR React Gantt menyediakan keupayaan pengurusan tugasan penting di luar kotak. Benarkan pengguna anda membuat, mengedit dan memadam tugasan melalui borang yang mudah. Tempoh dan tarikh mula/tamat tugasan juga boleh diedit terus pada garis masa dengan seret dan lepas.

Komponen menyokong tiga jenis tugasan untuk digunakan: tugasan, tugasan ringkasan (dikira secara automatik berdasarkan subtugasan) dan pencapaian. Setiap bar tugas memaparkan kemajuan sebagai peratusan, yang boleh diubah suai oleh pengguna. Anda juga boleh menyediakan tugasan ringkasan untuk mengira kemajuan secara automatik dengan mengambil kira semua tugasan kecil.

?? Kebergantungan Pintar

Dengan SVAR Gantt, anda boleh mengendalikan perhubungan tugas dengan mudah. Komponen ini menyokong pelbagai jenis pergantungan: Akhir-ke-mula, Mula-ke-mula, Akhir-ke-akhir dan Mula-ke-akhir. Semua kebergantungan boleh diuruskan melalui borang penyuntingan tugas atau terus pada garis masa.

? Ciri UI Interaktif

SVAR Gantt menawarkan antara muka moden dan interaktif untuk memberi pengguna kawalan penuh ke atas tugasan. Ia menyokong:

• Suntingan tugas seret dan lepas
• Borang edit tugas mesra pengguna
• Penjejakan kemajuan visual
• Penyusunan semula tugas dalam grid
• Keupayaan untuk menambah menu konteks dan bar alat
• Zum dengan menatal

? Penyesuaian Kaya

Walaupun pengguna boleh mengawal kandungan dan reka letak carta Gantt melalui UI, anda sebagai pembangun mempunyai kawalan penuh terhadap rupa dan rasa komponen, termasuk:

• Gaya bar tugas boleh disesuaikan (bentuk, warna, fon)
• Dimensi dan sempadan garis masa boleh dikonfigurasikan
• Sorotan hujung minggu/cuti
• Petua alat tersuai untuk bar tugas
• Pilihan tema terang atau gelap

? Prestasi Yang Meningkat

Dengan SVAR Gantt anda boleh selamat dari segi prestasi dan responsif walaupun dengan sejumlah besar tugas dan projek. Bagi pengendalian kemas kini, kami menawarkan pembantu khas untuk memudahkan interaksi pelanggan-pelayan.

Inilah perkara yang anda dapat untuk prestasi terbaik dan pengendalian data yang berkesan:

• Pengendalian set data besar yang cekap
• Pemuatan subtugas dinamik
• Pemaparan dioptimumkan
• RestDataProvider untuk penyepaduan bahagian belakang yang lancar
• sokongan kemas kini kelompok

Bermula

Untuk menambah SVAR Gantt pada projek anda, pasangkannya melalui npm:

npm pasang wx-react-gantt

Kemudian, masukkan komponen dalam fail React anda:

<script>
    import { Gantt } from "wx-react-gantt";

    const tasks = [
        {
            id: 1,
            start: new Date(2024, 3, 2),
            end: new Date(2024, 3, 17),
            text: "Project planning",
            progress: 30,
            parent: 0,
            type: "summary",
            open: true,
            details: "Outline the project's scope and resources.",
        },
    ];
    const links = [];
    const scales = [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d", css: dayStyle },
    ];
</script>

<Gantt {tasks} {links} {scales} />

Untuk mengetahui lebih lanjut, lihat panduan permulaan yang terperinci.

Apa Seterusnya?

Cuba SVAR Gantt dalam projek anda yang seterusnya! Kami ingin mendengar maklum balas anda dan melihat perkara yang anda bina dengannya. Berikut ialah senarai sumber berguna yang akan membantu anda bermula dan mula membina carta Gantt tersuai anda sendiri:

• ? Halaman Utama SVAR Gantt
• ? Dokumentasi
• ? Demo Langsung
• ? Forum Perbincangan

Atas ialah kandungan terperinci SVAR Gantt: Sumber Terbuka Baharu, Carta Gantt Interaktif untuk React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!