Cara membuat carta papan pemuka menggunakan Highcharts-tutorial js-php.cn

Cara membuat carta papan pemuka menggunakan Highcharts

PHPz

Lepaskan： 2023-12-17 16:41:12

asal

478 orang telah melayarinya

Cara membuat carta papan pemuka menggunakan Highcharts

Cara menggunakan Highcharts untuk mencipta carta papan pemuka, contoh kod khusus diperlukan

Kata Pengantar:

Carta papan pemuka ialah alat visualisasi data biasa yang memaparkan data dalam bentuk papan pemuka, menjadikan data lebih intuitif dan mudah untuk menggunakan faham. Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyokong pelbagai jenis carta, termasuk carta papan pemuka. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk membuat carta papan pemuka dan memberikan contoh kod khusus.

Langkah 1: Perkenalkan perpustakaan Highcharts

Mula-mula, kita perlu memperkenalkan fail perpustakaan Highcharts ke dalam halaman HTML. Anda boleh memuat turun perpustakaan Highcharts berkualiti tinggi daripada tapak web rasmi (https://www.highcharts.com/), atau gunakan CDN (Rangkaian Penghantaran Kandungan) untuk memperkenalkannya.

Berikut ialah contoh kod:

<!DOCTYPE html>
<html>
<head>
    <title>仪表盘图表示例</title>
    <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="chartContainer" style="width: 400px; height: 300px;"></div>

    <script>
        // 在这里写创建仪表盘图表的代码
    </script>
</body>
</html>

Salin selepas log masuk

Langkah 2: Buat carta papan pemuka

Seterusnya, kita perlu mencipta carta papan pemuka dalam kod JavaScript. Mula-mula, anda perlu mencipta bekas untuk memaparkan carta papan pemuka apabila halaman dimuatkan. Di sini kita akan menggunakan elemen div sebagai bekas dan memberikannya id unik (id di sini ialah "chartContainer").

Kemudian, dalam kod JavaScript, kami mencipta carta papan pemuka menggunakan fungsi carta daripada pustaka Highcharts. chart函数创建一个仪表盘图表。

以下是一个示例代码：

<script>
    $(document).ready(function() {
        // 创建仪表盘图表
        Highcharts.chart('chartContainer', {
            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: '仪表盘示例'
            },
            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },
            // 在这里配置仪表盘的数据
            series: [{
                data: [80],
                dial: {
                    radius: '100%',
                    baseWidth: 10,
                    baseLength: '80%',
                    rearLength: 0
                },
            }]
        });
    });
</script>

Salin selepas log masuk

在上述示例代码中，我们使用了chart函数来创建一个仪表盘图表，指定了图表的type属性为"gauge"，表示创建一个仪表盘类型的图表。

然后，我们可以配置仪表盘图表的标题、仪表盘的背景、仪表盘的数据等属性。在上述示例代码中，我们配置了一个标题为"仪表盘示例"，仪表盘的刻度范围为-150到150，背景为渐变色，数据为80。你可以根据需求进行相应的配置。

步骤3：在页面中显示仪表盘图表

最后，我们需要将创建的仪表盘图表显示在HTML页面中。我们可以在HTML页面的div容器中使用<div id="chartContainer"></div>，并将其替换为上述示例代码中的<div id="chartContainer" style="width: 400px; height: 300px;"></div>

Berikut ialah kod contoh:

rrreee

Dalam kod contoh di atas, kami menggunakan fungsi carta untuk mencipta carta papan pemuka, menyatakan atribut type carta sebagai "tolok" bermaksud mencipta carta jenis papan pemuka.

Kemudian, kita boleh mengkonfigurasi tajuk carta papan pemuka, latar belakang papan pemuka, data papan pemuka dan sifat lain. Dalam kod sampel di atas, kami mengkonfigurasi papan pemuka bertajuk "Contoh Papan Pemuka". Julat skala papan pemuka ialah -150 hingga 150, latar belakang ialah warna kecerunan dan data ialah 80. Anda boleh mengkonfigurasinya dengan sewajarnya mengikut keperluan anda.

Langkah 3: Paparkan carta papan pemuka dalam halaman🎜🎜Akhir sekali, kita perlu memaparkan carta papan pemuka yang dibuat dalam halaman HTML. Kita boleh menggunakan <div id="chartContainer"></div> dalam bekas div halaman HTML dan menggantikannya dengan <div id dalam contoh kod di atas="chartContainer" style="width: 400px; height: 300px;"></div>. 🎜🎜Dengan cara ini, carta papan pemuka yang dibuat akan dipaparkan secara automatik apabila halaman dimuatkan. 🎜🎜Ringkasan: 🎜🎜Mencipta carta papan pemuka menggunakan Highcharts adalah tugas yang sangat mudah. Kami hanya perlu memperkenalkan perpustakaan Highcharts, mencipta bekas untuk memaparkan carta dan mengkonfigurasi sifat dan data carta dalam kod JavaScript. Semoga contoh kod yang disediakan dalam artikel ini akan membantu anda mencipta carta papan pemuka yang cantik dan berkuasa. 🎜

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