Comment utiliser des graphiques à barres pour afficher des données dans Highcharts-js tutoriel-php.cn

Comment utiliser des graphiques à barres pour afficher des données dans Highcharts

王林

Libérer： 2023-12-17 21:06:47

original

1157 Les gens l'ont consulté

Comment utiliser des graphiques à barres pour afficher des données dans Highcharts

Highcharts est une bibliothèque de visualisation de données puissante, flexible et facile à utiliser qui peut être utilisée pour créer une variété de graphiques interactifs sur des pages Web. Parmi eux, les graphiques à barres constituent une forme courante d'affichage de données qui permet de comparer clairement la taille des données dans différentes catégories. Cet article explique comment utiliser Highcharts pour créer des graphiques à barres et fournit des exemples de code spécifiques.

Étape 1 : Préparer le fichier HTML
Tout d'abord, vous devez introduire le fichier de la bibliothèque Highcharts dans le fichier HTML. Les Highcharts peuvent être introduits par téléchargement ou directement en utilisant CDN. Voici le code de structure de base d'un simple fichier HTML :

<!DOCTYPE html>
<html>
<head>
  <title>使用条形图展示数据</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
  <script src="app.js"></script>
</body>
</html>

Copier après la connexion

Étape 2 : Écrire du code JavaScript
Ensuite, vous devez écrire du code JavaScript pour définir la configuration et les données du graphique à barres. Créez un fichier appelé app.js et écrivez-y le code suivant :

// 定义数据
var data = [
  {
    name: '类别一',
    value: 10
  },
  {
    name: '类别二',
    value: 20
  },
  {
    name: '类别三',
    value: 30
  }
];

// 创建条形图的配置
var options = {
  chart: {
    type: 'column'
  },
  title: {
    text: '条形图示例'
  },
  xAxis: {
    categories: data.map(item => item.name)
  },
  yAxis: {
    title: {
      text: '数值'
    }
  },
  series: [{
    name: '数据',
    data: data.map(item => item.value)
  }]
};

// 创建条形图
Highcharts.chart('container', options);

Copier après la connexion

Dans le code ci-dessus, un tableau contenant des données est d'abord défini. Chaque élément de données contient un nom et une valeur. Ensuite, un objet de configuration nommé options est créé, qui spécifie diverses propriétés du graphique à barres, telles que le type de graphique, le titre, les axes X et Y, etc. Enfin, utilisez la méthode Highcharts.chart pour afficher le graphique dans l'élément div avec le conteneur id.

Étape 3 : Exécutez le fichier HTML
Après avoir terminé les deux premières étapes de préparation, exécutez le fichier HTML dans le navigateur pour voir l'effet d'affichage du graphique à barres. Le graphique sera rendu en fonction des données que nous avons définies dans le code JavaScript.

Résumé :
Cet article explique comment utiliser Highcharts pour créer des graphiques à barres et fournit des exemples de code spécifiques. Dans les applications réelles, le code ci-dessus peut être utilisé comme base et modifié et étendu en conséquence en fonction des besoins réels. Les fonctions puissantes et les options de configuration flexibles de Highcharts nous permettent de créer facilement une variété de superbes graphiques pour afficher et analyser les données.

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!