Comment créer une carte thermique à l'aide de Highcharts

Highcharts est une bibliothèque de graphiques JavaScript très populaire qui peut être utilisée pour créer différents types de graphiques, y compris des cartes thermiques. Les cartes thermiques sont un type de graphique qui représente la densité des données et sont largement utilisées dans la visualisation des données. Cet article explique comment utiliser Highcharts pour créer des cartes thermiques et fournit des exemples de code spécifiques.

1. Préparer les données

Tout d'abord, nous devons préparer quelques données pour créer la carte thermique. Les cartes thermiques sont basées sur des données bidimensionnelles, où chaque point de données possède une coordonnée X et Y et une valeur qui représente la densité de ce point. Les données sont généralement fournies au format JSON, tel que :

var data = [
  [0, 0, 10],
  [0, 1, 19],
  [0, 2, 8],
  [0, 3, 24],
  [0, 4, 67],
  ...
];

où la première colonne représente la coordonnée de l'axe X, la deuxième colonne représente la coordonnée de l'axe Y et la troisième colonne représente la valeur de densité.

Nous devons également déterminer les étiquettes pour l'axe X et l'axe Y, ainsi que le titre de la carte thermique.

2. Créer un conteneur de graphiques

Ensuite, nous devons créer un conteneur dans le document HTML pour placer notre carte thermique. Cela peut être fait en utilisant un élément div :

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

3. Présentation de la bibliothèque Highcharts

Nous devons introduire la bibliothèque Highcharts dans le document HTML, ce qui peut être réalisé de la manière suivante :

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

Si nous voulons utiliser l'élément div Module Heatmap pour créer des heatmaps, nous avons également besoin de Présentation du module Heatmap :

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

4. Configuration des options du graphique

Ensuite, nous devons configurer les options dans l'objet Highcharts pour lui indiquer comment restituer notre heatmap. Ces options sont définies comme un objet JavaScript appelé « objet d'options ». Voici un objet d'options de base :

var options = {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  title: {
    text: 'My Heatmap'
  },
  xAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'X Axis'
    }
  },
  yAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'Y Axis'
    }
  },
  colorAxis: {
    min: 0,
    max: 100,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: 'My Data',
    borderWidth: 1,
    data: data,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
};

Certaines des options clés de l'objet d'options ci-dessus sont expliquées ci-dessous :

• chart : Cette option indique à Highcharts que nous voulons créer une carte thermique et spécifier la largeur de la bordure et les marges de la carte thermique. .
• titre : Cette option précise le titre de la carte thermique.
• xAxis et yAxis : ces options définissent les étiquettes pour les axes X et Y.
• colorAxis : Cette option définit la plage et la couleur de l'axe des couleurs.
• series : Cette option définit les données de la carte thermique.

5. Create Chart

Maintenant, nous pouvons utiliser la méthode chart() dans l'objet Highcharts pour créer une carte thermique. Cette méthode nécessite deux paramètres : l'ID du conteneur et l'objet options. Voici un exemple de code :

var chart = Highcharts.chart('container', options);

6. Dessiner une carte thermique

Enfin, nous devons appeler la méthode redraw() de l'objet graphique pour dessiner une carte thermique, comme indiqué ci-dessous :

chart.redraw();

À ce stade, nous avons terminé la création à l'aide du processus Highcharts Heatmap.

L'exemple de code complet est le suivant :

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

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

<script>
  var data = [
    [0, 0, 10],
    [0, 1, 19],
    [0, 2, 8],
    [0, 3, 24],
    [0, 4, 67],
    ...
  ];

  var options = {
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },
    title: {
      text: 'My Heatmap'
    },
    xAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'X Axis'
      }
    },
    yAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'Y Axis'
      }
    },
    colorAxis: {
      min: 0,
      max: 100,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
      name: 'My Data',
      borderWidth: 1,
      data: data,
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }]
  };

  var chart = Highcharts.chart('container', options);
  chart.redraw();
</script>

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!