Comment utiliser des graphiques à colonnes et à compartiments pour afficher des données dans Highcharts

Comment utiliser les graphiques à colonnes et à compartiments pour afficher des données dans Highcharts

Le graphique à colonnes et à compartiments est un type de graphique de visualisation de données couramment utilisé dans Highcharts, qui peut afficher visuellement différentes catégories de données et comparer leurs tailles. Cet article explique comment utiliser Highcharts pour créer un graphique à colonnes et à compartiments, et fournit des exemples de code détaillés.

Tout d'abord, nous devons présenter la bibliothèque Highcharts et les fichiers de dépendances associés. Les fichiers de bibliothèque peuvent être téléchargés depuis le site officiel de Highcharts (www.highcharts.com) et introduits dans des fichiers HTML. Nous devons également introduire JQuery car la bibliothèque Highcharts dépend de JQuery.

Ensuite, nous devons créer un conteneur HTML pour afficher le graphique à colonnes et à compartiments. Vous pouvez utiliser un élément div et lui attribuer un attribut id unique, comme indiqué ci-dessous :

<div id="container"></div>

Ensuite, nous devons préparer les données à afficher dans le graphique à colonnes et à compartiments. Les données peuvent être statiques ou obtenues dynamiquement à partir du serveur. Ici, nous supposons que nous avons les données suivantes :

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
  { name: 'D', value: 25 }
];

Ensuite, nous pouvons utiliser Highcharts pour créer un graphique à colonnes et à compartiments. Tout d’abord, nous devons définir les options de configuration du graphique, notamment le type de graphique, le titre, les étiquettes des axes X et Y, etc. Nous devons ensuite transmettre les données au graphique et créer le graphique avec les options de configuration du graphique comme paramètres. Le code spécifique est le suivant :

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '柱桶图'
    },
    xAxis: {
      categories: data.map(function(item) {
        return item.name;
      })
    },
    yAxis: {
      title: {
        text: '数值'
      }
    },
    series: [{
      name: '数值',
      data: data.map(function(item) {
        return item.value;
      })
    }]
  });
});

Dans le code ci-dessus, nous utilisons la méthode graphique de Highcharts pour créer un graphique à colonnes et à compartiments. Parmi eux, l'attribut chart spécifie le type de graphique sous forme de colonnes (graphique à barres), l'attribut title spécifie le titre du graphique comme "graphique à colonnes et à compartiments", l'attribut xAxis spécifie l'étiquette de l'axe X comme attribut de nom. dans les données, et l'attribut yAxis spécifie l'étiquette de l'axe Y comme "valeur numérique". L'attribut series spécifie la série de données du graphique, où l'attribut name spécifie le nom de la série de données comme « valeur » et l'attribut data spécifie la valeur spécifique de la série de données comme attribut de valeur dans les données.

Enfin, nous définissons le premier paramètre de la méthode Highcharts.chart sur l'identifiant du conteneur HTML précédemment créé pour restituer le graphique dans ce conteneur.

Après avoir terminé les étapes ci-dessus, nous pouvons exécuter le code dans le navigateur et voir un graphique à colonnes et à compartiments dans le conteneur HTML pour afficher 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!