Utilisez PHP pour réaliser la visualisation de données : Chart.js, Highcharts et autres bibliothèques

La visualisation des données joue un rôle de plus en plus important dans le traitement et l'analyse traditionnels des données, c'est pourquoi de plus en plus de data scientists et d'analystes commerciaux choisissent d'utiliser des graphiques visuels pour afficher les données. En tant que langage back-end puissant, PHP peut également profiter de son excellente évolutivité et de ses fonctionnalités de construction simples pour intégrer rapidement des composants de visualisation de données dans les applications existantes. Il existe désormais de nombreuses bibliothèques de visualisation sur le marché, parmi lesquelles Chart.js et Highcharts sont l'une des bibliothèques les plus populaires. Dans cet article, nous verrons comment les utiliser pour la visualisation de données en PHP.

I. Chart.js

Chart.js est une bibliothèque JavaScript facile à utiliser qui vous permet de dessiner des graphiques interactifs et réactifs à l'aide de l'élément HTML5 Canvas. Il prend en charge sept types de graphiques couramment utilisés (graphiques linéaires, à barres, à secteurs, en anneau, en nuage de points, en radar et polaires), vous permettant de représenter vos données rapidement et avec précision. Chart.js fournit une API simple et pratique pour modifier facilement le contenu, le style et l'interactivité des graphiques. De plus, Chart.js prend également en charge les effets d'animation, rendant les graphiques plus vivants et plus intéressants.

Lorsque Chart.js est intégré à PHP, vous devez générer un script JavaScript dans la fonction de rappel PHP et l'afficher sur la page HTML. Grâce à la couche d'abstraction de données de PHP (telle que PDO, MySQLi), vous pouvez obtenir rapidement et facilement les données et les transmettre à Chart.js pour les tracer. Voici un exemple de code de base de Chart.js :

<?php
// 数据库连接信息，这里以SQLite3为例
$db = new PDO('sqlite:/path/to/database.db');

// 查询数据
$stmt = $db->prepare('SELECT * FROM tablename');
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Chart.js所需的标签和数据
$labels = array();
$values = array();
foreach ($data as $row) {
    $labels[] = $row['label'];
    $values[] = $row['value'];
}

// 构建Chart.js的数据源
$chart_data = array(
    'labels' => $labels,
    'datasets' => array(
        array(
            'label' => 'Chart Data',
            'data' => $values,
            'backgroundColor' => 'rgba(255, 99, 132, 0.5)',
            'borderColor' => 'rgba(255, 99, 132, 1)',
            'borderWidth' => 1,
        ),
    ),
);

// 输出JavaScript代码
echo '<canvas id="myChart"></canvas>';
echo '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>';
echo '<script>';
echo 'var ctx = document.getElementById("myChart").getContext("2d");';
echo 'var myChart = new Chart(ctx, {';
echo '    type: "bar",';
echo '    data: ' . json_encode($chart_data) . ',';
echo '    options: {}';
echo '});';
echo '</script>';
?>

Dans l'exemple ci-dessus, nous interrogeons d'abord les données de la base de données et les convertissons en étiquettes et données requises par Chart.js. Ensuite, nous construisons la source de données de Chart.js et utilisons la commande echo pour afficher le code JavaScript dans la page HTML. Enfin, nous créons un exemple de graphique à barres de base à l'aide de l'API Chart.js.

II. Highcharts

Highcharts est une excellente bibliothèque de graphiques JavaScript qui prend en charge plusieurs types de graphiques (graphiques linéaires, graphiques à barres, diagrammes circulaires, diagrammes en nuages ​​de points, cartes thermiques avancées, etc. ) et des options interactives (par exemple zoom, masque, export, etc.). Contrairement à Chart.js, Highcharts nécessite l'utilisation d'une version commerciale autorisée ou d'une version open source à des fins non commerciales.

Lors de l'intégration de Highcharts dans une application PHP, vous devez intégrer le code JavaScript dans la page HTML, tout comme Chart.js. Encore une fois, vous devez récupérer les données de PHP et les transmettre à Highcharts pour tracer les données. Voici un exemple simple de Highcharts :

<?php
// 数据库连接信息，这里以MySQL为例
$mysqli = new mysqli('localhost', 'user', 'password', 'database');

// 查询数据
$query = "SELECT * FROM tablename";
$result = $mysqli->query($query);

// Highcharts需要的标签和数据
$categories = array();
$values = array();
while ($row = $result->fetch_assoc()) {
    $categories[] = $row['label'];
    $values[] = $row['value'];
}

// 输出JavaScript代码
echo '<div id="myChart"></div>';
echo '<script src="https://code.highcharts.com/highcharts.js"></script>';
echo '<script>';
echo 'Highcharts.chart("myChart", {';
echo '    chart: {';
echo '        type: "line"';
echo '    },';
echo '    title: {';
echo '        text: "Chart Data"';
echo '    },';
echo '    xAxis: {';
echo '        categories: ' . json_encode($categories) . '';
echo '    },';
echo '    series: [{';
echo '        name: "Data",';
echo '        data: ' . json_encode($values) . '';
echo '    }]';
echo '});';
echo '</script>';
?>

Dans l'exemple ci-dessus, nous utilisons la bibliothèque mysqli pour obtenir les données de la base de données MySQL et les convertir en étiquettes et données requises par Highcharts. Ensuite, nous utilisons la commande echo pour afficher le code JavaScript dans la page HTML. Enfin, nous créons un exemple de graphique linéaire de base à l'aide de l'API de Highcharts.

Summary

La visualisation des données est l'un des outils importants pour l'analyse des données et les informations commerciales, et Chart.js et Highcharts sont deux des bibliothèques JavaScript couramment utilisées qui peuvent être facilement mise en œuvre de la visualisation des données. PHP, en tant que langage back-end puissant, peut facilement intégrer ces bibliothèques JavaScript dans des applications existantes en utilisant sa couche d'abstraction de données et ses capacités de rendu de modèles. Dans les applications réelles, vous pouvez combiner votre propre logique métier dans ces bibliothèques pour obtenir une visualisation des données plus efficace et plus précise.

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!