Perkenalan

Highcharts adalah pustaka pembuatan bagan JavaScript tingkat perusahaan berdasarkan SVG. Muncul dengan dokumentasi yang sangat baik dan contoh yang tak terhitung banyaknya. Satu-satunya kelemahan adalah lisensinya adalah hak milik. Ini gratis untuk penggunaan pribadi/non-komersial, tetapi Anda harus membayar untuk aplikasi komersial.

Pada artikel sebelumnya , kami memperkenalkan Highchart dan 12 jenis bagan line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, dan gauge.

Pada artikel tersebut, kami telah membangun lingkungan kerja untuk menjelajahi Highcharts menggunakan Create React App . Kami terus menggunakan lingkungan untuk mencoba lebih banyak jenis bagan bubble, packedbubble, streamgraph, dan cylinder.

Seperti yang telah kami jelaskan di artikel tersebut, disarankan untuk menyertakan impor berikut untuk setiap bagan:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import _ from 'lodash';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

• highcharts-react-official: Ini adalah pembungkus resmi yang didukung Highcharts untuk React.
• lodash: Ini adalah perpustakaan utilitas JavaScript modern yang menghadirkan modularitas, kinerja, dan ekstra. Karena lodash hadir dengan Create React App , kami dengan mudah menggunakan fungsinya, _.startCase, untuk membuat setiap huruf awal menjadi kapital.
• highcharts/modules/exporting: Ini adalah modul ekspor Highcharts yang menyediakan menu dengan item menu terkait ekspor ke View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF document, dan Download SVG vector image.
• highcharts/modules/accessibility: Ini adalah modul aksesibilitas Highcharts yang menyediakan aksesibilitas untuk HTML bagan yang dihasilkan.

Bagan gelembung adalah jenis bagan yang menampilkan tiga dimensi data. Setiap entitas dikodekan dalam [x, y, z]format, di mana [x, y]menentukan lokasi, dan zukurannya.

Berikut modifikasinya src/App.js:

• Pada baris 6 dan 9, highcharts/highcharts-moredimuat, yang diperlukan untuk bagan gelembung.
• Pada baris 12–16, bagan type, width, dan heightdidefinisikan.
• Pada baris 17–19, judul bagan tersusun dari jenisnya.
• Pada baris 20–24, yAxisdikonfigurasi dengan title.
• Pada baris 25–35, seriestentukan tiga set titik data (baris 26–28, baris 29–31, dan baris 32–34).
• Pada baris 36–38, kredit default telah dimatikan.
• Pada baris 43, bagan gelembung dibuat.

Bagan Gelembung yang Dikemas

Bagan gelembung yang dikemas adalah jenis bagan gelembung, dengan lokasinya, [x, y], yang dihitung secara otomatis untuk mengemas gelembung dalam sebuah kluster. Alih-alih formatnya, [x, y, z], bagan gelembung yang dikemas hanya membutuhkan znilai untuk ukurannya. Ini menggunakan ukuran dan, secara opsional, warna untuk memvisualisasikan data.

Berikut modifikasinya src/App.js:

• Pada baris 6 dan 9, highcharts/highcharts-moredimuat, yang diperlukan untuk bagan gelembung yang dikemas.
• Pada baris 12–16, bagan type, width, dan heightdidefinisikan.
• Pada baris 17–19, judul bagan tersusun dari jenisnya.
• Pada baris 20–29, ukuran gelembung minimum dikonfigurasi menjadi 30%, dan ukuran gelembung maksimum dikonfigurasi menjadi 100%. Label data diaktifkan, dan nama titik memformat setiap label.
• Pada baris 30–111, seriestentukan empat set titik data, A(baris 33–50), B(baris 54–75), C(baris 79–92), dan D(baris 96–109).
• Pada baris 112–114, kredit default telah dimatikan.
• Pada baris 119, bagan gelembung yang dikemas dibuat.

Bagan gelembung yang dikemas memiliki kemampuan seret dan lepas, memungkinkan pengguna untuk memindahkan satu gelembung yang dipilih di antara rangkaian untuk memeriksa bagaimana hubungan mereka berubah dengan perpindahan tersebut.

Grafik Arus dan Bagan Area

Bagan grafik aliran adalah bagan area bertumpuk yang dipindahkan di sekitar sumbu pusat, menghasilkan bentuk yang mengalir dan organik. Ini sering digunakan untuk menampilkan volume gabungan di berbagai kategori atau dari waktu ke waktu.

Berikut modifikasinya src/App.js:

