Cara menggunakan carta 3D untuk memaparkan data dalam Highcharts

Highcharts ialah perpustakaan carta JavaScript yang sangat popular yang menyediakan pelbagai jenis carta, termasuk carta 3D. Artikel ini akan memperkenalkan secara terperinci cara menggunakan carta 3D untuk memaparkan data dalam Highcharts dan memberikan contoh kod khusus.

1. Memperkenalkan perpustakaan Highcharts

Pertama, kita perlu memperkenalkan perpustakaan Highcharts ke dalam fail HTML. Ini boleh dicapai dengan cara berikut:

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

2. Sediakan data

Kita perlu menyediakan beberapa data untuk dipaparkan dalam carta 3D. Data ini biasanya objek JavaScript yang terdiri daripada tatasusunan. Contohnya:

var data = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [{
       name: 'Tokyo',
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
       name: 'New York',
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, {
       name: 'Berlin',
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, {
       name: 'London',
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }]
};

Objek ini mengandungi 4 siri data yang berbeza, setiap siri termasuk nama dan tatasusunan, setiap elemen dalam tatasusunan mewakili titik data.

3. Buat Carta 3D

Seterusnya, kita boleh buat carta 3D. Pertama, kita perlu memutuskan jenis carta yang ingin kita buat. Highcharts menyediakan beberapa jenis carta 3D yang berbeza, termasuk carta lajur 3D, carta serakan 3D, carta silinder 3D dan peta 3D. Dalam artikel ini, kami akan mencipta carta lajur 3D dengan kod berikut:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: data.categories
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: data.series
});

Mula-mula, kami mentakrifkan div bernama "bekas" dalam dokumen HTML, yang akan mengandungi carta yang kami buat.

Kemudian, kami menggunakan kaedah Highcharts.chart() untuk mencipta carta. Dalam pilihan carta, kami menetapkan jenis kepada "lajur", yang bermaksud kami akan membuat carta lajur. Kami juga menetapkan pilihan options3d, mendayakan fungsi 3D dan menetapkan beberapa parameter 3D seperti sudut alfa dan beta, kedalaman dan banyak lagi.

Kami juga menentukan beberapa pilihan tajuk dan paksi, serta pilihan lajur dalam plotOptions untuk menetapkan kedalaman carta lajur.

Akhir sekali, kami menentukan siri data dan menggunakan objek data yang ditakrifkan sebelum ini untuk menetapkan nama dan data setiap siri.

4. Jalankan Kod

Kini kami mempunyai kod sedia dan boleh menjalankannya dalam penyemak imbas. Apabila kami memuatkan fail HTML dan melihat graf, kami akan melihat carta lajur 3D yang akan menunjukkan purata suhu untuk setiap bulan menggunakan data yang kami takrifkan sebelum ini.

Contoh kod boleh dilihat dalam repositori kod berikut:

https://github.com/Jackie199199/Highcharts-3D-Demo

Summary

Highcharts ialah perpustakaan carta JavaScript yang sangat berkuasa yang menyediakan pelbagai jenis carta JavaScript jenis dan ciri, termasuk carta 3D. Dalam artikel ini, kami menerangkan cara membuat carta 3D dalam Highcharts dan memberikan contoh kod konkrit. Jika anda ingin menambah visualisasi data interaktif berkualiti tinggi pada halaman web atau aplikasi anda, Highcharts mungkin merupakan salah satu pilihan terbaik anda.

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