Membuat grafik sebar plot sederhana dalam 2 menit ApexCharts

Saat melakukan banyak penelitian numerik dan pengkodean dalam javascript, menggunakan Numbers/Excel/Matlab untuk visualisasi cepat dari data yang dihasilkan kode menjadi hal yang sulit.

Setelah menjelajahi internet sedikit, kami menemukan proyek sumber terbuka yang luar biasa ApexCharts.

ApexCharts adalah perpustakaan javascript yang mudah diimpor ke halaman HTML Anda.

Ini memiliki berbagai jenis bagan yang berbeda seperti Excel tetapi terlihat lebih baik.

Berikut adalah contoh diagram plot Sebar, dengan sumbu x adalah keliling persegi panjang dan sumbu y adalah luas persegi panjang yang sama.

Grafik dapat dengan mudah disesuaikan dengan data dan konfigurasi baru, edit opsivariabel.

var options = {
          series: [{
          name: "Perimeter vs Area of rectangle",
          data: myData //is a [[1,3],[1,5]] for example
          }],
        chart: {
          height: 700,
          type: 'scatter', //here you define the type of chart
          zoom: {
            enabled: true,
            type: 'xy'
          }
        },
        xaxis: {
          tickAmount: 10, //the resolution of the ticks
          labels: {
            formatter: function(val) {
              return parseFloat(val).toFixed(1)
            }
          }
        },
        yaxis: {
          tickAmount: 7
        },
        title: {
          text: 'Rectangle area and perimeter', //your title
          align: 'left'
        },
    };

Ini halaman HTML lengkapnya, Anda perlu menyertakan file style.css dan perpustakaan itu sendiri (yang tersedia di repo yang disediakan)

Berikut adalah demo javascript vanilla di codeit:

Demo ini menunjukkan plot sebar luas persegi panjang yang dihitung vs kelilingnya. (Jika Anda bertanya-tanya, tidak ada hubungan aljabar antara keduanya :-))



Jalankan KostaMalsev/graphsimple dengan Codeit
Grafik demo: menunjukkan hubungan persegi panjang Perimeter dengan Area cde.run



Ini repo kami di GitHub.