Panduan Utama untuk Visualisasi Data di Aplikasi React Anda

Jujur saja, membuat grafik di aplikasi React selalu rumit. Selain itu, pengembang perlu memperhatikan sejumlah faktor saat membuat bagan di React, seperti jenis bagan, desain, warna, latar belakang, nilai, kumpulan data, opsi, dan banyak lagi. Untungnya, perpustakaan pembuatan bagan JavaScript menyukainya FusionChart telah mempermudah pembuatan grafik dalam aplikasi React. Secara luas dianggap sebagai salah satu alat visualisasi data terbaik, FusionCharts adalah pustaka bagan JavaScript yang membantu pengembang web dan seluler menghasilkan bagan, pengukur, dan peta untuk mendukung dasbor. 

Dengan lebih dari 100 jenis bagan dan lebih dari 2,000 peta, FusionCharts tidak hanya membantu Anda membuat bagan interaktif untuk aplikasi web namun juga memungkinkan Anda menambahkan fitur pelaporan cerdas seperti ekspor bagan, menelusuri, menampilkan data secara selektif, serta menggulir dan memperbesar grafik Anda.

Mari cari tahu cara membuat grafik di aplikasi React menggunakan FusionCharts. Namun sebelum masuk ke seluk beluknya, mari cari tahu mengapa Anda harus membuat grafik di aplikasi React menggunakan FusionCharts.

Alasan Mengapa Anda Harus Membuat Grafik di Aplikasi React Menggunakan FusionCharts

Dengan bantuan FusionCharts, pengembang dapat dengan mudah membuat bagan yang indah di aplikasi React dan kemudian menambahkan kemampuan pelaporan tingkat lanjut seperti penelusuran tanpa batas dan ekspor bagan dalam hitungan menit. Berikut adalah beberapa alasan utama Anda harus membuat grafik di aplikasi React menggunakan FusionCharts.

Beragam jenis bagan

FusionCharts menawarkan kepada Anda banyak jenis bagan. Baik itu kolom sederhana atau diagram lingkaran, penjualan khusus, diagram pemasaran, atau diagram zoom dan gulir tingkat lanjut, FusionCharts mencakup semua kebutuhan pembuatan diagram Anda. 

Mudah digunakan

FusionCharts membuat proses pembuatan grafik di aplikasi React menjadi pengalaman yang mudah dan tidak merepotkan. Karena menggunakan XML/JSON sebagai antarmuka datanya, yang perlu Anda lakukan hanyalah mengubah data Anda menjadi XML/JSON menggunakan bahasa pemrograman atau GUI visual yang disediakan di FusionCharts untuk membuat grafik interaktif. 

Grafik animasi dan interaktif

Dengan FusionChart, Anda dapat dengan cepat dan mudah merender bagan animasi dengan banyak opsi interaktif untuk pengguna akhir. Selain itu, berbagai jenis bagan mendukung berbagai bentuk animasi dan interaktivitas, sehingga memberikan pengalaman unik bagi pengguna akhir. 

Customizable

Salah satu dari banyak hal yang Anda sukai tentang FusionCharts adalah hampir semuanya dapat disesuaikan. Dari keterangan hingga warna titik, Anda dapat menyesuaikan semuanya sesuai kebutuhan Anda. 

Data perusahaan yang dapat diakses

Karena FusionCharts adalah perangkat lunak visualisasi berbasis cloud, Anda dan pengembang Anda dapat mengakses laporan kapan saja dan di mana saja. 

Dengan bantuan pustaka pembuatan bagan JavaScript ini, pengembang dapat membuat bagan interaktif untuk aplikasi web dan perusahaan di React dengan cepat dan mudah. 

Sekarang kita tahu mengapa FusionCharts adalah salah satu alat visualisasi data terbaik dan mengapa ini adalah pilihan sempurna untuk membuat grafik di aplikasi React, mari cari tahu cara membuat grafik di aplikasi React menggunakan FusionCharts.

Langkah-Langkah Membuat Chart di Aplikasi React Menggunakan FusionCharts

Membuat grafik di aplikasi React menggunakan FusionCharts cukup mudah. Cukup ikuti langkah-langkah ini:

Langkah 1: Siapkan proyek React

Untuk membuat bagan di aplikasi React, Anda perlu menyiapkan proyek React terlebih dahulu. Salah satu cara terbaik untuk menyiapkan lingkungan adalah menggunakan aplikasi create-react.

Buka terminal dan masukkan kode ini:

Langkah 2: Instal FusionCharts dan sertakan dependensi

Setelah Anda menyiapkan proyek React, instal modul react-fusioncharts dan fusioncharts menggunakan perintah berikut:

