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
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>
Atas ialah kandungan terperinci Cara membuat carta sinusoidal menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!