Comment créer un graphique pyramidal à l'aide de Highcharts-js tutoriel-php.cn

Comment créer un graphique pyramidal à l'aide de Highcharts

王林

Libérer： 2023-12-17 22:18:46

original

1291 Les gens l'ont consulté

Comment créer un graphique pyramidal à laide de Highcharts

Comment utiliser Highcharts pour créer un graphique pyramidal

Introduction :
Le graphique pyramidal est un outil de visualisation utilisé pour afficher les relations hiérarchiques, qui peut présenter visuellement la distribution et la relation proportionnelle des données. Dans l'analyse des données et l'aide à la décision, les graphiques pyramidaux sont souvent utilisés pour représenter les proportions des différents niveaux ou la répartition des groupes. Dans cet article, nous présenterons comment utiliser la bibliothèque Highcharts pour créer des graphiques pyramidaux et donnerons des exemples de code détaillés.

Étape 1 : Présenter la bibliothèque Highcharts
Tout d'abord, nous devons introduire le fichier de la bibliothèque Highcharts en HTML. Cela peut être fait en ajoutant le code suivant dans la balise

<script src="https://code.highcharts.com/highcharts.js"></script>

Copier après la connexion

Étape 2 : Créer un conteneur
En HTML, nous devons créer un élément conteneur pour afficher le graphique pyramidal. Un élément

peut être créé en ajoutant le code suivant :

<div id="container" style="width: 500px; height: 400px;"></div>

Copier après la connexion

Étape 3 : Définir les données
En JavaScript, nous devons définir les données requises pour le graphique pyramidal. Plus précisément, nous devons définir le nom et la valeur des données. Les données peuvent être définies par le code suivant :

var data = [
  {
    name: '第一层级',
    value: 30
  },
  {
    name: '第二层级',
    value: 50
  },
  {
    name: '第三层级',
    value: 70
  }
];

Copier après la connexion

Étape 4 : Créer un graphique pyramidal
En JavaScript, nous pouvons utiliser Highcharts pour créer un graphique pyramidal. Tout d’abord, nous devons créer un objet graphique de base via la méthode Highcharts.chart() et spécifier l’ID de l’élément conteneur. Ensuite, nous pouvons définir les éléments de configuration du graphique via l'attribut options. Un graphique pyramidal peut être créé via le code suivant :

Highcharts.chart('container', {
  chart: {
    type: 'pyramid'
  },
  title: {
    text: '金字塔图表示例'
  },
  series: [{
    name: '金字塔图',
    data: data
  }]
});

Copier après la connexion

Étape 5 : Définir le style et les effets interactifs du graphique pyramidal
Le style et les effets interactifs du graphique pyramidal peuvent être modifiés en définissant les éléments de configuration du graphique. Voici quelques exemples d'éléments de configuration couramment utilisés :

title: {
  text: '金字塔图表示例',
  style: {
    color: '#333',
    fontSize: '18px',
    fontWeight: 'bold'
  }
},
plotOptions: {
  pyramid: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y}%',
      color: '#333'
    }
  }
},
tooltip: {
  formatter: function() {
    return this.point.name + ': ' + this.point.y + '%';
  }
}

Copier après la connexion

Résumé :
Grâce aux étapes ci-dessus, nous pouvons utiliser la bibliothèque Highcharts pour créer un graphique pyramidal et personnaliser le style et les effets interactifs du graphique selon nos besoins. J'espère que cet article pourra aider les lecteurs à mieux utiliser Highcharts pour créer des graphiques pyramidaux et les appliquer aux travaux d'analyse de données et d'aide à la décision.

Lien de référence : https://www.highcharts.com/docs/chart-and-series-types/pyramid-chart

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!