Rumah > Artikel > hujung hadapan web > Cara membuat carta papan pemuka menggunakan Highcharts
Cara membuat carta papan pemuka menggunakan Highcharts
- PHPzasal
- 2023-12-17 16:41:12540semak imbas
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>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>在上述示例代码中，我们使用了chart函数来创建一个仪表盘图表，指定了图表的type属性为"gauge"，表示创建一个仪表盘类型的图表。
然后，我们可以配置仪表盘图表的标题、仪表盘的背景、仪表盘的数据等属性。在上述示例代码中，我们配置了一个标题为"仪表盘示例"，仪表盘的刻度范围为-150到150，背景为渐变色，数据为80。你可以根据需求进行相应的配置。
步骤3：在页面中显示仪表盘图表
最后，我们需要将创建的仪表盘图表显示在HTML页面中。我们可以在HTML页面的div容器中使用<div id="chartContainer"></div>，并将其替换为上述示例代码中的<div id="chartContainer" style="width: 400px; height: 300px;"></div>
rrreee
Dalam kod contoh di atas, kami menggunakan fungsicarta 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!