• Pada baris 6 dan 9, highcharts/modules/streamgraphdimuat, yang diperlukan untuk bagan grafik aliran.
• Pada baris 12–16, bagan type, width, dan heightdidefinisikan.
• Pada baris 17–19, judul bagan terdiri dari tipe.
• Pada baris 20–22, xAxisdidefinisikan menjadi enam kategori.
• Pada baris 23–40, seriestentukan empat set volume untuk kategori ini, Group 1(baris 24–27), Group 2(baris 28–31), Group 3(baris 32–35), dan Group 4(baris 36–39).
• Pada baris 41–43, kredit default telah dimatikan.
• Pada baris 48, diagram aliran grafik dibuat.

Untuk opsi yang sama, ubah tipe menjadi area:

<HighchartsReact highcharts={Highcharts} options={getOptions('area')} />

Tambahkan plotOptionsuntuk menumpuknya:

plotOptions: {
  area: {
    stacking: 'normal',
  },
}

Ubah jenisnya menjadi areaspline:

plotOptions: {
  areaspline: {
    stacking: 'normal',
  },
}
...

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('areaspline')} />
  );
}

Apakah tampilannya mirip dengan diagram aliran grafik?

Bagan grafik aliran ditampilkan di sekitar sumbu tengah, sedangkan bagan garis bidang tumpuk ditampilkan di sepanjang xAxis. Jika tidak, mereka serupa.

Bagan Silinder dan Kolom

Bagan silinder 3D adalah variasi bagan kolom 3D, dan menampilkan titik silinder.

Berikut modifikasinya src/App.js:

• Pada baris 4 dan 8, highcharts/highcharts-3ddimuat, karena bagan silinder adalah bagan 3D.
• Di baris 7 dan 11, highcharts/modules/cylinderdimuat, yang diperlukan untuk bagan silinder.
• Pada baris 14–18, bagan type, width, dan heightdidefinisikan.
• Pada baris 19–21, judul bagan tersusun dari jenisnya.
• Pada baris 22–24, xAxisdidefinisikan menjadi enam kategori.
• Pada baris 25–42, seriestentukan empat set volume untuk kategori ini, Group 1(baris 26–29), Group 2(baris 30–33), Group 3(baris 34–37), dan Group 4(baris 38–41).
• Pada baris 43–45, kredit default telah dimatikan.
• Pada baris 50, bagan silinder dibuat.

Jika diperhatikan dengan seksama, kedua ujung setiap kolom terlihat silindris. Berikut tampilan yang diperbesar:

Ubah jenisnya menjadi column:

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
  );
}

Saat melihat tampilan 2D, perbedaan antara bagan silinder dan kolom kecil.

Tambahkan options3duntuk mengaktifkan bagan 3D dan mengonfigurasi sudut dan kedalaman rotasi.

chart: {
  type,
  width: 800,
  height: 600,
  options3d: {
    enabled: true,
    alpha: 15,
    beta: 30,
    depth: 300,
  },
}

Berikut adalah bagan kolom dalam tampilan 3D:

Dalam tampilan 3D, perbedaan antara bagan silinder dan kolom terlihat jelas.

Silindernya terlihat silindris, tapi kami ingin membuatnya lebih tiga dimensi. Kami menempatkan grup ke kedalaman yang berbeda dan mengatur silinder dengan diameter berbeda ( pointWidth).

Berikut modifikasinya src/App.js:

• Pada baris 31–34, zAxisdikonfigurasi dengan mindan maxnilai.
• Pada baris 36–41, Group 1set depthmenjadi 0, dan pointWidthmenjadi 30.
• Pada baris 42–47, Group 2set depthmenjadi 100, dan pointWidthmenjadi 20.
• Pada baris 48–53, Group 3set depthmenjadi 200, dan pointWidthmenjadi 20.
• Pada baris 54–59, Group 4set depthmenjadi 300, dan pointWidthmenjadi 50.

Ubah jenisnya menjadi column:

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
  );
}

Kesimpulan

Highcharts adalah pustaka pembuatan bagan JavaScript tingkat perusahaan berdasarkan SVG. Muncul dengan dokumentasi yang sangat baik dan contoh yang tak terhitung banyaknya.

Pada artikel ini, kami telah memperkenalkan jenis bagan tambahan bubble, packedbubble, streamgraph, dan cylinder.

Kami juga telah menulis artikel tentang jenis Highchart lainnya:

• Pada artikel ini : line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, dan gauge.
• Pada artikel ini : sankeydiagram, arcdiagram, dependencywheel, dan networkgraph.
• Dalam artikel ini : parallelCoordinates.

Terima kasih sudah membaca.

Want to Connect? 

If you are interested, check out my directory of web development articles.