Home / Code / File-File Project Tutorial / platform / Project / Tutorial

Visualisasi data dengan DataTables.js dan Highcharts.js

By Blok CC Post a Comment
Dalam tutorial ini, Anda akan belajar bagaimana untuk memvisualisasikan data dengan mengambil keuntungan dari DataTables.js dan Highcharts.js libraries JavaScript.
Berikut adalah apa yang akan kita untuk membangun (Lihat versi yang lebih besar untuk pengalaman yang lebih baik):

Libraries yang Dibutuhkan

Untuk keperluan contoh ini, kita harus memuat libraries berikut dalam pena kami:
  • jQuery
  • DataTables.js
  • Highcharts.js
Dengan itu dalam pikiran, jika Anda melihat di bawah tab Settings, Anda akan melihat bahwa saya telah menyertakan satu file CSS eksternal:
Dengan cara yang sama, saya juga menyertakan empat JavaScript file eksternal:
Catatan: kami harus menambahkan jQuery untuk proyek kami karena DataTables.js adalah sebuah plugin jQuery. Namun, perlu diingat bahwa Highcharts.js adalah sebuah library JavaScript yang murni, dan dengan demikian tidak memerlukan jQuery.

HTML

Untuk memulai hal-hal kita mendefinisikan sebuah elemen dengan kelas container yang berisi dua sub-elemen:
  • Sebuah tabel dengan baris 26. Baris pertama merujuk pada header tabel th, sementara 25 baris lain membawa rincian negara. Sumber data kami untuk contoh ini adalah worldometers.info.
  • Div kosong yang akan mengadakan grafik.
Berikut adalah struktur HTML:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
  <table id="dt-table">
    <thead>
      <tr>
        <th>Country</th>
        <th>Population (2017)</th>
        <th>Density (P/Km²)</th>
        <th>Med. Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>China</td>
        <td>1,409,517,397</td>
        <td>150</td>
        <td>37</td>
      </tr>
     
      <!-- 24 more rows here -->
    
    </tbody
  </table>   
   
  <div id="chart"></div>
</div>
It's worth menyebutkan bahwa, demi kesederhanaan, kita telah menentukan data tabel hard-coded tersebut. Dalam sebuah proyek yang nyata walaupun, tabel mungkin dibuat secara dinamis.
Dengan markup siap, dan warna latar belakang yang ditambahkan untuk kejelasan, proyek terlihat seperti ini:
Advertisement

CSS

Pada titik ini, kita mendefinisikan beberapa gaya dasar, seperti:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 10px;
}
 
#dt-table_wrapper {
  width: 35%;
  margin-right: 2%;
}
 
#chart {
  width: 63%;
}
 
table {
  text-align: left;
}
 
@media screen and (max-width: 1200px) {
  #dt-table_wrapper,
  #chart {
    width: 100%;
  }
 
  #dt-table_wrapper {
    margin-right: 0;
  }
}
Penting untuk memahami bahwa:
  • #dt-table_wrapper tidak ada di markup kami. Itu ditambahkan oleh DataTables segera setelah kami menginisialisasi kan.
  • Sementara kita mendefinisikan beberapa aturan dasar untuk layar kecil, dicatat bahwa demo tidak akan sepenuhnya responsif. Ada banyak hal yang bisa kita lakukan untuk membuat tabel dan grafik terlihat lebih baik pada layar kecil. Misalnya, untuk DataTables terdapat sebuah ekstensi yang Responsif, tapi yang berada di luar cakupan tutorial ini.
Dengan CSS, mari kita lihat bagaimana proyek terlihat. Kita tidak akan melihat perbedaan besar namun karena kita belum diinisialisasi libraries:

JavaScript

Sekarang untuk jendela JavaScript dalam pena kami. Ketika DOM sudah siap, fungsi init dijalankan; fungsi ini memicu sub-fungsi lain:
1
2
3
4
5
6
function init() {
  const table = $("#dt-table").DataTable();
  const tableData = getTableData(table);
  createHighcharts(tableData);
  setTableEvents(table);
}
Seperti yang Anda lihat, masing-masing fungsi sub menyelesaikan tugas tertentu.

