Cara membuat carta sinusoidal menggunakan Highcharts

Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan perpustakaan API yang kaya dan pilihan konfigurasi yang fleksibel untuk mencipta pelbagai jenis carta dengan mudah.

Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta sinusoidal dan memberikan contoh kod khusus.

Langkah 1: Buat halaman HTML dan perkenalkan perpustakaan Highcharts

Mula-mula kita perlu mencipta halaman HTML dan memperkenalkan perpustakaan Highcharts. Anda boleh mengimport fail perpustakaan dengan cara berikut:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

Langkah 2: Tetapkan data lengkung

Seterusnya, kita perlu menyediakan satu set data untuk melukis lengkung sinus. Dalam contoh ini, kami menggunakan kod berikut untuk menjana data lengkung:

var data = [];

for (var i = 0; i < 360; i++) {
    data.push([i, Math.sin(i * Math.PI / 180)]);
}

Langkah 3: Lukis carta lengkung

Sekarang kami mempunyai data sedia, kita boleh mula melukis carta lengkung. Dalam Highcharts, kita boleh mencipta carta lengkung asas menggunakan kod berikut:

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: '正弦曲线图表'
    },
    xAxis: {
        title: {
            text: '角度'
        }
    },
    yAxis: {
        title: {
            text: '值'
        },
        min: -1,
        max: 1
    },
    series: [{
        name: '正弦曲线',
        data: data
    }]
});

Dalam kod di atas, kita mencipta carta lengkung asas menggunakan fungsi Highcharts.chart. Kami menetapkan ID kawasan lukisan kepada bekas. Atribut cart menentukan jenis carta sebagai spline, iaitu carta lengkung. Atribut title menetapkan tajuk carta kepada "Carta Lengkung Sinus". Highcharts.chart函数创建了一个基本的曲线图表。我们将绘图区域的ID设置为container。chart属性指定图表类型为spline，即曲线图表。title属性设置图表标题为“正弦曲线图表”。

在xAxis中，我们定义了X轴的标题为“角度”。

在yAxis中，我们定义了Y轴的标题为“值”，同时将Y轴的最小值设置为-1，最大值设置为1。

最后，我们使用series属性将数据集添加到曲线图表中。数据集的名称为“正弦曲线”，数据为上一步中生成的data

Dalam xAxis, kami mentakrifkan tajuk paksi-X sebagai "Sudut".

Dalam yAxis, kami mentakrifkan tajuk paksi-Y sebagai "nilai", dan menetapkan nilai minimum paksi-Y kepada -1 dan nilai maksimum kepada 1.

Akhir sekali, kami menggunakan atribut siri untuk menambah set data pada carta lengkung. Nama set data ialah "Sine Curve", dan data ialah tatasusunan data yang dijana dalam langkah sebelumnya. 🎜🎜Kod lengkap adalah seperti berikut: 🎜

    
    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


    

    <script>
        var data = [];

        for (var i = 0; i < 360; i++) {
            data.push([i, Math.sin(i * Math.PI / 180)]);
        }

        Highcharts.chart('container', {
            chart: {
                type: 'spline'
            },
            title: {
                text: '正弦曲线图表'
            },
            xAxis: {
                title: {
                    text: '角度'
                }
            },
            yAxis: {
                title: {
                    text: '值'
                },
                min: -1,
                max: 1
            },
            series: [{
                name: '正弦曲线',
                data: data
            }]
        });
    </script>

🎜Kini anda telah berjaya mencipta carta sinusoidal yang mudah! 🎜

Atas ialah kandungan terperinci Cara membuat carta sinusoidal menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!