sepuluh petua dan tutorial untuk membuat carta dan grafik menggunakan CSS

Mata utama:

• CSS adalah alat yang berkuasa untuk mewujudkan carta dan grafik yang menarik secara visual, yang mengurangkan keperluan jalur lebar dan mudah dimuat turun.
• Artikel ini menyediakan 10 tutorial dan petua untuk membuat carta dan grafik menggunakan CSS, termasuk carta pai animasi yang sejuk, carta bar 3D, dan visualisasi data yang mudah diakses.
• Mewujudkan carta CSS memerlukan pemahaman tentang HTML dan CSS, menggunakan elemen "Div" sebagai bekas carta, menggunakan CSS untuk gaya, dan menggunakan atribut "data-" untuk menyimpan data carta. Pelbagai teknik CSS boleh digunakan untuk membuat carta responsif, animasi, dan ditandakan.

Lembaran Gaya Terkejut (CSS) adalah bahasa yang digunakan untuk menggambarkan format dokumen yang ditulis dalam bahasa markup (seperti HTML, XHTML, dll.). Ciri penting carta atau graf CSS ialah mereka membolehkan pengguna dengan mudah memuat turun dengan mengurangkan keperluan jalur lebar halaman HTML. Terdapat banyak teknik yang terlibat yang akan mewujudkan gaya dalam grafik dan carta CSS3. Dalam mana -mana industri rangkaian, pembentangan data yang baik dan cemerlang memainkan peranan penting dalam membuat pelanggan memahami apa yang anda analisis. Dalam siaran ini, kami telah mengumpulkan 10 grafik CSS dan tutorial carta yang berguna dan petua yang anda akan dapati sangat berguna! Nikmati. Artikel Berkaitan: - Top 10 jQuery Graphics and Carta

1. Buat carta pai animasi yang sejuk dengan html5 dan jQuery

Ketahui cara membuat carta pai animasi yang cantik dan interaktif menggunakan elemen kanvas HTML5, CSS3 dan jQuery. Mengandungi kod lengkap untuk kegunaan anda sendiri.

Demo kod sumber

2. carta bar css3 3d animasi sejuk

Apabila melayang, animasi menunjukkan bahawa bar akan tumbuh ke saiz yang sesuai.

Demo kod sumber

3. carta bar css3

Carta bar dalam CSS tidak terkini atau sukar. Dengan beberapa gaya yang sangat asas, anda boleh memaksa senarai dan lain -lain yang serupa dengan carta dan graf. Walau bagaimanapun, dengan beberapa CSS3 yang kaya dan peningkatan progresif, anda benar -benar boleh mula mengambil paparan dan membuat dokumen -dokumen yang sering membosankan ini ke peringkat seterusnya.

Demo kod sumber

4. carta bar css3

Ini adalah satu set mudah carta bar CSS3 tulen dalam gaya 3D. Anda boleh dengan mudah memvisualisasikan data anda tanpa menggunakan JavaScript atau PHP atau bahkan imej. Suite ini mengandungi 9 gaya carta yang telah ditetapkan - carta bar tunggal dan carta bar dikumpulkan.

Demo kod sumber

5. animasi grafik CSS3

Ketahui cara membuat carta menggunakan animasi CSS3.

Demo kod sumber

6. carta bar yang boleh diakses

Ciri -ciri utama: & gt; & gt; & GT; Lebar bar dikira berbanding dengan nilai maksimum. & GT; & GT; melayari carta tanpa CSS atau imej akan menyebabkan jadual biasa. & gt; anda boleh menggunakan kelas teks pendengaran untuk menyembunyikan tag nilai.

Demo kod sumber

7. senarai carta bar

carta ini tidak lebih daripada senarai definisi gaya, dengan hanya kelas yang menentukan setiap baris.

Demo kod sumber

8. Buat graf

Buat grafik menggunakan imej latar belakang peratusan.

Demo kod sumber

9. carta bar menegak CSS

Perbezaan di sini adalah bahawa keseluruhan kandungan adalah satu set mudah senarai bersarang dan CSS.

Demo kod sumber

10. Gunakan piawaian web untuk visualisasi data yang boleh diakses

Teknik mudah ini hanya menambah bar senarai item selepas teks (lihat contoh yang lengkap untuk melihat matlamat kami). Ia berfungsi untuk senarai panjang apa pun. Senarai yang lebih panjang mendapat manfaat daripada penyortiran mengikut kiraan kerana nilai relatif bar lebih mudah dibaca apabila mereka diatur mengikut urutan.

Demo kod sumber

soalan yang sering ditanya mengenai grafik CSS dan tutorial carta

Apakah unsur -unsur asas yang diperlukan untuk membuat carta CSS?

Mewujudkan carta CSS melibatkan pelbagai elemen. Pertama, anda perlu memahami asas -asas HTML dan CSS. HTML digunakan untuk mengatur kandungan di laman web, manakala CSS digunakan untuk gaya kandungan ini. Anda perlu membuat elemen "div" untuk bekas carta dan kemudian gunakan CSS untuk gaya dan meletakkan carta. Anda juga perlu menggunakan atribut "data-" untuk menyimpan data carta. Harta ini membolehkan anda menyimpan maklumat tambahan secara langsung dalam elemen HTML.

bagaimana membuat carta CSS saya responsif?

Membuat carta CSS responsif melibatkan menggunakan unit relatif (seperti peratusan) dan bukannya unit mutlak (seperti piksel). Ini membolehkan carta saiznya mengikut saiz bekasnya. Anda juga boleh menggunakan pertanyaan media untuk menukar gaya carta berdasarkan saiz skrin peranti. Sebagai contoh, anda mungkin mahu mengurangkan saiz carta pada skrin yang lebih kecil untuk memastikan ia sesuai dengan viewport.

Bolehkah saya menghidupkan carta CSS saya?

Ya, anda boleh menggunakan animasi CSS atau peralihan untuk menghidupkan carta CSS anda. Animasi CSS membolehkan anda mencipta animasi yang kompleks, pelbagai langkah, sementara peralihan CSS membolehkan anda dengan lancar mengubah atribut elemen dari satu nilai ke yang lain. Sebagai contoh, anda boleh menghidupkan ketinggian bar dalam carta bar untuk mewujudkan kesan "pertumbuhan".

Bagaimana untuk menambah tag ke carta CSS saya?

Menambah tag ke carta CSS termasuk menggunakan "sebelum" atau "selepas" pseudo-unsur. "Sebelum" atau "selepas" pseudo-element membolehkan anda memasukkan kandungan pada halaman tanpa mengubah HTML. Anda boleh menggunakan harta "Kandungan" untuk menentukan teks tag, dan kemudian gunakan sifat CSS lain untuk mencari dan gaya tag.

Jawapan kepada soalan -soalan lain adalah serupa dengan output sebelumnya, jadi saya tidak akan mengulanginya di sini untuk mengelakkan pertindihan. Semua pautan imej tetap sama.

Atas ialah kandungan terperinci 10 graf dan tutorial carta CSS yang berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!