Créer des graphiques de visualisation de données à l'aide de PHP et FusionCharts-tutoriel php-php.cn

Créer des graphiques de visualisation de données à l'aide de PHP et FusionCharts

PHPz

Libérer： 2023-05-11 11:42:01

original

921 Les gens l'ont consulté

À mesure que les entreprises modernes deviennent de plus en plus numériques, le traitement et la visualisation des données deviennent de plus en plus importants. De nombreuses entreprises s'appuient sur la visualisation des données pour comprendre leur activité et prendre des décisions stratégiques. Dans cet article, nous verrons comment créer des graphiques de visualisation de données à l'aide de PHP et FusionCharts.

FusionCharts est un ensemble de bibliothèques JavaScript permettant de créer de superbes graphiques dynamiques et interactifs. Il prend en charge de nombreux types de graphiques, notamment les graphiques linéaires, les diagrammes circulaires, les graphiques à barres, les graphiques à nuages de points, etc. FusionCharts fournit de nombreuses fonctionnalités, telles que des mises à jour dynamiques et des réactions en temps réel, pour aider les utilisateurs à mieux comprendre les données.

Dans l'exemple de cet article, nous allons créer un simple histogramme pour afficher les données de ventes des entreprises A, B, C et D. Nous utiliserons PHP pour générer des données graphiques, puis utiliserons FusionCharts pour les visualiser.

Avant de commencer, nous devons installer les bibliothèques PHP et FusionCharts et préparer nos données. Nous pouvons créer un fichier PHP appelé data.php pour générer nos données. Dans ce fichier, nous allons créer un tableau pour stocker les données de ventes.

<?php
$sales = array(
    array("name" => "Company A", "sales" => 25000),
    array("name" => "Company B", "sales" => 35000),
    array("name" => "Company C", "sales" => 45000),
    array("name" => "Company D", "sales" => 55000)
);
echo json_encode($sales);
?>

Copier après la connexion

Dans cet exemple, nous créons un tableau appelé $sales qui contient 4 tableaux, chacun représentant une entreprise et ses ventes. Nous utilisons la fonction json_encode() pour convertir les données au format JSON pour une utilisation en JavaScript.

Ensuite, nous devons préparer une page HTML pour présenter le graphique. Nous pouvons créer un fichier appelé index.html et y inclure la bibliothèque FusionCharts et notre code JavaScript. Nous devons également créer un élément div vide dans cette page afin que notre graphique puisse y être dessiné.

<!DOCTYPE html>
<html>

<head>
  <title>FusionCharts Example</title>
  <script src="fusioncharts.js"></script>
</head>

<body>
  <div id="chart-container"></div>

  <script>
    FusionCharts.ready(function() {
      var salesChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '100%',
        height: '500',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "caption": "Sales Data",
            "xAxisName": "Company",
            "yAxisName": "Sales",
            "theme": "fusion"
          },
          "data": []
        }
      });

      var dataSource = {
        "chart": {},
        "data": []
      };

      // AJAX request to get the data from data.php
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          dataSource.data = JSON.parse(this.responseText);

          salesChart.setChartData(dataSource);
        }
      };
      xhttp.open("GET", "data.php", true);
      xhttp.send();
    });
  </script>
</body>

</html>

Copier après la connexion

Dans cet exemple, nous créons un objet FusionCharts appelé salesChart et définissons le type de graphique sur column2d (graphique à colonnes). Nous définissons également la largeur, la hauteur, les noms des axes x et y et le thème du graphique. Nous avons également créé un objet JavaScript appelé dataSource qui contient les données de ventes obtenues à partir de data.php.

Dans notre code JavaScript, nous utilisons l'objet XMLHttpRequest pour effectuer une requête HTTP GET afin d'obtenir des données de data.php. Une fois que nous avons les données, nous définissons les données sur la propriété data de l'objet dataSource et utilisons la méthode setChartData() pour appliquer les données à notre graphique.

Maintenant, si nous ouvrons le fichier index.html dans un navigateur, nous verrons un joli graphique à barres montrant les données de ventes des entreprises A, B, C et D.

Pour résumer, nous avons appris à créer des graphiques de visualisation de données en utilisant PHP et la bibliothèque FusionCharts. En découvrant comment utiliser ces outils pour créer de superbes graphiques interactifs, nous pouvons mieux comprendre nos données et prendre de meilleures décisions.

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!