Cara membuat carta sinusoidal menggunakan Highcharts

WBOY
Lepaskan: 2023-12-18 08:44:04
asal
623 orang telah melayarinya

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>
Salin selepas log masuk

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)]);
}
Salin selepas log masuk

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
    }]
});
Salin selepas log masuk

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设置为containerchart属性指定图表类型为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: 🎜



    
    Highcharts正弦曲线图表
    <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>
Salin selepas log masuk
🎜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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan