Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Bagan memberi pengguna Anda cara yang nyaman dan menarik untuk memvisualisasikan data. Mereka dapat membuat data lebih mudah dipahami dan dapat membuat aplikasi Anda lebih interaktif.

Ada beberapa cara untuk membuat bagan di React, termasuk menggunakan CSS dasar atau pustaka seperti React-Vis atau React Google Charts.

Cara Membuat Bagan di React With CSS

Membuat bagan di React menggunakan CSS dasar relatif mudah. Yang perlu Anda lakukan hanyalah membuat elemen div dengan lebar dan tinggi, lalu atur warna latar belakang ke warna bagan yang diinginkan. Misalnya:

impor Reaksi dari'reaksi';
const Bagan = () => {
kembali (


lebar: '100px', tinggi: '300px', warna latar belakang: '#5D6AFF'}}/>
 );
}
eksporbawaan Bagan;

Pada kode di atas, kita mengimpor library React. Kami kemudian membuat fungsi yang disebut Bagan yang mengembalikan div dengan lebar 100px, tinggi 300px, dan warna latar belakang #5D6AFF. Ini akan membuat bagan dasar dengan latar belakang biru. Anda juga bisa

instagram viewer
menggunakan Bahan UI atau Tailwind CSS di aplikasi React Anda untuk membuat grafik.

Anda juga dapat membuat beberapa bagan dengan teks atau gambar di dalam div untuk membuat bagan yang lebih kompleks.

impor Reaksi dari'reaksi';
const Bagan = () => {
kembali (
<div>


lebar: '100px', tinggi: '300px', warna latar belakang: '#5D6AFF'}}>
<P>Bagan 1P>
div>
lebar: '100px', tinggi: '300px', warna latar belakang: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"gaya={{lapisan:'100px30px'}} />
div>
div>
 );
}


eksporbawaan Bagan;

React Chart Menggunakan React-Vis Library

React-Vis adalah perpustakaan yang dibuat oleh Uber yang memungkinkan Anda membuat bagan dan grafik di React. Ini menyediakan seperangkat komponen yang memudahkan pembuatan bagan dengan berbagai bentuk, warna, dan ukuran. Ini juga mendukung animasi dan interaktivitas, yang dapat membantu membuat bagan Anda lebih menarik.

Untuk menggunakan React-Vis, Anda harus melakukannya terlebih dahulu membuat aplikasi React dasar dan menginstal perpustakaan. Anda dapat melakukannya dengan perintah berikut:

npm Install bereaksi-vis

Setelah Anda menginstal perpustakaan, Anda dapat membuat bagan dasar dengan kode berikut:

impor Bereaksi, { useState } dari'reaksi';
impor {
 XYPlot,
 seri garis,
 GarisGaris Vertikal,
 Garis Kisi Horisontal,
 Sumbu X,
 YAxis
} dari'bereaksi';


