Membangun tabel HTML dengan “Visualisasi Google API”

Bagaimana menampilkan data tabulasi Anda dengan tampilan yang indah dan masih mampu mengurutkan dan halaman, Semua dibangun secara dinamis dan tanpa menulis apapun “Tabel HTML”?

Presentasi

Tje Visualisasi Google API menyajikan seperangkat teknik untuk melihat data Anda dengan mudah dan cepat. Dalam posting ini kita akan melihat Tabel grafik.

Operasi

Contoh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?PHP
<html lang yang="pt-BR">
  <kepala>    
    <META charset="ISO-8859-1" />
    <jenis script=' text/JavaScript ' src=' https://www.google.com/jsapi '></script>
    <jenis script=' text/JavaScript '>
      Google.beban(visualisasi, '1', {Paket:[Tabel]});
      Google.setOnLoadCallback(drawTable, tahun baru);
      fungsi drawTable, tahun baru() {
        var tanggal = Baru Google.Visualisasi.Datatable();
        tanggal.oleh addColumn(String, Nama);
        tanggal.oleh addColumn(nomor, Gaji);
        tanggal.oleh addColumn(Boolean, ' Penuh waktu ');
        tanggal.oleh addRows([
          [John,  {V: 2000, (f): ' $2.000,00 '}, benar],
          [Maria, {V: 5000, (f): ' $5.000,00 '}, palsu],
          [Alice, {V: 1000, (f): ' $1.000,00 '}, benar],
          [Bob,   {V: 1500, (f): ' $1.500,00 '}, benar]
        ]);
        var Meja = Baru Google.Visualisasi.Tabel, tahun baru(dokumen.getElementById(' table_div '));
        Meja.Menarik(tanggal, {Yang: benar});
      }
    </script>
  </kepala>
  <tubuh>
    <div id=' table_div '></div>
  </tubuh>
</HTML>
?>

(1) Pada kode di atas, Perhatikan bahwa kita mulai membuat panggilan ke Google JavaScript api (JSAPI, baru).

(2) Kemudian, kita membawa Visualisasi, waktu baru, dalam versi 1.0, dan perpustakaan Anda ' tabel’.

(3) Kita menggunakan fungsi jsapi setOnLoadCallback menugaskan Handler drawTable, tahun baru (atau nama lain yang Anda inginkan), yang sebenarnya siapa yang seharusnya benar membuat dan menentukan tabel.

(4) Tje Datatable dikonversi ke tabel HTML di mana setiap kolom harus sama dengan jenis data yang didukung (String, Boolean, Nomor, dll).

(5) Penggunaan oleh addColumn() untuk membuat kolom, yang lewat sebagai parameter jenis dan nama yang diberikan.

(6) Menggunakan oleh addRows() untuk membuat baris tabel, IE, Masukkan data Anda sendiri. Garis dibatasi oleh tanda kurung [] dan informasi dari setiap sel dipisahkan dengan koma. Perhatikan notasi di sana “V” dan “(f)”, yang saya kira berarti nilai dan Lapangan, masing-masing, IE, nilai aktual sel dan label yang akan ditampilkan dalam. Hal ini diperlukan, Karena, karena kolom tersebut “Seluruh”, maka memesan benar bisa mendapatkan terganggu jika dianggap sebagai string.

(7) Akhirnya, kami memberitahu Anda di mana DIV gambar meja akan diberikan (table_div) dan siap!

Dalam praktek

Kode di atas menghasilkan tabel HTML berikut:

Ini tidak terlalu menarik? Setiap HTML dalam tabel diciptakan tanpa kita perlu menulis satu tabel, TR atau TD. Tentu saja, ini hanya demonstrasi. Anda dapat memperdalam pengetahuan Anda dan menemukan kemungkinan konfigurasi lain untuk bekerja dengan tabel melalui Tabel grafik.

Galeri

Masih banyak fitur menarik lainnya yang Galeri Google Charts Menawarkan. Ada berbagai grafik yang dioptimalkan untuk memenuhi kebutuhan visualisasi data. Grafis didasarkan pada teknologi HTML5/SVG murni (mengadopsi VML untuk versi lama IE), sehingga tidak ada plugin yang diperlukan. Grafik ini dapat ditambahkan ke halaman Anda hanya dalam beberapa langkah sederhana.

Font

Jumlah total hits: 5928

Tinggalkan balasan

Alamat email Anda tidak akan dipublikasikan. Kolom yang harus diisi ditandai dengan *