Highcharts adalah pustaka pembuatan bagan JavaScript tingkat perusahaan berdasarkan SVG. Ini pertama kali dirilis pada tahun 2009 oleh Highsoft di Vik, Norwegia.

Highcharts mendukung daftar panjang berbagai jenis bagan, termasuk line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, gauge, dan hampir semua jenis bagan. Muncul dengan dokumentasi yang sangat baik dan contoh yang tak terhitung banyaknya. Ini kuat dengan kurva belajar yang rendah. Satu-satunya kelemahan adalah lisensinya adalah hak milik. Ini gratis untuk penggunaan pribadi/non-komersial, tetapi Anda harus membayar untuk aplikasi komersial.

Seiring dengan D3.js , Highcharts mendominasi aplikasi charting. Mari kita lihat cara kerjanya.

Mengatur Lingkungan Kerja

Kita akan menggunakan Create React App untuk menjelajahi Highcharts. Perintah berikut membuat proyek React:

% yarn create react-app react-highcharts
% cd react-highcharts

• highcharts: Ini adalah perpustakaan charting JavaScript.
• highcharts-react-official: Ini adalah pembungkus resmi yang didukung Highcharts untuk React.

% yarn add highcharts highcharts-react-official

"dependencies": {
  "highcharts": "^10.3.2",
  "highcharts-react-official": "^3.1.0"
}

<HighchartsReact highcharts={Highcharts} options={option} />

series: [
  {
    data: [1, 2, 1, 4, 3, 6],
  },
  {
    data: [2, 7, 0, 4, 6, 2],
  },
]

div {
  display: flex;
  flex-wrap: wrap;
}

• Pada baris 6–28, konfigurasi bagan dibuat.
  – Pada baris 7–11, bagan type, width, dan heightditentukan.
  – Pada baris 12–14, judul bagan disusun dari jenisnya. Karena lodash hadir dengan Create React App , _.startCasedipanggil untuk membuat setiap huruf awal menjadi kapital.
  – Pada baris 15–19, yAxis, sumbu Y, atau sumbu nilai, dikonfigurasi dengan a title.
  – Pada baris 20–27, dua seri data dibuat.
• Pada baris 33–40, setiap baris membuat bagan dengan tipe yang ditentukan:
  – line(baris 33): Bagan garis direpresentasikan oleh serangkaian titik data yang dihubungkan dengan garis lurus.
  – spline(baris 34): Bagan spline menggambar garis melengkung di antara titik-titik dalam rangkaian data.
  – area(baris 35): Bagan area berfungsi dengan cara yang sama seperti bagan garis, kecuali bagan ini mengisi area antara garis dan ambang batas, yaitu 0 secara default.
  – areaspline(baris 36): Bagan areaspline sama dengan bagan area, kecuali bahwa garisnya adalah spline, bukan garis lurus.
  – column(baris 37): Bagan kolom menampilkan data sebagai batang vertikal.
  –bar(baris 38): Bagan batang sama dengan bagan kolom, kecuali sumbu X dan sumbu Y ditukar.
  – pie(baris 39): Diagram lingkaran adalah diagram lingkaran yang dibagi menjadi beberapa sektor, yang sebanding dengan jumlah yang diwakilinya.
  – scatter(baris 40): Bagan sebar menggambar titik untuk setiap titik data tanpa menghubungkannya.

Contoh 2: Kredit Bagan dan Menu Ekspor

Lihat tangkapan layar di atas. Secara default, Highcharts menempatkan label/tautan kredit di sudut kanan bawah bagan.

Teks dan tautan dapat dikonfigurasi. Dan inilah contohnya:

credits: {
  text: 'My Credits',
  href: 'https://jenniferfubook.medium.com/jennifer-fus-web-development-publications-1a887e4454af',
}

credits: {
  enabled: false,
}

Modul ini dapat dimasukkan dalam satu baris kode.

require('highcharts/modules/exporting')(Highcharts);

import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);

Berikut modifikasinya src/App.js:

• Pada baris 5–6, modul pengekspor dimuat.
• Pada baris 30–32, kredit default telah dimatikan.

Pada bagan garis, klik Print chartitem menu dan muncul modal untuk mencetak bagan atau menyimpannya sebagai file PDF.

Pada bagan garis, klik Download PNG imageitem menu, dan menyimpan file PNG ke Downloadsfolder.

Setiap bagan dapat disimpan dalam format JPEG, PDF, atau SVG.

Contoh 3: Bagan Dasar dalam Tampilan 3D

highcharts-3dadalah modul Highcharts yang menyediakan dukungan 3D. Itu perlu diimpor untuk membuat bagan 3D.

Modul ini dapat dimasukkan dalam satu baris kode

require('highcharts/highcharts-3d')(Highcharts);

import Highcharts3D from 'highcharts/highcharts-3d';
Highcharts3D(Highcharts);

• options3dmengkonfigurasi opsi 3D. Bendera, enabled, mengaktifkan bagan 3D. alphadan betaadalah sudut untuk memutar tampilan bagan dan depthmenentukan kedalaman total dengan nilai default 100. Ini contohnya:

