Highcharts - Pengaturan Lingkungan

Pada bab ini, kita akan membahas bagaimana mengatur perpustakaan Highcharts untuk digunakan dalam pengembangan aplikasi web.

Highcharts membutuhkan jQuery sebagai dependensi. Pertama, kita akan menginstal pustaka jQuery dan kemudian pustaka Highcharts.

Instal jQuery

Ada dua cara untuk menggunakan jQuery.

  • Download- Unduh secara lokal dari jQuery.com dan gunakan.

  • CDN access- Anda juga memiliki akses ke CDN. CDN akan memberi Anda akses di seluruh dunia ke pusat data regional; dalam hal ini, host Google. Ini berarti menggunakan CDN memindahkan tanggung jawab hosting file dari server Anda sendiri ke serangkaian server eksternal. Ini juga menawarkan keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan jQuery dari CDN yang sama, salinan tersebut tidak perlu diunduh ulang.

Menggunakan Downloaded jQuery

Sertakan file JavaScript jQuery di halaman HTML menggunakan script berikut -

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Menggunakan CDN

Kami menggunakan versi CDN dari pustaka jQuery sepanjang tutorial ini.

Sertakan file JavaScript jQuery di halaman HTML menggunakan script berikut -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Pasang Highcharts

Berikut adalah dua cara menggunakan Highchart.

  • Download- Unduh secara lokal dari highcharts.com dan gunakan.

  • CDN access- Anda juga memiliki akses ke CDN. CDN akan memberi Anda akses di seluruh dunia ke pusat data regional; dalam hal ini, host Highcharts - Code.Highcharts.Com.

Menggunakan Highcharts yang Diunduh

Sertakan file JavaScript Highcharts di halaman HTML menggunakan script berikut -

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Menggunakan CDN

Kami menggunakan versi CDN pustaka Highcharts sepanjang tutorial ini.

Sertakan file JavaScript Highcharts di halaman HTML menggunakan script berikut -

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>