Setelah Anda menginstal komponen FusionCharts, Anda dapat mengganti kode di file App.js dengan kode yang ditunjukkan pada langkah-langkah di bawah ini untuk membuat bagan pertama Anda. Pastikan Anda mengimpor semua dependensi yang diperlukan untuk memulai. 

Langkah 3: Siapkan data

Setelah Anda menginstal FusionCharts dan menyertakan dependensinya, Anda perlu menyiapkan data bagan. Pada contoh berikut, data cadangan bahan bakar fosil di berbagai negara ditampilkan dalam bentuk tabel:

FusionCharts menerima data dalam format JSON. Jadi data di atas akan mengambil bentuk di bawah ini.

Langkah 4: Konfigurasikan bagan Anda

Sekarang data untuk bagan Anda sudah siap, mari kita mulai menata gaya, memposisikan, dan memberikan konteks pada bagan Anda. 

Tinggi dan lebar: Ukuran grafik ditentukan menggunakan atribut 'lebar' dan 'tinggi'.

Tipe: 'Jenis' menentukan jenis bagan yang akan Anda plot.

Bagan: Objek 'bagan' di bawah 'DataSource' berisi opsi konfigurasi bagan seperti tema dan format tampilan angka. 

Langkah 5: Render grafiknya

Sekarang, setelah semua bagian teka-teki terpecahkan, sekarang saatnya untuk menggabungkan semuanya dari atas dan membuat Bagan Sederhana. Berikut kode gabungan untuk merender Bagan Sederhana. 

Setelah Anda merender grafik, Anda akan dapat melihat Grafik Sederhana, seperti yang ditunjukkan di bawah ini:

Sekarang setelah Anda mengetahui cara membuat grafik sederhana di aplikasi React menggunakan FusionCharts, mari cari tahu tentang beberapa fitur FusionCharts lainnya. Berikut beberapa demo grafik yang dibuat menggunakan FusionCharts di aplikasi React. 

Peta Dunia

Untuk merender bagan peta dunia, Anda perlu menggunakan kode gabungan berikut:

mengimpor Bereaksi, { Komponen } dari 'reaksi'

mengimpor FusionChart dari 'grafik fusi';

mengimpor Peta dari 'fusionchart/fusioncharts.maps';

mengimpor Dunia dari 'fusioncharts/maps/fusioncharts.dunia';

mengimpor ReaksiFC dari 'grafik reaksi-fusi';

mengimpor Tema Fusion dari 'fusioncharts/tema/fusioncharts.theme.fusion';

ReaksiFC.fcRoot(FusionChart, Peta, Dunia, Tema Fusion);

const konfigurasi bagan = {

  mengetik: 'dunia',

  width: 600,

  tinggi: 400,

  format data: 'json',

  sumber data: {

    "bagan": {

      "keterangan": “Rata-Rata Pertumbuhan Populasi Tahunan”,

      “subteks”: ” 1965-2018″,

      “akhiran angka”: "%",

      “sertakan label nilai”: "1",

      “labelsepchar”: ":",

      “entitasFillHoverColor”: “#FFF9C4”,

      "tema": "fusi"

    },

    “rentang warna”: {

      “nilai kecil”: "0",

      "kode": “#FFE0B2”,

      “gradien”: "1",

      "warna": [

        {

          “nilai kecil”: "0.5",

          “nilai maksimal”: "1.0",

          "warna": “#FFD74D”

        },

        {

          “nilai kecil”: "1.0",

          “nilai maksimal”: "2.0",

          "warna": “#FB8C00”

        },

        {

          “nilai kecil”: "2.0",

          “nilai maksimal”: "3.0",

          "warna": “#E65100”

        }

      ]

    },

    "data": [

      {

        "Indo": "SA",

        "nilai": “.82”,

        “tampilkanLabel”: "1"

      },

      {

        "Indo": “TA”,

        "nilai": "2.04",

        “tampilkanLabel”: "1"

      },

      {

        "Indo": "SEBAGAI",

        "nilai": "1.78",

        “tampilkanLabel”: "1"

      },

      {

        "Indo": “AF”,

        "nilai": “.40”,

        “tampilkanLabel”: "1"

      },

      {

        "Indo": “Uni Eropa”,

        "nilai": "2.58",

        “tampilkanLabel”: "1"

      },

      {

        "Indo": "AU",

        "nilai": "1.30",

        “tampilkanLabel”: "1"

      }

    ]

  },

};

ekspor kegagalan kelas Aplikasi Meluas Komponen {

  menghasilkan () {

    kembali <ReaksiFC {...konfigurasi bagan} />;

  }

}

Setelah Anda merender bagan peta dunia, Anda akan dapat melihat peta dunia seperti yang ditunjukkan di bawah ini:

Demo pengukur sederhana

Untuk merender bagan ukuran sederhana, periksa kode gabungan berikut:

impor Bereaksi, { Komponen } dari 'bereaksi';

impor FusionCharts dari 'fusioncharts';