options3d: {
  enabled: true,
  alpha: 15,
  beta: 30,
  depth: 300,
}

• Data bagan mungkin dalam format yang berbeda untuk setiap jenis. xAxismendefinisikan sumbu X atau sumbu kategori. Untuk contoh 3D kami, tiga xAxisditentukan untuk plot pada kedalaman yang berbeda, meskipun ini xAxissendiri tidak terlihat.

• Pada baris 6 dan 8, modul 3D Highcharts dimuat.
• Pada baris 13–18, options3daktifkan bagan 3D dan konfigurasikan sudut dan kedalaman rotasi.
• Pada baris 28–38, tiga xAxisdisetel menjadi tidak terlihat.
• Pada baris 39–43, plotOptions.[type].depthdiatur ke 100.
• Pada baris 44–57, seriestentukan plot untuk xAxis 0, xAxis 1, dan xAxis 2. Setiap plot memiliki enam titik.

Berikut adalah beberapa pengamatan dari tangkapan layar di atas:

• line, spline, area, columndan barbagan ditampilkan dengan apik dalam tampilan 3D.
• Tidak areasplinememutar tampilan, karena tipe 3D tidak didukung secara resmi.
• Bagan pieberfungsi, tetapi tiga pai yang saling bertumpuk adalah canggung. Menyederhanakannya menjadi satu pai membuatnya terlihat lebih bagus:

series: [
  {
    data: [2, 2, 1, 4, 3, 2],
  },
]

       
                

                    
                    
                
            

const getOptions = (type) => ({
  chart: {
    type: 'scatter3d',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  series: [
    {
      data: [[0, 2, 0], [1, 2, 0], [2, 1, 0], [3, 4, 0], [4, 3, 0], [5, 2, 0]],
    },
    {
      data: [[0, 4, 100], [1, 3, 100], [2, 6, 100], [3, 5, 100], [4, 4, 100], [5, 6, 100]],
    },
    {
      data: [[0, 5, 200], [1, 7, 200], [2, 7, 200], [3, 6, 200], [4, 7, 200], [5, 7, 200]],
    },
  ],
  credits: {
    enabled: false,
  },
});

zAxis: {
  showFirstLabel: false
}

Contoh 4: Bagan Peta Panas

Peta panas adalah representasi grafis dari data di mana nilai individu yang terkandung dalam matriks direpresentasikan sebagai warna.

Bagan peta panas memerlukan modul peta panas untuk diimpor. Itu dapat dicapai dengan satu baris kode:

require('highcharts/modules/heatmap')(Highcharts);

import HighchartsHeatmap from 'highcharts/modules/heatmap';
HighchartsHeatmap(Highcharts);

xAxis: {
  categories: ['A', 'B', 'C', 'D', 'E', 'F'],
}

yAxis: {
  categories: ['Apple', 'Banana', 'Pear'],
}

data: [
  [0, 0, 5], [0, 1, 8], [0, 2, 9],
  [1, 0, 3], [1, 1, 6], [1, 2, 2],
  [2, 0, 7], [2, 1, 1], [2, 2, 9],
  [3, 0, 4], [3, 1, 5], [3, 2, 1],
  [4, 0, 8], [4, 1, 6], [4, 2, 7],
  [5, 0, 7], [5, 1, 3], [5, 2, 4],
]

colorAxis: {
  min: 0,
  minColor: '#FF0000',
  maxColor: '#0000FF',
}

Berikut modifikasinya src/App.js:

• Pada baris 6 dan 8, modul peta panas dimuat.
• Pada baris 13, tambahkan plotBorderWidthuntuk memisahkan area peta panas.
• Pada baris 18–20, xAxisdidefinisikan dengan 6 categories.
• Pada baris 21–25, yAxisdidefinisikan dengan 3 categories. titledimatikan (baris 23), dan categoriesditampilkan secara reversedberurutan.
• Pada baris 26–30, colorAxisdidefinisikan sebagai warna gradasi dari putih (baris 28) ke warna deret pertama (baris 29). colorAxismenggantikan label default untuk seri.
• Pada baris 31–45, dataditentukan dan dataLablesmemungkinkan menampilkan nilai peta panas di setiap area.
• Pada baris 53, bagan peta panas dibuat.

Contoh 5: Bagan Peta Pohon

Peta pohon adalah representasi grafis dari data di mana data hierarkis ditampilkan menggunakan gambar bersarang, biasanya persegi panjang.

Bagan treemap membutuhkan modul treemap untuk diimpor. Itu dapat dilakukan dengan satu baris kode:

require('highcharts/modules/treemap')(Highcharts);

import HighchartsTreemap from 'highcharts/modules/treemap';
HighchartsTreemap(Highcharts);

data: [
  {
    id: 'parentId',
    name: 'Parent',
    color: '#FF0000',
  },
  {
    name: 'child1',
    parent: 'parentId',
    value: 3,
  },
  {
    name: 'child2',
    parent: 'parentId',
    value: 5,
  },
]

• Pada baris 6 dan 8, modul peta pohon dimuat.
• Pada baris 16, typeditentukan dalam series, bukannya chart.
• Pada baris 17, layoutAlgorithmdiatur ke 'sliceAndDice’, yang merupakan perilaku default membagi area menjadi bagian yang lebih kecil.
• Pada baris 18–79, datatentukan data hierarkis, yang mendefinisikan tiga orang tua, Red(baris 19–23), Green(baris 24–28), dan Blue(baris 29–33). Redkamu punya anak (baris 34–48), Greenpunya dua anak (baris 49–58), dan Bluepunya empat anak (baris 59–78).
• Pada baris 89, bagan peta pohon dibuat.

Ubah layoutAlgorithmke 'stripes’, dan kami melihat area dibagi menjadi beberapa strip:

Ubah layoutAlgorithmke 'squarified’atau 'strip’, dan kami melihat area dibagi menjadi bentuk berikut:

Contoh 6: Bagan Gauge

Bagan pengukur juga disebut bagan speedometer atau bagan dial. Bagan memiliki jarum yang menunjuk ke nilai tertentu di atas titik pivot. Ini adalah visualisasi yang efektif untuk menilai kinerja, melacak kemajuan, dan memfasilitasi pengambilan keputusan.

Bagan pengukur membutuhkan highcharts-moremodul untuk diimpor. Itu dapat dilakukan dengan satu baris kode:

require('highcharts/highcharts-more')(Highcharts);

import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

yAxis: {
  min: 0,
  max: 100,
},
series: [
  {
    data: [80],
  },
]

• Pada baris 6 dan 8, highcharts-moredimuat.
• Pada baris 17–23, yAxisset mindan maxke 0 dan 100. yAxis.title.text disetel ke 'Speed'.
• Pada baris 24–28, series.datadiatur ke 80.
• Pada baris 36, bagan pengukur dibuat.

Bagan pengukur dapat ditentukan untuk setiap busur dengan pane.startAngledan pane.endAngle. Jika bukan lingkaran penuh, pane.backgroundharus disetel ke null. Ini juga merupakan ide yang baik untuk menyesuaikan posisi tengah [x, y].

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
}

