Visualisasi Data dengan Graf CSS, Carta dan Lagi

Persembahan data yang baik merupakan aspek penting dalam industri web kerana ia adalah kunci untuk membolehkan pengunjung memahami kandungan anda dalam beberapa saat. Semakin cepat atau lebih cepat pelawat anda mendapat genggaman kandungan web anda, semakin tinggi ia mencerminkan profesionalisme anda dalam mengendalikan persembahan. Kriteria untuk pembentangan data yang baik haruslah mudah tetapi deskriptif, terperinci tetapi dikendalikan untuk mengekalkan minat pengguna, tidak perlu berpeluh untuk mencerna kandungannya, mudah untuk membandingkan dan akhirnya, pengguna harus dapat membuat keputusan atau menyimpulkan data yang disajikan dengan mudah. Sungguhpun kriteria gila ini mungkin berbunyi, mungkin.

Dalam jawatan hari ini, kami ingin mengambil anda untuk pelbagai pendekatan untuk cantik dan alat visualisasi data kreatif yang sepenuhnya berasaskan CSS / HTML. Ya hanya salin dan tampal kemudian menyesuaikannya mengikut keutamaan anda. Carta-carta ini boleh menjadi graf bar CSS yang memaparkan data dalam bentuk mendatar / menegak, senarai Drop-down untuk mengatur data anda atau bahkan Grafik garis dan carta Pai!

Awak mahu lagi? Teruskan menatal!

Barchart mendatar

Cara mudah memaparkan angka statistik sebagai gambaran keseluruhan dengan carta bar yang boleh diakses menggunakan CSS. Bar menghitung sel nilai dan label yang digunakan. Tajuk jadual digunakan menggunakan kelas teks aural

CSSplay

Carta bar adalah senarai definitif dengan gaya dan kelas yang ditakrifkan dalam setiap baris. Carta pertama mempunyai ralat yang berlaku apabila nilai semakin mendekati 100% yang diperbaiki dalam carta kedua. Kod sumber dimasukkan untuk rujukan anda.

Peratusan Bargraph

Menggunakan kebolehan lebar peratusan CSS, graf bar peratusan berdasarkan dibuat dalam tutorial ini. Dalam graf bar mendatar, anda boleh menetapkan penanda untuk mengembara panjang dari kiri ke kanan atau menghasilkan graf menegak dengan menggunakan teknik yang sama dan menghasilkan beberapa kali

Maxdesign

Russ Weakley mengajar anda untuk membuat graf berdasarkan peratusan dan menggunakan imej latar belakang. Kod dan imej yang dipautkan boleh disalin dan dimuat turun untuk digunakan dalam projek anda.

Barchart menegak

Buat graf bar menegak menggunakan CSS dan PHP dengan membuat senarai ringkas dengan ketinggian dalam piksel bar individu, paksi y kumpulan bar dan kelas untuk menyusun set data. Eric Meyer mengajar anda untuk menjadikannya sama dengan graf bar, graf garis, graf menunjuk dan graf 3D menggunakan teknik yang sama

Pure CSS Linegraph

Grafik garis memberikan maklumat lebih cepat daripada jadual dengan nombor. Belajar untuk membuat graf garis dengan CSS menggunakan HTML, gantikan teks dengan imej dan gunakan sprite CSS dan kedudukan mutlak untuk mendapatkan graf garis.

Linegraph Mudah

Grafik garis yang mudah hanya menggunakan DHTML dan CSS dan di mana anda boleh menetapkan latar belakang telus bagi graf. Grafik ini memuat lebih cepat dan menggabungkan dengan seluruh halaman.

Mgraph

Grafik Ajax ini digunakan untuk mewakili data setahun mengikut setiap bulan menggunakan hanya CSS dan XHTML dan berjalan di Firefox dan Opera

Senarai multicolumn

Paul Novitski mengajar anda untuk membuat senarai pelbagai lajur menggunakan CSS dalam artikel ini. Beliau membincangkan banyak teknik untuk mencapai senarai pelbagai lajur seperti terapung senarai perpecahan, menomborkannya dengan atribut HTML, kandungan yang dihasilkan CSS, membungkus senarai dengan XHTML, CSS dan lain-lain dan akhirnya menambahkan gaya dan imej latar belakang untuk mencapai lajur berbilang senarai dengan sempurna.

Bulletgraph

Grafik peluru membandingkan satu langkah dengan satu atau lebih langkah lain dan memaparkan pelbagai persembahan kualitatif. Mereka agak fleksibel untuk tapak data yang didorong. Belajar untuk membuat grafik bullet menggunakan CSS / HTML.

Bargraf tiang

Grafik bar lajur dicipta menggunakan CSS di mana nilai ditunjukkan dalam bar menegak berwarna yang mencapai pelbagai ketinggian mengikut nilai yang ditentukan. Grafik ini dengan cepat memberi kita gambaran yang jelas kerana nilai-nilai itu dicetak secara langsung di sini. Menggunakan pemilih CSS, sprite, styling senarai dan sebagainya, belajar membuat grafik lajur dari tutorial.

Grafik downtime

Grafik Downtime pada mulanya mempunyai masalah memaparkan selang masa panjang di kawasan skrin terhad dan menyimpan susun atur acara yang jelas yang dijelaskan oleh paradigma kalendar bulanan. OnMouseOver () terus berjalan dan warna yang berbeza digunakan untuk pelbagai jenis acara downtime.

Grafik CSS langsung dinamik

Grafik CSS dinamik langsung untuk memaparkan masa tindak balas ping dijalankan oleh pelayan web membaca data dari pelayan web dengan kod CSS dan JavaScript, fungsi AJAX dan gelongsor grafik.

Gandar mendatar

Grafik bar tidak perlu bevertical sentiasa. Grafik bar mendatar juga boleh dibuat. Dalam artikel ini graf bar mendatar dengan variasi warna yang berbeza dibuat dengan menggunakan 'graf mendatar' kelas dan menyatakan ketinggian graf dari markup menggunakan CSS.

Multigraph

Garis garisan yang tidak menggunakan mana-mana jadual imej dicipta dengan CSS dan DHTML yang memuat lebih cepat dan latar belakang boleh diubah sebagai telus.

Graf pelan pengeluaran

Grafik pelan pengeluaran dibuat menggunakan kelas graf sebagai bekas graf dan hLine juga vLine untuk garisan pemisah garis. Grafik ini digunakan dalam aplikasi intranet. Lebar graf dikira mengikut bilangan hari dan ketinggian yang dipaparkan dengan menggunakan bilangan perubahan pekerjaan.

Gula pasir

Graf sandwic dicipta apabila bar tunggal dalam graf bar memecah banyak lapisan di mana ketinggian satu lajur mungkin menunjukkan trend global manakala ketinggian lapisan tunggal menunjukkan sebahagian lapisan ini. Buat graf sandwic CSS dari tutorial ini.

Pengawal yang disusun

Untuk graf yang disusun, senarai takrif digunakan untuk membentangkan data, maka margin dan padding diset semula untuk muncul sama dalam semua penyemak imbas. Gegaran ditambah dan diasaskan untuk mendapatkan bar yang disusun. Setiap butiran terperinci diajarkan dalam tutorial ini.

Pengawal sederhana

Grafik bar dicipta menggunakan CSS dan PHP sans grafik perpustakaan dan tanpa banyak pengiraan yang digunakan untuk margin. Padding menjadikannya agak mudah untuk memahami teknik yang digunakan sahaja