impor Widget dari 'fusioncharts/fusioncharts.widgets';

impor ReactFC dari 'react-fusioncharts';

impor FusionTheme dari 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Widget, FusionTheme);

konfigurasi grafik const = {

  ketik: 'pengukur sudut',

  lebar: 600,

  tinggi: 400,

  format data: 'json',

  sumber data: {

    "bagan": {

      “caption”: “Skor Kepuasan Pelanggan AS untuk 2018”,

      “Batas Bawah”: “0”,

      “Batas Atas”: “100”,

      “Nilai pertunjukan”: “1”,

      “numberSuffix”: “%”,

      “tema” : “perpaduan”,

      “tunjukkan Tip Alat”: “0”

    },

    “Rentang Warna”: {

      "warna": [

        {

          “Nilai minimum”: “0”,

          “Nilai Maks”: “25”,

          “kode”: “#F2726F”

        },

        {

        “Nilai minimum”: “25”,

        “Nilai Maks”: “75”,

        “kode”: “#FFC533”

        },

        {

          “Nilai minimum”: “75”,

          “Nilai Maks”: “100”,

          “kode”: “#62B58F”

        }

      ]

    },

    “dial”: {

      "memanggil": [

        {

          "Nilai": "75"

        }

      ]

    }

  },

};

ekspor kelas default Aplikasi extends Komponen {

  memberikan () {

    kembali ;

  }

}

Setelah Anda merender grafiknya, Anda akan dapat melihat grafik ukuran sederhana, seperti yang ditunjukkan di bawah ini:

Demo pengikatan data

Untuk merendernya, Anda perlu menggunakan kode gabungan berikut:

impor Bereaksi, { Komponen } dari 'bereaksi';

impor FusionCharts dari 'fusioncharts';

impor Bagan dari 'fusioncharts/fusioncharts.charts';

impor ReactFC dari 'react-fusioncharts';

impor FusionTheme dari 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Bagan, FusionTheme);

konfigurasi grafik const = {

  ketik: 'kolom2d',

  lebar: 600,

  tinggi: 400,

  format data: 'json',

  sumber data: {

    "bagan": {

      “caption”: “Negara-Negara Dengan Bahan Bakar Fosil Terbanyak [2018-19]”,

      “subCaption”: “Dalam MMbbl = Satu Juta barel”,

      “xAxisName”: “Negara”,

      “yAxisName”: “Cadangan (MMbbl)”,

      “numberSuffix”: “K”,

      “tema” : “perpaduan”,

      “perbaruiAnimDuration”: “0.4”

    },

    "data": [

      {

        “label”: “Venezuela”,

        "Nilai": "290"

      },

      {

        “label”: “Saudi”,

        "Nilai": "260"

      },

      {

        “label”: “Kanada”,

        "Nilai": "180"

      },

      {

        “label”: “Iran”,

        "Nilai": "140"

      },

      {

        “label”: “Rusia”,

        "Nilai": "115"

      },

      {

        “label”: “UEA”,

        "Nilai": "100"

      },

      {

        “label”: “AS”,

        "Nilai": "30"

      },

      {

        “label”: “Tiongkok”,

        "Nilai": "30"

      }

    ]

  },

};

ekspor kelas default Aplikasi extends Komponen {

  konstruktor(alat peraga) {

    super(alat peraga);

    this.state = chartConfigs;

    this.updateData = ini.updateData.bind(ini);

  }

  // Fungsi ini menghasilkan angka acak.

  dapatkanNomorAcak() {

    var maks = 290, min = 30;

    return Math.round(((max – min) * Math.random()) + min);

  }

  // Penangan untuk tombol pembaruan.

  // Memperbarui nilai grafik secara acak.

  perbaharui data() {

    var prevDs = Object.assign({}, this.state.dataSource);

    sebelumnyaDs.data[2].nilai = ini.getRandomNumber();

    sebelumnyaDs.data[3].nilai = ini.getRandomNumber();

    ini.setState({

      Sumber data: sebelumnya,

    });

  }

  memberikan() {

    kembali (

             className='btn btn-garis besar-sekunder btn-sm'

             onClick={ini.updateData}

           >

             Ubah Data Bagan

    );

  }

}

Demo peristiwa siklus hidup

Untuk menampilkan peristiwa siklus hidup, periksa cuplikan kode berikut:

impor React, { Component } dari “react”;

impor FusionCharts dari “fusioncharts”;

impor Bagan dari “fusioncharts/fusioncharts.charts”;

impor ReactFC dari “react-fusioncharts”;

impor FusionTheme dari “fusioncharts/themes/fusioncharts.theme.fusion”;

ReactFC.fcRoot(FusionCharts, Bagan, FusionTheme);