const Bagan = () => {
const [data] = statuspenggunaan([
 { X: 0, y: 8 },
 { X: 1, y: 5 },
 { X: 2, y: 4 },
 { X: 3, y: 9 },
 { X: 4, y: 1 },
 { X: 5, y: 7 },
 { X: 6, y: 6 },
 { X: 7, y: 3 },
 { X: 8, y: 2 },
 { X: 9, y: 0 }
 ]);


kembali (
<XYPlotlebar={300}tinggi={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<Seri Garisdata={data} />
XYPlot>
 );
}
eksporbawaan Bagan;

Kode di atas mengimpor pustaka React dan React-Vis. Ini kemudian mendefinisikan fungsi yang disebut Bagan yang mengembalikan XYPlot dengan VerticalGridLines, HorizontalGridLines, XAxis, YAxis, dan LineSeries. LineSeries mengambil larik data, yang berisi koordinat x dan y dari titik-titik yang membentuk garis.

Menggunakan React Google Charts Library

React Google Charts adalah pustaka lain yang memudahkan pembuatan bagan di React. Ini menyediakan satu set komponen untuk membuat berbagai jenis bagan, seperti bagan batang, bagan pai, dan grafik garis. Ini juga mendukung animasi dan interaktivitas, yang dapat membantu membuat bagan Anda lebih menarik.

Untuk menggunakan React Google Charts, Anda harus menginstal pustaka terlebih dahulu. Anda dapat melakukannya dengan perintah berikut:

npm Install react-google-charts

Setelah Anda menginstal perpustakaan, Anda dapat membuat bagan dasar dengan kode berikut:

impor Bereaksi, { useState } dari'reaksi';
impor { Bagan } dari'reaksi-google-charts';
const MyChart = () => {
const [data] = statuspenggunaan([
['Tahun', 'Penjualan', 'Pengeluaran'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


kembali (
 lebar={'400px'}
 tinggi={'300px'}
 Jenis grafik="Batang"
 data={data}
 />
 );
}
eksporbawaan MyChart;

Kode ini mengimpor pustaka react dan react-google-charts. Itu kemudian membuat fungsi yang disebut MyChart yang mengembalikan komponen Bagan. Komponen Bagan mengambil larik data, yang berisi label dan nilai titik yang membentuk bagan.

Kerugian Menggunakan CSS

Ada beberapa kerugian menggunakan CSS untuk membuat bagan di React:

  • Sulit digunakan: Jika Anda ingin membuat bagan yang rumit, CSS mungkin sulit digunakan.
  • Tidak terlalu fleksibel: CSS tidak terlalu fleksibel, sehingga sulit untuk membuat perubahan pada bagan Anda.
  • Tidak interaktif: Bagan CSS tidak interaktif, jadi pengguna Anda tidak akan dapat berinteraksi dengannya.

Jika Anda ingin membuat bagan yang rumit, React-vis dan React-google-charts adalah pilihan yang lebih baik. Namun, jika Anda ingin membuat bagan sederhana, CSS bisa menjadi pilihan yang baik.

Manfaat Menggunakan React-Vis

Ada beberapa manfaat menggunakan React-Vis untuk membuat bagan di React:

  • Mudah digunakan: React-Vis mudah digunakan, sehingga Anda dapat membuat bagan yang rumit dengan mudah.
  • Sangat fleksibel: React-Vis sangat fleksibel, sehingga Anda dapat membuat perubahan pada bagan Anda dengan mudah.
  • Interaktif: Bagan React-Vis bersifat interaktif, sehingga pengguna Anda dapat berinteraksi dengannya.
  • Animasi: Bagan React-Vis mendukung animasi, sehingga Anda dapat membuat bagan Anda lebih menarik.

Jika Anda ingin membuat bagan kompleks yang interaktif dan beranimasi, React-Vis adalah pilihan yang bagus.

Manfaat Menggunakan React Google Charts

Sama seperti React-Vis, ada beberapa manfaat menggunakan React Google Charts untuk membuat bagan di React:

  • Mudah digunakan: React Google Charts mudah digunakan, sehingga Anda dapat membuat bagan yang kompleks dengan mudah.
  • Jenis bagan yang berbeda: React Google Charts menyediakan jenis bagan yang berbeda, sehingga Anda dapat memilih yang terbaik untuk data Anda.
  • Dukungan untuk animasi: React Google Charts mendukung animasi, sehingga Anda dapat membuat bagan Anda lebih menarik.

Tingkatkan Keterlibatan Pengguna Dengan Bagan

Bagan adalah cara yang bagus untuk memvisualisasikan data, tetapi Anda juga dapat menggunakannya untuk meningkatkan keterlibatan pengguna. Menambahkan animasi dan interaktivitas ke bagan Anda dapat membuatnya lebih menarik dan dapat membantu pengguna memahami data Anda dengan lebih baik.

Jadi, jika Anda sedang mencari cara untuk meningkatkan keterlibatan pengguna di aplikasi React Anda, pertimbangkan untuk menambahkan bagan. Anda juga dapat menerapkan aplikasi React ke platform yang cepat, aman, dan dapat diskalakan seperti Github.