Buat plot kutub untuk mengukur kekuatan medan elektromagnetik – Beragampengetahuan

Bagan kutub JavaScript, juga dikenal sebagai bagan radar, adalah visualisasi data yang menampilkan data multivariat dalam format melingkar.

Bagan ini sering digunakan untuk mewakili kumpulan data multivariat dengan cara yang memungkinkan perbandingan titik data yang mudah dan identifikasi cepat tren dan pola.

Menggunakan plot kutub dalam JavaScript semakin populer karena keserbagunaan dan kemampuannya untuk menampilkan data yang kompleks dalam format yang mudah dipahami.

Dalam plot kutub, kita dapat bekerja dengan dua jenis data:

1. Koordinat radial (jarak antar kutub).
2. Koordinat sudut (sudut diperoleh dari titik tetap).

Pada artikel ini, saya akan memandu Anda melalui cara membuat plot kutub JavaScript untuk mengukur kekuatan medan elektromagnetik, kami akan menggunakan nilai sudut dan amplitudo spektral sudut.

Apakah Anda seorang analis data, pengembang, atau seseorang yang baru mengetahui cara membuat aplikasi JS Anda sendiri, Anda pasti menemukan tutorial ini informatif dan bermanfaat.

Siapkan template kita

1. Pertama, unduh template proyek.

2. Buka proyek dalam Visual Studio Code. Anda akan melihat pohon file seperti ini:

3. Sekarang, buka terminal baru, dan seperti biasa di proyek NodeJS, Anda harus menjalankannya NPM Install Memesan.

Ini akan menjadi segalanya untuk pengaturan awal kami. Ayo kode.

chart.ts

File ini berisi semua algoritme dan prosedur yang diperlukan untuk membuat plot kutub, menganimasikannya, dan menyusun data dalam format yang mudah ditafsirkan. awal:

1. Impor file data JSON.Semua data akan dienkapsulasi di dataJson Tujuan:

import dataJson from './data.json'

2. Deklarasikan konstanta lcjs yang akan merujuk pada kami @arction/lcjs perpustakaan:

// Import LightningChartJS
const lcjs = require('@arction/lcjs')

3. Ekstrak kelas yang diperlukan dari lcjs:

const {
    lightningChart,
    Themes
} = lcjs

4. Buat objek grafik.Seluruh objek bagan akan masuk [app] Tujuan.ini [app] metode akan membutuhkan objek data. Kami sudah memiliki objek data (dataJson):