Inisialisasi DataTables

Langkah pertama adalah untuk mengubah table kami ke dalam tabel "DataTables". Kita dapat melakukan ini dengan hanya satu baris kode: $("#dt-tabel"). DataTable();
Jika kita sekarang melihat tabel, kita akan melihat bahwa ini telah mengadopsi kemampuan tabel DataTables, yaitu: kita semacam itu, Cari, dan sebagainya. Bermain dengan itu di demo berikut:
Sekarang, seperti yang Anda lihat, DataTables berlaku default penyortiran ke tabel. Jika diperlukan, kita dapat menyesuaikan perilaku ini.

Penggalian Data Tabel

Langkah berikutnya adalah untuk mengambil data tabel dan membangun chart. Kami tidak ingin semua tabel data. Pada kenyataannya, jika Anda melihat kembali selesai versi demo kami, Anda akan melihat bahwa tabel hanya berisi data dari pertama tiga kolom (Country, Population, Density).
Dengan itu, untuk mengambil data yang dibutuhkan, kita akan mengambil keuntungan dari DataTables API. Fungsi bertanggung jawab untuk perilaku ini adalah sebagai berikut:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
function getTableData(table) {
  const dataArray = [],
    countryArray = [],
    populationArray = [],
    densityArray = [];
 
  // loop table rows
  table.rows({ search: "applied" }).every(function() {
    const data = this.data();
    countryArray.push(data[0]);
    populationArray.push(parseInt(data[1].replace(/\,/g, "")));
    densityArray.push(parseInt(data[2].replace(/\,/g, "")));
  });
 
  // store all data in dataArray
  dataArray.push(countryArray, populationArray, densityArray);
 
  return dataArray;
}
Dalam fungsi ini, kita iterate melalui baris tabel dan untuk setiap baris, kita ambil data kolom sasaran dan menyimpannya dalam array terkait. Akhirnya, Semua array yang disimpan dalam array yang lain.
Berikut ini adalah sebuah visualisasi cepat array master (yaitu dataArray):
The array which holds the desired table data
Sebelum pindah, penting untuk memahami satu hal. Secara default, fungsi getTableData harus mengumpulkan data dari semua baris tabel. Tapi kemudian, jika kita mencari tabel untuk sesuatu yang spesifik, hanya baris yang sesuai harus dikumpulkan dan diproses. Untuk mencapai hal ini, kita melewati sebuah argumen ke fungsi baris. Secara khusus, objek dengan search: "applied" nilai properti.
Lagi dicatat bahwa jika kita tidak lulus objek ini, selalu bagi kita akan mengumpulkan data dari semua baris tabel (menguji). Untuk informasi lebih lanjut tentang sifat-sifat yang kami dapat melewati ke objek ini, pastikan untuk melihat page ini.

Buat Grafik

