Highcharts - Panduan Cepat

Highchartsadalah pustaka bagan berbasis JavaScript murni yang dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan bagan interaktif. Ini mendukung berbagai grafik. Grafik digambar menggunakan SVG di browser standar seperti Chrome, Firefox, Safari, Internet Explorer (IE). Di IE 6 yang lama, VML digunakan untuk menggambar grafik.

Fitur Perpustakaan Highcharts

Mari kita sekarang membahas beberapa fitur penting dari Perpustakaan Highcharts.

  • Compatability - Bekerja tanpa hambatan di semua browser utama dan platform seluler seperti android dan iOS.

  • Multitouch Support - Mendukung multitouch pada platform berbasis layar sentuh seperti android dan iOS. Ideal untuk iPhone / iPad dan ponsel pintar / tablet berbasis android.

  • Free to Use - Sumber terbuka dan gratis untuk digunakan untuk tujuan non-komersial.

  • Lightweight - Pustaka inti highcharts.js dengan ukuran hampir 35KB, adalah pustaka yang sangat ringan.

  • Simple Configurations - Menggunakan json untuk menentukan berbagai konfigurasi grafik dan sangat mudah dipelajari dan digunakan.

  • Dynamic - Memungkinkan untuk mengubah grafik bahkan setelah pembuatan grafik.

  • Multiple axes- Tidak terbatas pada sumbu x, y. Mendukung banyak sumbu pada grafik.

  • Configurable tooltips- Tooltip muncul saat pengguna mengarahkan kursor ke titik mana pun pada diagram. Highcharts menyediakan pemformat inbuilt tooltip atau pemformat panggilan balik untuk mengontrol tooltip secara terprogram.

  • DateTime support- Tangani waktu tanggal secara khusus. Menyediakan banyak kontrol bawaan atas kategori tanggal bijaksana.

  • Export - Ekspor grafik ke format PDF / PNG / JPG / SVG dengan mengaktifkan fitur ekspor.

  • Print - Cetak grafik menggunakan halaman web.

  • Zoomablity - Mendukung grafik zoom untuk melihat data dengan lebih tepat.

  • External data- Mendukung memuat data secara dinamis dari server. Memberikan kontrol atas data menggunakan fungsi panggilan balik.

  • Text Rotation - Mendukung rotasi label ke segala arah.

Jenis Bagan yang Didukung

Perpustakaan Highcharts menyediakan jenis bagan berikut -

Sr.No. Jenis & Deskripsi Bagan
1

Line Charts

Digunakan untuk menggambar grafik berbasis garis / spline.
2

Area Charts

Digunakan untuk menggambar grafik area bijaksana.
3

Pie Charts

Digunakan untuk menggambar diagram lingkaran.
4

Scatter Charts

Digunakan untuk menggambar bagan yang tersebar.
5

Bubble Charts

Digunakan untuk menggambar grafik berbasis gelembung.
6

Dynamic Charts

Digunakan untuk menggambar grafik dinamis dimana pengguna dapat memodifikasi grafik.
7

Combinations

Digunakan untuk menggambar kombinasi berbagai grafik.
8

3D Charts

Digunakan untuk menggambar grafik 3D.
9

Angular Gauges

Digunakan untuk menggambar bagan jenis speedometer.
10

Heat Maps

Digunakan untuk menggambar peta panas.
11

Tree Maps

Digunakan untuk menggambar peta pohon.

Dalam bab-bab selanjutnya, kita akan membahas setiap jenis bagan yang disebutkan di atas secara rinci dengan contoh.

Lisensi

Highcharts adalah open source dan gratis digunakan untuk tujuan non-komersial. Untuk menggunakan Highchart dalam proyek komersial, ikuti tautan - Lisensi dan Harga

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 itu.

  • 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>

Dalam bab ini, kami akan menampilkan konfigurasi yang diperlukan untuk menggambar grafik menggunakan API Highcharts.

Langkah 1: Buat Halaman HTML

Buat halaman HTML dengan pustaka javascript jQuery dan Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Di sini container div digunakan untuk memuat grafik yang digambar menggunakan pustaka Highcharts.

Langkah 2: Buat Konfigurasi

Pustaka Highcharts menggunakan konfigurasi yang sangat sederhana menggunakan sintaks json.

$('#container').highcharts(json);

Di sini json merepresentasikan data dan konfigurasi json yang digunakan pustaka Highcharts untuk menggambar diagram di dalam div kontainer menggunakan metode highcharts (). Sekarang, kita akan mengkonfigurasi berbagai parameter untuk membuat string json yang diperlukan.

