Maison > développement back-end > tutoriel php > Intégration de PHP et Highcharts pour réaliser l'affichage de visualisation de graphiques

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

王林
Libérer: 2023-06-25 13:52:02
original
1119 Les gens l'ont consulté

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)
Copier après la connexion

);

É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 :



<title>Highcharts Integration with PHP</title>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>
Copier après la connexion

< /head> ;


<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>
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal