Maison >interface Web >js tutoriel >Comment créer des graphiques de tableau de bord à l'aide de Highcharts
Comment créer des graphiques de tableau de bord à l'aide de Highcharts
- PHPzoriginal
- 2023-12-17 16:41:12547parcourir
Comment utiliser Highcharts pour créer un tableau de bord, des exemples de code spécifiques sont requis
Avant-propos :
Le tableau de bord est un outil courant de visualisation de données qui affiche les données sous la forme d'un tableau de bord, ce qui rend les données plus intuitives et plus faciles utiliser comprendre. Highcharts est une puissante bibliothèque de graphiques JavaScript qui prend en charge plusieurs types de graphiques, y compris les graphiques de tableau de bord. Cet article explique comment utiliser Highcharts pour créer des graphiques de tableau de bord et fournit des exemples de code spécifiques.
Étape 1 : Présenter la bibliothèque Highcharts
Tout d'abord, nous devons introduire le fichier de la bibliothèque Highcharts dans la page HTML. Vous pouvez télécharger la bibliothèque Highcharts de haute qualité sur le site officiel (https://www.highcharts.com/) ou utiliser un CDN (Content Delivery Network) pour la présenter.
Voici un exemple de code :
<!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>Étape 2 : Créer un tableau de bord
Ensuite, nous devons créer un tableau de bord en code JavaScript. Tout d’abord, vous devez créer un conteneur pour afficher le graphique du tableau de bord lorsque la page est chargée. Ici, nous allons utiliser un élément div comme conteneur et lui donner un identifiant unique (l'identifiant ici est "chartContainer").
Ensuite, dans le code JavaScript, nous créons un tableau de bord en utilisant la fonction chart de la bibliothèque 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
Dans l'exemple de code ci-dessus, nous utilisons la fonctionchart pour créer un tableau de bord, en spécifiant l'attribut type du graphique. car « jauge » signifie créer un graphique de type tableau de bord. Ensuite, nous pouvons configurer le titre du graphique du tableau de bord, l'arrière-plan du tableau de bord, les données du tableau de bord et d'autres propriétés. Dans l'exemple de code ci-dessus, nous avons configuré un tableau de bord intitulé « Exemple de tableau de bord ». La plage d'échelle du tableau de bord est de -150 à 150, l'arrière-plan est une couleur dégradée et les données sont de 80. Vous pouvez le configurer en conséquence selon vos besoins. Étape 3 : Afficher le graphique du tableau de bord dans la page🎜🎜Enfin, nous devons afficher le graphique du tableau de bord créé dans la page HTML. Nous pouvons utiliser <div id="chartContainer"></div> dans le conteneur div de la page HTML et le remplacer par le <div id dans l de code ci-dessus.="chartContainer" style="largeur : 400 px ; hauteur : 300 px;"></div>. 🎜🎜De cette façon, le graphique du tableau de bord créé sera automatiquement affiché lors du chargement de la page. 🎜🎜Résumé : 🎜🎜Créer des graphiques de tableau de bord à l'aide de Highcharts est une tâche très simple. Il suffit d'introduire la bibliothèque Highcharts, de créer un conteneur pour afficher le graphique et de configurer les propriétés et les données du graphique en code JavaScript. Espérons que les exemples de code fournis dans cet article vous aideront à créer des tableaux de bord magnifiques et puissants. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!