judul

Konfigurasikan judul grafik.

var title = {
   text: 'Monthly Average Temperature'   
};

subtitle

Konfigurasi subtitle diagram.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Konfigurasi ticker untuk ditampilkan di X-Axis.

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

Konfigurasikan judul, garis plot yang akan ditampilkan di Y-Axis.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

tooltip

Konfigurasikan tooltip. Letakkan sufiks yang akan ditambahkan setelah nilai (sumbu y).

var tooltip = {
   valueSuffix: '\xB0C'
}

legenda

Konfigurasikan legenda untuk ditampilkan di sisi kanan diagram bersama dengan properti lainnya.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

seri

Konfigurasikan data yang akan ditampilkan pada grafik. Seri adalah larik di mana setiap elemen larik ini mewakili satu garis pada bagan.

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Langkah 3: Buat data json

Gabungkan semua konfigurasi.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Langkah 4: Gambar grafiknya

$('#container').highcharts(json);

Contoh

Pertimbangkan contoh berikut untuk lebih memahami Sintaks Konfigurasi -

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Hasil

Verifikasi hasilnya.

Grafik garis digunakan untuk menggambar grafik berbasis garis / spline. Pada bagian ini, kita akan membahas berbagai jenis grafik berbasis garis dan spline.

Sr.No. Jenis & Deskripsi Bagan
1 Garis dasar

Bagan garis dasar.
2 Dengan label data

Bagan dengan label data.
3 Ajax memuat data, poin yang dapat diklik

Bagan diambil setelah mengambil data dari server.
4 Deret waktu, dapat diperbesar

Bagan dengan deret waktu.
5 Spline dengan sumbu terbalik

Diagram spline memiliki sumbu terbalik.
6 Spline dengan simbol

Diagram spline menggunakan simbol panas / hujan.
7 Spline dengan pita plot

Bagan spline dengan pita plot.
8 Data waktu dengan interval tidak teratur

Bagan sekumpulan besar data berbasis waktu.
9 Sumbu logaritmik

Bagan yang menggambarkan sumbu logaritmik.

Diagram area digunakan untuk menggambar diagram berbasis area. Pada bagian ini, kita akan membahas berbagai jenis grafik berbasis area.

Sr.No. Jenis & Deskripsi Bagan
1 Area Dasar

Bagan area dasar.
2 Area dengan nilai negatif

Bagan area yang memiliki nilai negatif.
3 Area bertumpuk

Bagan memiliki area yang bertumpuk satu sama lain.
4 Persentase luas

Bagan dengan data dalam persentase.
5 Area dengan poin yang hilang

Bagan dengan poin yang hilang dalam data.
6 Sumbu terbalik

Area menggunakan sumbu terbalik.
7 Area-spline

Bagan area menggunakan spline.
8 Rentang area

Bagan area menggunakan rentang.
9 Rentang dan garis area

Bagan area menggunakan rentang dan garis.

Bagan batang digunakan untuk menggambar bagan berbasis area. Pada bagian ini, kita akan membahas berbagai jenis grafik berbasis batang.

Sr.No. Jenis & Deskripsi Bagan
1 Bilah Dasar

Bagan batang dasar.
2 Batang Bertumpuk

Bagan batang memiliki batang yang ditumpuk satu sama lain.
3 Area bertumpuk negatif

Bagan batang dengan tumpukan negatif.

Bagan kolom digunakan untuk menggambar bagan berbasis kolom. Pada bagian ini, kita akan membahas berbagai jenis grafik berbasis kolom.

Sr.No. Jenis & Deskripsi Bagan
1 Kolom Dasar

Bagan kolom dasar.
2 Kolom dengan nilai negatif

Bagan kolom memiliki nilai negatif.
3 Kolom bertumpuk

Bagan memiliki kolom yang bertumpuk satu sama lain.
4 Kolom Bertumpuk dan Dikelompokkan

Bagan dengan kolom dalam bentuk bertumpuk dan dikelompokkan.
5 Kolom dengan persentase bertumpuk

Bagan dengan persentase bertumpuk.
6 Kolom dengan label yang diputar

Bagan Kolom dengan label yang diputar di kolom.
7 Kolom dengan penelusuran

Bagan Kolom dengan kemampuan lihat perincian.
8 Kolom dengan penempatan tetap

Bagan Kolom dengan penempatan tetap.
9 Data ditentukan dalam tabel HTML

