Cara menggunakan plot fungsi trigonometri untuk memaparkan data dalam Highcharts-tutorial js-php.cn

Cara menggunakan plot fungsi trigonometri untuk memaparkan data dalam Highcharts

WBOY

Lepaskan： 2023-12-17 14:27:47

asal

1740 orang telah melayarinya

Cara menggunakan plot fungsi trigonometri untuk memaparkan data dalam Highcharts

Cara menggunakan carta fungsi trigonometri untuk memaparkan data dalam Highcharts

Highcharts ialah perpustakaan carta berasaskan JavaScript yang berkuasa yang boleh membantu pembangun mencipta pelbagai jenis carta dinamik dengan cepat. Antaranya, carta fungsi trigonometri adalah salah satu jenis carta biasa, yang boleh dilukis berdasarkan data dan fungsi yang diberikan.

Artikel ini akan memperkenalkan cara menggunakan carta fungsi trigonometri untuk memaparkan data dalam Carta Tinggi dan memberikan contoh kod khusus.

Pertama, kita perlu memperkenalkan pustaka Highcharts dan jQuery ke dalam fail HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 600px; height: 400px;"></div>
</body>
</html>

Salin selepas log masuk

Seterusnya, kita perlu menentukan beberapa data untuk paparan. Dengan mengandaikan kita ingin memaparkan carta fungsi sinus, kita boleh menentukan data menggunakan kod berikut:

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

Salin selepas log masuk

Kemudian, kita boleh menggunakan pilihan konfigurasi Highcharts untuk mencipta carta. Berikut ialah contoh kod untuk mencipta graf fungsi trigonometri:

$(function() {
    Highcharts.chart('container', {
        title: {
            text: '三角函数图'
        },
        xAxis: {
            title: {
                text: '角度'
            }
        },
        yAxis: {
            title: {
                text: '值'
            }
        },
        series: [{
            name: '正弦函数',
            data: data,
            type: 'line'
        }]
    });
});

Salin selepas log masuk

Akhir sekali, kami meletakkan kod di atas di penghujung tag <script>标签中，并将其放置在HTML文件的<body>:

<script>
    // 在这里插入代码
</script>

Salin selepas log masuk

Sekarang, jika kami menyegarkan penyemak imbas, kami dapat melihat graf fungsi trigonometri yang menunjukkan fungsi sinus.

Melalui contoh kod di atas, kita dapat melihat dengan jelas cara menggunakan carta fungsi trigonometri untuk memaparkan data dalam Highcharts. Sudah tentu, ini hanyalah contoh mudah, anda boleh menyesuaikan data dan fungsi untuk mencipta carta fungsi trigonometri yang berbeza mengikut keperluan anda.

Dalam aplikasi sebenar, anda juga boleh menukar gaya carta, menambah lebih banyak siri data, menambah legenda, dsb. Highcharts menyediakan pelbagai pilihan konfigurasi dan API untuk membantu anda mencapai keperluan yang lebih diperibadikan.

Saya harap artikel ini akan membantu anda memahami cara menggunakan carta fungsi trigonometri untuk memaparkan data dalam Highcharts!

Atas ialah kandungan terperinci Cara menggunakan plot fungsi trigonometri untuk memaparkan data dalam Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!