Sekarang bahwa kita memiliki data yang diinginkan, kami siap untuk membangun grafik. Ini akan berisi dua grafik yang nested, satu Kolom chart dan satu Spline chart.
Berikut adalah fungsi yang sesuai:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
function createHighcharts(data) {
  Highcharts.setOptions({
    lang: {
      thousandsSep: ","
    }
  });
 
  Highcharts.chart("chart", {
    title: {
      text: "DataTables to Highcharts"
    },
    subtitle: {
      text: "Data from worldometers.info"
    },
    xAxis: [
      {
        categories: data[0],
        labels: {
          rotation: -45
        }
      }
    ],
    yAxis: [
      {
        // first yaxis
        title: {
          text: "Population (2017)"
        }
      },
      {
        // secondary yaxis
        title: {
          text: "Density (P/Km²)"
        },
        min: 0,
        opposite: true
      }
    ],
    series: [
      {
        name: "Population (2017)",
        color: "#0071A7",
        type: "column",
        data: data[1],
        tooltip: {
          valueSuffix: " M"
        }
      },
      {
        name: "Density (P/Km²)",
        color: "#FF404E",
        type: "spline",
        data: data[2],
        yAxis: 1
      }
    ],
    tooltip: {
      shared: true
    },
    legend: {
      backgroundColor: "#ececec",
      shadow: true
    },
    credits: {
      enabled: false
    },
    noData: {
      style: {
        fontSize: "16px"
      }
    }
  });
}
Jangan kewalahan oleh kode di atas! Tanpa diragukan lagi cara terbaik untuk memahami cara kerjanya adalah untuk mencobanya. Plus, Anda pasti harus membaca dokumentasi. Bagaimanapun, mari kita secara singkat kunci konsep-konsep:
  • Sumbu-x berisi semua negara.
  • Kita mendefinisikan dua y-axes. Yang pertama memegang semua nilai populasi, sedangkan yang kedua mencakup semua kepadatan tersedia.
  • Jika tabel kami tidak berisi data pesan muncul. Diketahui bahwa kami tidak dapat menyesuaikan teks pesan melalui objek lang.
Dengan grafik, mari kita sekali lagi melihat kemajuan kami:

Sinkronisasi tabel dan grafik

Di bagian sebelumnya, kami membangun grafik berdasarkan data tabel, tetapi masih ada tidak ada sinkronisasi penuh antara tabel dan grafik. Untuk membuktikan hal itu, kembali kepada demo dan mengubah Pemesanan (penyortiran) Tabel, atau mencari sesuatu. Anda akan melihat bahwa tabel tidak bereaksi terhadap perubahan tabel.
Untuk memperbaiki ini, kami akan mengambil keuntungan dari acara menarik DataTables. Acara ini kebakaran setiap kali tabel mendapat diperbarui. Jadi segera setelah kami mengubah tabel kita harus mengingat data tabel dan merekonstruksi grafik.
Di sini adalah hal yang sulit sekalipun. Peristiwa menarik juga kebakaran selama pagination tabel; tidak ada alasan untuk membangun kembali tabel selama proses ini. Idealnya, kita harus mencegah perilaku ini. Untungnya, ada acara page yang membantu kita menyelesaikan tugas ini.
Berikut adalah kode sumber yang mengimplementasikan fungsi yang diinginkan:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
let draw = false;
 
function setTableEvents(table) {
  // listen for page clicks
  table.on("page", () => {
    draw = true;
  });
 
  // listen for updates and adjust the chart accordingly
  table.on("draw", () => {
    if (draw) {
      draw = false;
    } else {
      const tableData = getTableData(table);
      createHighcharts(tableData);
    }
  });
}
Sekarang bahwa tabel dan grafik disinkronisasi, jika kita membuat pencarian "bad", kita akan melihat pesan berikut:
Versi final dari proyek kami:

Dukungan browser

Kedua plugin memiliki browser besar mendukung (DataTables support, Highcharts support), sehingga Anda dapat mengharapkan bahwa demo ini akan bekerja dengan baik di Semua browsers.
Lagi diingat bahwa demo ini tidak dioptimalkan untuk layar kecil.
Terakhir, seperti biasa, kami menggunakan Babel untuk mengkompilasi kode ES6 untuk ES5.

Kesimpulan

Itu dia! Kami berhasil untuk memvisualisasikan data kami dengan menggabungkan dua library JavaScript populer dan hebat.
Sekarang bahwa Anda terbiasa dengan proses, dan menguraikan fungsi demo akhir. Sebagai contoh, mencoba menambahkan custom filters ke tabel.
Seperti biasa, jika Anda memiliki pertanyaan atau jika ada apa pun Anda ingin melihat sebagai langkah berikutnya untuk tutorial ini, beritahu saya di komentar di bawah ini.

No comments for "Visualisasi data dengan DataTables.js dan Highcharts.js"

Post a Comment