const app = (data) => {
    // Create a polar chart.
    const polar = lightningChart().Polar({
        theme: Themes.darkGold,
    })
        .setTitle('Electromagnetic field strength')

Berikut adalah rincian kodenya:

• setTitle: Label teks yang akan ditampilkan sebagai judul grafik.
• Polar: Tipe plot kutub sudah ada di perpustakaan LC, kita hanya perlu menentukan tipenya sebagai lcjs kelas.
• Theme: Tema memiliki akses ke kumpulan implementasi default. Skema warna komponen harus ditentukan pada waktu pembuatan, dan tidak dapat diubah setelah fakta, tanpa terlebih dahulu menghancurkan komponen dan membuatnya kembali dengan tema warna yang diinginkan.

5. Konfigurasi sumbu:

const radialAxis = polar.getRadialAxis()
    .setTitle('Radial Degrees')

    const amplitudeAxis = polar.getAmplitudeAxis()
        .setTitle('Field strength H (A/m)')

• getRadialAxis: Kita dapat mengakses sumbu radial (dalam derajat) dari plot kutub dengan menggunakan [getRadialAxis] Fungsi. Dalam hal ini, kita dapat mengatur judul sumbu, seperti yang ditunjukkan pada gambar:

catatan: Jika Anda tidak menentukan judul untuk setiap sumbu, judul Derajat dan Amplitudo ditampilkan secara default.

6. Buat rangkaian untuk setiap kumpulan data. Dalam fungsi ini, kami akan membuat rangkaian untuk setiap anggota di file JSON:

const series = data.map(( info ) => {
        const { name } = info
        const polarAreaSeries = polar.addAreaSeries()
            .setName( name )
            .setConnectDataAutomaticallyEnabled(true)
            .setMouseInteractions(false)
            .setCursorResultTableFormatter((builder, series, angleDeg, amplitude, format) => builder
                .addRow(`${series.getName()}`)
                .addRow('Angle', '', `${Math.round(angleDeg)} °`)
                .addRow('Field strength', '', `${format(amplitude)} A/m`)
            )

        return polarAreaSeries
    })

• setConnectionDataAutomaticallyEnabled: Atur apakah akan mengaktifkan koneksi otomatis titik data pertama dan terakhir.
• setMouseInteractions: Mengaktifkan atau menonaktifkan interaksi mouse komponen. Menonaktifkan interaksi mouse berarti objek di bawah komponen dapat berinteraksi dengannya.
• setCursorResultTableFormatter: Mengonfigurasi format kursor ResultTable ketika menunjuk ke seri ini.Sintaks umum untuk konfigurasi ResultTable Pemformatan dibagi antara semua jenis seri.Anda perlu menentukan fungsi callback untuk menerima TableContentBuilderKemudian gunakan metode pembuat tabel untuk menyetel konten tabel.

Nilai tambahan yang diberikan ke fungsi panggilan balik bervariasi tergantung pada jenis bagan. Semua deret kutub menerima tiga argumen tambahan:

1. series: Seri referensi itu sendiri.
2. angleDeg: Sudut dalam derajat menuju titik data.
3. amplitude: Menunjuk ke amplitudo titik data.

7. Gunakan data rangkaian animasi statis acak untuk mensimulasikan data sensor waktu nyata:

let freezeData = false
    const updateData = () => {
        if (! freezeData)
            series.forEach((series, i) => {
                const polarPoints = data[i].data
                const polarPointsWithStatic = polarPoints.map( polarPoint => ({
                    angle: polarPoint.angle,
                    amplitude: polarPoint.amplitude + (Math.random() * 2 - 1) * 0.2
                }))
                series.setData(polarPointsWithStatic)
            })

        requestAnimationFrame(updateData)
    }
    updateData()

8. Bekukan animasi data saat mouse berada di atas bagan:

polar.onSeriesBackgroundMouseEnter(() => {
        freezeData = true
    })
    polar.onSeriesBackgroundMouseLeave(() => {
        freezeData = false
    })

9. Jalankan seluruh proses aplikasi dan tambahkan data JSON sebagai parameter:

mulai npm

Untuk memvisualisasikan aplikasi bagan, jalankan npmstart Visualisasikan grafik dari server lokal Anda di terminal.

kata-kata terakhir

Singkatnya, JavaScript Polar Plots adalah alat yang sangat berharga bagi siapa pun yang ingin merepresentasikan dan menganalisis kumpulan data yang kompleks. Plot kutub memberikan cara yang unik dan intuitif untuk memahami dan membandingkan titik data.

Untuk mendapatkan hasil maksimal dari plot kutub Anda, penting untuk memilih data yang tepat untuk ditampilkan, memformat data dengan tepat, dan menggunakan alat dan pustaka yang tepat untuk membuat dan menyesuaikan bagan Anda.

Untuk membuat plot kutub yang mengomunikasikan data Anda secara efektif, pertimbangkan untuk menggunakan pustaka visualisasi berperforma tinggi.

Keuntungan menggunakan pustaka pembuatan bagan berkinerja tinggi adalah opsi penyesuaian ekstensif tersedia untuk membuat bagan yang memenuhi kebutuhan khusus Anda.

Jika Anda memerlukan bantuan dengan kode, beri komentar pada pertanyaan Anda. Pastikan untuk mengirimkan cuplikan kode atau tangkapan layar apa pun, dengan senang hati saya akan membantu.

Sampai jumpa di artikel selanjutnya!