Visualisasi Data dengan Grafik CSS, Bagan, dan Lainnya

Presentasi data yang baik adalah aspek penting dalam industri web karena merupakan kunci untuk membuat pengunjung memahami konten Anda dalam hitungan detik. Semakin mudah atau lebih cepat pengunjung Anda memahami konten web Anda, semakin tinggi mencerminkan profesionalisme Anda dalam menangani presentasi. Kriteria untuk penyajian data yang layak harus sederhana namun deskriptif, diuraikan dengan baik tetapi berhasil mempertahankan minat pengguna, tidak perlu repot mencerna kontennya, mudah untuk membandingkan dan terakhir, pengguna harus dapat membuat keputusan atau menyimpulkan data yang disajikan dengan mudah. Sekeras kedengarannya kriteria gila ini, itu mungkin.

Dalam posting hari ini, kami ingin mengambil Anda untuk naik untuk berbagai pendekatan untuk cantik dan alat visualisasi data kreatif yang sepenuhnya didasarkan pada CSS / HTML. iya nih cukup salin dan tempel lalu sesuaikan sesuai keinginan Anda. Bagan ini dapat berupa grafik batang CSS yang menampilkan data dalam bentuk horizontal / vertikal, daftar Drop-down ke data susunan Anda atau bahkan grafik Garis dan diagram Pie!

Kau ingin lebih? Terus bergulir!

Barchart Horisontal

Cara sederhana menampilkan angka statistik sebagai gambaran umum dengan bagan batang yang dapat diakses ini menggunakan CSS. Bilah menghitung nilai sel dan label yang digunakan. Header tabel digunakan menggunakan kelas teks aural

CSSplay

Bar chart adalah daftar definitif dengan gaya dan kelas yang ditentukan di setiap baris. Bagan pertama memiliki kesalahan yang terjadi ketika nilai mendekati 100% yang diperbaiki pada bagan kedua. Kode sumber termasuk untuk referensi Anda.

Persentase Bargraph

Menggunakan kemampuan lebar persentase CSS, grafik batang berbasis persentase dibuat dalam tutorial ini. Dalam grafik batang horizontal, Anda dapat mengatur penanda untuk melakukan perjalanan panjang dari kiri ke kanan atau menghasilkan grafik vertikal dengan menggunakan teknik yang sama dan mereproduksi beberapa kali

Maxdesign

Russ Weakley mengajarkan Anda untuk membuat grafik berdasarkan persentase dan menggunakan gambar latar belakang. Kode dan gambar yang ditautkan dapat disalin dan diunduh untuk digunakan dalam proyek Anda.

Barchart vertikal

Buat grafik batang vertikal menggunakan CSS dan PHP dengan membuat daftar sederhana dengan tinggi piksel masing-masing batang, sumbu y dari kelompok batang dan kelas untuk mengatur kumpulan data. Eric Meyer mengajarkan Anda untuk mengubah yang sama menjadi grafik batang, grafik garis, grafik runcing dan grafik 3D menggunakan teknik yang sama

Linegraph CSS murni

Grafik garis memberikan informasi lebih cepat daripada tabel dengan angka. Belajar membuat grafik garis dengan CSS menggunakan HTML, ganti teks dengan gambar dan gunakan sprite CSS dan penentuan posisi absolut untuk mendapatkan grafik garis.

Linegraph sederhana

Grafik garis yang sangat sederhana yang hanya menggunakan DHTML dan CSS dan tempat Anda dapat mengatur latar belakang transparan untuk grafik. Grafik ini memuat lebih cepat dan menyatu dengan sisa halaman.

Mgraph

Grafik Ajax ini digunakan untuk mewakili data satu tahun sesuai dengan setiap bulan hanya menggunakan CSS dan XHTML dan berjalan di Firefox dan Opera

Daftar multikolom

Paul Novitski mengajarkan Anda untuk membuat daftar multi kolom menggunakan CSS di artikel ini. Dia membahas banyak teknik untuk mencapai daftar multi kolom seperti mengambang daftar split, penomorannya dengan atribut HTML, konten yang dihasilkan CSS, membungkus daftar dengan XHTML, CSS dll dan akhirnya menambahkan sedikit styling dan gambar latar belakang untuk mencapai multi kolom daftar dengan sempurna.

Bulletgraph

Grafik peluru membandingkan ukuran tunggal dengan satu atau lebih ukuran lain dan menampilkan rentang kinerja kualitatif. Mereka cukup fleksibel untuk situs berbasis data. Pelajari cara membuat grafik peluru menggunakan CSS / HTML.

Bargraph kolom

Grafik batang kolom dibuat menggunakan CSS di mana nilai ditampilkan dalam batang vertikal berwarna yang mencapai berbagai ketinggian sesuai dengan nilai yang ditentukan. Grafik ini dengan cepat memberi kita ide yang jelas karena nilainya langsung dicetak di sini. Menggunakan pemilih CSS, sprite, gaya daftar dll, belajar membuat grafik kolom dari tutorial.

Grafik waktu henti

Grafik downtime awalnya memiliki masalah menampilkan interval waktu yang lama pada area layar terbatas dan menjaga tata letak acara yang transparan yang diklarifikasi oleh paradigma kalender bulanan. OnMouseOver () tetap berjalan dan warna yang berbeda digunakan untuk berbagai jenis acara downtime.

Grafik CSS langsung dinamis

Grafik CSS dinamis langsung untuk menampilkan waktu respons ping yang dijalankan oleh server web membaca data dari server web dengan kode CSS dan JavaScript, fungsi AJAX dan geser grafik.

Bargraph horisontal

Grafik batang tidak harus selalu terbalik. Grafik batang horizontal juga dapat dibuat. Dalam artikel ini grafik batang horizontal dengan variasi warna berbeda dibuat menggunakan kelas 'grafik horizontal' dan menentukan ketinggian grafik dari markup menggunakan CSS.

Multigraf

Grafik garis yang tidak menggunakan tabel gambar apa pun dibuat dengan CSS dan DHTML yang memuat lebih cepat dan latar belakang dapat diubah sebagai transparan.

Grafik rencana produksi

Grafik rencana produksi dibuat menggunakan kelas grafik sebagai wadah grafik dan hLine juga vLine untuk menggambar garis pemisah. Grafik ini digunakan dalam aplikasi intranet. Lebar grafik dihitung berdasarkan jumlah hari yang ditampilkan dan tinggi menggunakan jumlah perubahan pekerjaan.

Grafik roti lapis

Grafik sandwich dibuat ketika satu batang dalam grafik batang dibagi banyak lapisan di mana tinggi kolom tunggal dapat menunjukkan tren global sedangkan ketinggian lapisan tunggal menunjukkan bagian dari lapisan ini. Buat grafik sandwich CSS dari tutorial ini.

Bargraph bertumpuk

Untuk grafik bertumpuk, daftar definisi digunakan untuk menyajikan data, kemudian margin dan padding di-reset agar tampak sama di semua browser. Sumbu ditambahkan dan bergaya untuk mendapatkan batang yang ditumpuk. Setiap detail diajarkan dengan tepat dalam tutorial ini.

Bargraph sederhana

Grafik batang dibuat menggunakan CSS dan PHP tanpa perpustakaan grafik dan tanpa banyak perhitungan digunakan untuk margin. Padding membuatnya cukup mudah untuk memahami teknik yang digunakan saja