Intégration de PHP et Highcharts pour réaliser l'affichage de visualisation de graphiques

Avec l'avènement de l'ère des données, la visualisation des données est devenue le centre d'intérêt de nombreuses entreprises et développeurs. Pour de nombreux développeurs, la mise en œuvre de la visualisation de données n’est pas une tâche facile. Cependant, avec l’intégration de PHP et Highcharts, la visualisation de graphiques deviendra un jeu d’enfant.

PHP est un langage de programmation populaire largement utilisé dans le domaine du développement Web. Highcharts est une bibliothèque de graphiques écrite en JavaScript qui peut facilement créer différents types de graphiques, tels que des histogrammes, des courbes, des secteurs, etc.

Ensuite, nous présenterons comment intégrer PHP et Highcharts et réaliser la visualisation de graphiques.

Étape 1 : Téléchargez Highcharts

Tout d'abord, vous devez télécharger la bibliothèque Highcharts. Le site officiel propose deux versions, l'une est la version open source et l'autre est la version commerciale autorisée. Si vous avez besoin d'une version sous licence commerciale, veuillez acheter la licence correspondante.

Une fois le téléchargement terminé, décompressez Highcharts dans un dossier sur votre serveur Web et assurez-vous que votre dossier dispose des autorisations appropriées.

Étape 2 : Préparez les données

Avant de commencer à créer le graphique, vous devez préparer vos données. Les données peuvent provenir de n'importe quelle source de données, telle que des bases de données, des fichiers CSV, etc.

Pour les exemples de cet article, nous utiliserons un tableau PHP comme source de données. Voici le tableau que nous utiliserons :

$data = array(

array('name' => 'Firefox', 'y' => 45.0),
array('name' => 'IE', 'y' => 26.8),
array('name' => 'Chrome', 'y' => 12.8),
array('name' => 'Safari', 'y' => 8.5),
array('name' => 'Opera', 'y' => 6.2),
array('name' => 'Others', 'y' => 0.7)

);

Étape 3 : Créer une page HTML#🎜🎜 #

Maintenant, nous allons créer une page HTML et intégrer les fichiers de la bibliothèque Highcharts et le code JavaScript requis pour créer des graphiques. Voici le code HTML de l'exemple :

aba7b36f87decd50b18c7e3e3c150106

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>Highcharts Integration with PHP</title>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>

8d3143fa4a29bec0bfaf8355f4e20860

<div id="container" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
    var data = <?php echo json_encode($data); ?>;
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market share, January, 2018 to May, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: data
        }]
    });
</script>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Dans cet exemple, nous attribuons les données vers une variable JavaScript, puis utilisez la fonction Highcharts.chart() pour créer un graphique.

Dans le code ci-dessus, nous définissons également plusieurs paramètres supplémentaires, tels que le titre, la couleur, l'invite de survol de la souris, etc.

Les paramètres spécifiques peuvent être modifiés selon vos besoins.

Étape 4 : Exécutez le code

Maintenant, nous sommes prêts à intégrer PHP et Highcharts et à créer des graphiques pour afficher vos données. Enregistrez le code HTML sous forme de fichier .php et téléchargez le fichier sur le serveur.

Vous pouvez maintenant ouvrir le fichier dans votre navigateur et voir vos données représentées sous forme de graphique !

Résumé

Grâce à l'intégration de PHP et Highcharts, vous pouvez facilement visualiser des données sans maîtriser le développement JavaScript. Cette intégration est facile à démarrer mais suffisamment flexible pour vous permettre de créer une variété de types de graphiques.

Dans les applications réelles, vous pouvez choisir d'obtenir des données à partir de n'importe quelle source de données et de les afficher sous forme de graphiques pour vous aider à comprendre et analyser les données plus clairement.

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!