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

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

Dans le domaine de la visualisation de données, un graphique en entonnoir est un type de graphique courant qui affiche visuellement le processus de flux, de filtrage et de transformation des données. Highcharts est une puissante bibliothèque de graphiques JavaScript qui offre une multitude de types de graphiques et d'options de personnalisation. Cet article explique comment utiliser Highcharts pour créer un graphique en entonnoir et fournit des exemples de code spécifiques.

Tout d'abord, nous devons présenter la bibliothèque Highcharts et les feuilles de style nécessaires. Ajoutez le code suivant en tête du fichier HTML :

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

Ensuite, ajoutez un élément conteneur à la partie corps du fichier HTML pour afficher le funnel chart :

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

Ensuite, créez un objet de configuration Highcharts dans la partie JavaScript et définissez les options associées pour les graphiques en entonnoir. Ce qui suit est un exemple de configuration de base :

var options = {
  chart: {
    type: 'funnel',
    marginRight: 100
  },
  title: {
    text: '漏斗图表示例'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b> ({point.y})',
        connectorColor: 'silver'
      },
      neckWidth: '30%',
      neckHeight: '25%'
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    name: '流失率',
    data: [
      ['浏览量', 5000],
      ['点击量', 4000],
      ['加入购物车', 3000],
      ['下单量', 2000],
      ['支付量', 1000]
    ]
  }]
};

Dans la configuration ci-dessus, nous définissons le type de graphique sur un graphique en entonnoir (« entonnoir »), le titre du graphique (« exemple de graphique en entonnoir ») et les données de l'entonnoir. graphique. Parmi eux, les données sont représentées sous la forme d'un tableau et chaque élément du tableau contient deux valeurs. La première valeur représente le nom de l'étape du processus et la deuxième valeur représente le numéro de l'étape.

Ensuite, nous pouvons utiliser la fonction chart de Highcharts pour dessiner le graphique dans le conteneur spécifié.

Highcharts.chart('container', options);

Ajoutez le code ci-dessus à la section JavaScript pour créer un simple graphique en entonnoir à l'aide de Highcharts.

En plus des options de configuration de base mentionnées ci-dessus, Highcharts propose également une multitude d'options pour personnaliser l'apparence et l'interaction des graphiques en entonnoir. Vous pouvez implémenter ces fonctions personnalisées en modifiant les propriétés de l'objet de configuration.

options.plotOptions.series.dataLabels.format = '<b>{point.name}</b> ({point.y}，{point.percentage:.1f}%)';
options.plotOptions.series.minHeight = '10';
options.legend.enabled = true;

Par exemple, vous pouvez modifier le format des étiquettes de données, afficher le pourcentage de données ; ajuster la hauteur minimale du graphique en entonnoir ; activer les légendes, etc.

Avec les étapes ci-dessus, nous pouvons créer un graphique en entonnoir à l'aide de la bibliothèque Highcharts et le personnaliser en fonction de nos besoins. Highcharts propose également d'autres types et options de graphiques riches, vous pouvez trouver plus d'informations dans la documentation officielle. J'espère que cet article vous sera utile pour apprendre à utiliser Highcharts pour créer des graphiques en entonnoir.

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!