konfigurasi grafik const = {

  ketik: “kolom2d”,

  lebar: 600,

  tinggi: 400,

  Format data: “json”,

  sumber data: {

    "bagan": {

      “caption”: “Negara-Negara Dengan Bahan Bakar Fosil Terbanyak [2018-19]”,

      “subCaption”: “Dalam MMbbl = Satu Juta barel”,

      “xAxisName”: “Negara”,

      “yAxisName”: “Cadangan (MMbbl)”,

      “numberSuffix”: “K”,

      “tema”: “perpaduan”

    },

    "data": [

      {

        “label”: “Venezuela”,

        "Nilai": "290"

      },

      {

        “label”: “Saudi”,

        "Nilai": "260"

      },

      {

        “label”: “Kanada”,

        "Nilai": "180"

      },

      {

        “label”: “Iran”,

        "Nilai": "140"

      },

      {

        “label”: “Rusia”,

        "Nilai": "115"

      },

      {

        “label”: “UEA”,

        "Nilai": "100"

      },

      {

        “label”: “AS”,

        "Nilai": "30"

      },

      {

        “label”: “Tiongkok”,

        "Nilai": "30"

      }

    ]

  }

};

ekspor kelas default Aplikasi extends Komponen {

  konstruktor(alat peraga) {

    super(alat peraga);

    ini.status = {

      pesan:

        “Anda akan melihat pemberitahuan di sini untuk peristiwa siklus hidup bagan”

    };

    this.beforeDataUpdate = ini.beforeDataUpdate.bind(ini);

    this.dataUpdated = ini.dataUpdated.bind(ini);

    this.drawComplete = ini.drawComplete.bind(ini);

    this.renderComplete = ini.renderComplete.bind(ini);

  }

  // Pengendali panggilan balik untuk acara 'sebelum Pembaruan Data'.

  sebelumPembaruanData() {

    this.state.message = [ Status: , ” sebelumPembaruan Data”];

  }

  // Pengendali panggilan balik untuk acara 'dataUpdated'.

  dataDiperbarui() {

    biarkan newMessage = this.state.message.slice();

    newMessage.push(“, dataDiperbarui”);

    ini.setState({

      pesan: Pesan baru

    });

  }

  // Pengendali panggilan balik untuk acara 'drawComplete'.

  seriLengkap() {

    biarkan newMessage = this.state.message.slice();

    newMessage.push(“, drawComplete”);

    ini.setState({

      pesan: Pesan baru

    });

  }

  // Pengendali panggilan balik untuk acara 'renderComplete'.

  renderComplete() {

    biarkan newMessage = this.state.message.slice();

    newMessage.push(“, renderComplete”);

    ini.setState({

      pesan: Pesan baru

    });

  }

  memberikan() {

    kembali (

        <ReactFC

          {…chartConfig}

          fcEvent-beforeDataUpdate={ini.beforeDataUpdate}

          fcEvent-dataUpdated={ini.dataDiperbarui}

          fcEvent-drawComplete={ini.drawComplete}

          fcEvent-renderComplete={ini.renderComplete}

        />

          {ini.status.pesan}

    );

  }

}

Takeaway Terakhir

Apakah Anda ingin membuat diagram sederhana atau diagram lingkaran atau diagram zoom dan gulir tingkat lanjut di aplikasi React, gunakan FusionChart untuk membuatnya akan menjadi pilihan terbaik Anda. Secara luas dianggap sebagai salah satu alat visualisasi data terbaik, FusionCharts memanfaatkan JavaScript (HTML5) dan Flash untuk membuat visualisasi data menakjubkan yang tak tertandingi oleh komponen sisi server konvensional. Karena pustaka pembuatan bagan JavaScript ini berfungsi dengan data XML dan JSON, pustaka ini dapat diintegrasikan dengan database dan teknologi sisi server apa pun seperti ASP, PHP, dan JSP, dan lain-lain. Meskipun membuat grafik dalam aplikasi React menggunakan FusionCharts mungkin tampak seperti tugas yang sulit, prosesnya cukup sederhana dan mudah.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan cepat dan mudah membuat grafik yang indah di aplikasi React menggunakan FusionCharts.

Paket FusionCharts React memberi Anda yang terbaik dari kedua dunia. Anda dapat menggunakan kekuatan JavaScript untuk menyematkan dan memanipulasi grafik sambil memanfaatkan sepenuhnya mesin pembuat grafik FusionCharts yang canggih.

FusionCharts adalah perpustakaan yang sangat sederhana untuk digunakan dan memiliki dukungan untuk semua teknologi terbaru seperti Angular, Vue, dan React. Dokumentasi React menunjukkan komponen-komponen yang tersedia secara default, namun mungkin ada baiknya Anda memeriksanya Dokumentasi FusionCharts untuk melihat di mana Anda dapat menyesuaikan perpustakaan untuk proyek Anda berikutnya.