Bagan Kolom menggunakan Data yang ditentukan dalam tabel HTML.
10 Rentang Kolom

Bagan Kolom menggunakan rentang.

Bagan pai digunakan untuk menggambar bagan berbasis pai. Pada bagian ini, kita akan membahas berbagai jenis diagram berbasis pai.

Sr.No. Jenis & Deskripsi Bagan
1 Pai Dasar

Diagram lingkaran dasar.
2 Pie dengan Legends

Bagan pai dengan Legends.
3 Bagan Donat

Bagan Donat.
4 Donat setengah lingkaran

Bagan donat setengah lingkaran.
5 Pai dengan lihat perincian

Bagan pai dengan kemampuan lihat perincian.
6 Bagan pai dengan gradien

Bagan pai dengan isian gradien.
7 Bagan pai dengan monokrom

Bagan pai dengan isian monokrom.

Bagan sebar digunakan untuk menggambar bagan berbasis sebar. Pada bagian ini, kita akan membahas berbagai jenis bagan berbasis pencar.

Sr.No. Jenis & Deskripsi Bagan
1 Bagan Sebar

Bagan Sebar.

Bagan gelembung digunakan untuk menggambar bagan berbasis gelembung. Pada bagian ini, kita akan membahas berbagai jenis grafik berbasis gelembung.

Sr.No. Jenis & Deskripsi Bagan
1 Bagan Gelembung

Bagan Gelembung.
2 Bagan Gelembung 3D

Bagan Gelembung 3D.

Grafik dinamis digunakan untuk menggambar grafik berbasis data dimana data dapat berubah setelah rendering grafik. Pada bagian ini, kita akan membahas berbagai jenis grafik dinamis.

Sr.No. Jenis & Deskripsi Bagan
1 Spline memperbarui setiap detik

Spline Chart diperbarui setiap detik.
2 Klik untuk menambahkan poin

Bagan dengan kemampuan penambahan poin.

Grafik kombinasi digunakan untuk menggambar grafik campuran; misalnya, diagram batang dengan diagram lingkaran. Pada bagian ini, kita akan membahas berbagai jenis grafik kombinasi.

Sr.No. Jenis & Deskripsi Bagan
1 Kolom, Garis dan Pai

Bagan dengan Kolom, Garis dan Pai.
2 Sumbu Ganda, Garis dan Kolom

Bagan dengan Sumbu Ganda, Garis dan Kolom.
3 Banyak Sumbu

Bagan memiliki Banyak Sumbu.
4 Sebarkan dengan garis regresi

Bagan sebar dengan garis regresi.

Bagan 3D digunakan untuk menggambar bagan 3 dimensi. Pada bagian ini, kita akan membahas berbagai jenis grafik 3D.

Sr.No. Jenis & Deskripsi Bagan
1 Kolom 3D

Bagan Kolom 3D.
2 Kolom 3D dengan nol

Bagan Kolom 3D dengan nilai nol dan 0.
3 Kolom 3D dengan susun

Bagan Kolom 3D dengan penumpukan dan pengelompokan.
4 Pai 3D

Bagan Pai 3D.
5 Donat 3D

Bagan Donat 3D.

Bagan Pengukur Sudut digunakan untuk menggambar bagan jenis pengukur / pengukur. Pada bagian ini, kita akan membahas berbagai jenis grafik Pengukur Sudut.

Sr.No. Jenis & Deskripsi Bagan
1 Pengukur Sudut

Bagan Pengukur Sudut.
2 Pengukur Padat

Bagan Pengukur Padat.
3 Jam

Jam.
4 Pengukur dengan sumbu ganda

Bagan Pengukur dengan sumbu ganda.
5 VU Meter

Grafik VU Meter.

Bagan Peta Panas digunakan untuk menggambar bagan tipe peta panas. Pada bagian ini, kita akan membahas berbagai jenis Peta Panas.

Sr.No. Jenis & Deskripsi Bagan
1 Peta Panas

Peta Panas.
2 Peta Panas Besar

Peta Panas Besar.

Bagan Peta Pohon digunakan untuk menggambar bagan tipe peta pohon. Di bagian ini, kita akan membahas berbagai jenis Peta Pohon.

Sr.No. Jenis & Deskripsi Bagan
1 Peta Pohon

Peta Pohon dengan sumbu warna.
2 Peta Pohon dengan Level

Peta Pohon dengan Level.
3 Peta Pohon Besar

Peta Pohon Besar.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved