Cara membuat carta berskala menggunakan Highcharts

Cara membuat carta berskala dengan Highcharts

Ikhtisar:
Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang boleh digunakan untuk mencipta pelbagai carta interaktif dalam tapak web atau aplikasi. Dalam artikel ini, kami akan menumpukan pada cara membuat carta berskala menggunakan Highcharts. Carta boleh zum bermakna pengguna boleh menggunakan gerak isyarat atau klik untuk mengezum masuk atau keluar daripada carta untuk melihat data dengan lebih terperinci atau pada tahap yang lebih umum. Kami akan menggunakan kod sampel untuk menggambarkan cara menyediakan dan menggunakan perpustakaan Highcharts untuk mencapai fungsi ini.

Langkah:

1. Perkenalkan perpustakaan Highcharts
   Pertama, kita perlu memperkenalkan perpustakaan Highcharts ke dalam halaman HTML. Anda boleh memuat turun perpustakaan Highcharts daripada tapak web rasmi Highcharts, dan kemudian memperkenalkannya ke dalam teg

   anda juga perlu memperkenalkan modul eksport:

   <script src="https://code.highcharts.com/highcharts.js"></script>

Buat bekas
2. Seterusnya, kita perlu mencipta bekas dalam halaman HTML untuk meletakkan carta. Bekas kosong dengan ID unik boleh dibuat menggunakan elemen
   :

   <script src="https://code.highcharts.com/modules/exporting.js"></script>

   
   

   Tetapkan konfigurasi carta
Dalam JavaScript, kami perlu menyediakan beberapa pilihan konfigurasi untuk carta Highcharts. Kod sampel berikut menunjukkan cara untuk menetapkan konfigurasi carta dan mencipta carta garis berskala mudah:
3. 
   

   <div id="chart-container"></div>

Dalam kod sampel di atas, kami menetapkan jenis carta kepada carta garis dan menghidupkan penskalaan paksi-x. Data carta terletak dalam tatasusunan data di bawah siri.

Tambah fungsi zum gerak isyarat
4. Carta tinggi menyediakan modul yang dipanggil "mobile.js", yang boleh menyokong fungsi zum isyarat pada peranti mudah alih. Kami hanya perlu memperkenalkan modul ini apabila memperkenalkan perpustakaan Highcharts untuk mendayakan fungsi zum gerak isyarat:

   // 设置图表配置
   var options = {
     chart: {
       type: 'line',
       zoomType: 'x',  // 开启x轴缩放
     },
     title: {
       text: '可缩放折线图'
     },
     xAxis: {
       type: 'datetime'  // x轴类型为日期时间
     },
     yAxis: {
       title: {
         text: '值'
       }
     },
     series: [{
       data: [5, 10, 15, 20, 25]  // 图表数据
     }]
   };
   
   // 创建图表
   Highcharts.chart('chart-container', options);

   
   Selepas pengenalan, Highcharts akan secara automatik mengesan jenis peranti yang diakses dan mendayakan fungsi interaktif yang sepadan.

Pilihan penskalaan tersuai
5. Selain fungsi penskalaan paksi x lalai, Highcharts juga membenarkan kami menyesuaikan pilihan penskalaan. Dengan mengubah suai sifat minRange dan maxRange objek xAxis dalam pilihan, anda boleh menetapkan nilai julat minimum dan maksimum untuk penskalaan paksi-x. Sebagai contoh, jika kita ingin mengehadkan zum paksi-x kepada antara 1 jam dan 30 hari, kita boleh menambah kod berikut:

   <script src="https://code.highcharts.com/modules/mobile.js"></script>

   
   Selepas menetapkan ini, apabila pengguna melakukan operasi zum pada carta, julat paksi-x akan dihadkan kepada yang dinyatakan dalam julat.

Ringkasan:

Dengan langkah di atas, kita boleh mencipta carta berskala menggunakan Highcharts. Pertama, kita perlu memperkenalkan perpustakaan Highcharts dan mencipta bekas untuk menyimpan carta. Kemudian, tetapkan pilihan konfigurasi carta mengikut keperluan anda, termasuk jenis carta, tetapan paksi-x dan paksi-y serta data carta. Seterusnya, modul mobile.js boleh diperkenalkan untuk mendayakan fungsi zum gerak isyarat pada peranti mudah alih. Akhir sekali, pilihan konfigurasi tersuai membolehkan kami mengawal lebih lanjut butiran tingkah laku penskalaan. Saya harap artikel ini membantu anda membuat carta berskala dengan Highcharts!

Kod ialah kunci untuk menguasai kemahiran, jadi adalah disyorkan bahawa selepas memahami pengetahuan teori, anda cuba menggunakan Highcharts untuk mencipta carta berskala sendiri untuk hasil pembelajaran yang lebih baik.

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