Kita dapat memberi gaya pada pita pengukur berdasarkan yAxisnilai.

yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Speed',
    },
    plotBands: [
      {
        from: 0,
        to: 25,
        color: '#FF0000',
        thickness: 15,
      },
      {
        from: 25,
        to: 80,
        color: '#00FF00',
        thickness: 15,
      },
      {
        from: 80,
        to: 100,
        color: '#0000FF',
        thickness: 15,
      },
    ],
  }

Tampaknya titik pivot terlalu dekat dengan angka.

Kami mengubah ukuran band menjadi ukuran 120%:

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
  size: '120%',
}

Contoh 7: Aksesibilitas Bagan

Jalankan contoh bagan, dan kami melihat peringatan berikut di konsol.

highcharts.src.js:223Peringatan bagan tinggi: Pertimbangkan untuk menyertakan modul “accessibility.js” agar bagan Anda lebih bermanfaat bagi penyandang disabilitas. Setel opsi "accessibility.enabled" ke false untuk menghapus peringatan ini. Melihathttps://www.highcharts.com/docs/accessibility/accessibility-module.

Periksa elemen bagan, dan kami tidak melihat informasi aksesibilitas.

Aksesibilitas membuat aplikasi web dapat digunakan untuk orang-orang yang kemampuannya terbatas, seperti penglihatan (menggunakan pembaca layar) dan mobilitas (hanya menggunakan keyboard). Selain itu, keterbatasan bisa datang dari kemampuan perangkat, seperti perangkat mobile. Sangat penting untuk membuat perangkat lunak Perusahaan dapat diakses .

Modul aksesibilitas dapat diimpor dengan satu baris kode:

require('highcharts/modules/accessibility')(Highcharts);

import HighchartsAccessibility from 'highcharts/modules/accessibility';
HighchartsAccessibility(Highcharts);

• Pada baris 7 dan 10, modul aksesibilitas dimuat.
• Pada baris 19–22, accessibilitytentukan a description.

Ada banyak informasi aksesibilitas pada tangkapan layar di atas, termasuk deskripsi aksesibilitas yang telah kami tentukan:

<div aria-hidden="false" style="position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); margin-top: -3px; opacity: 0.01;">
  <p>Gauge Chart</p>
  <div>Chart with 1 data point.</div>
  <div>The gauge chart shows the performance speed between 0 and 100.</div>
  <div>The chart has 1 Y axis displaying Speed. Data ranges from 80 to 80.</div>
</div>

Kesimpulan

Kami telah menunjukkan tujuh contoh Highcharts di React, yang mencakup 12 jenis bagan line, spline, area, areaspline, column, bar, , pie, scatter, scatter3d, heatmap, treemap, dan gauge.

Kami juga telah menulis artikel tentang jenis Highchart lainnya:

• Pada artikel ini , bubble, packedbubble, streamgraph, dan cylinder.
• 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.