如何用PHP项目实现趋势图？

wen java案例 2026-07-23 2

本文目录导读：

如何用PHP项目实现趋势图？

方式一：使用第三方图表库（推荐，最常用）
方式二：纯服务器端生成图片（GD库 / 图片库）
方式三：纯PHP原生画图（GD库手绘）
数据库查询示例（MySQL）

在PHP项目中实现趋势图，主要有三种主流方式,从简单到复杂依次是：

使用第三方图表库（推荐，最常用）

这是最流行、最节省开发时间的方式，通过在前端调用JavaScript图表库,PHP只负责输出JSON格式的数据。

推荐库：

Chart.js：轻量、简单、默认美观（本文示例用此）
ECharts（百度）：功能强大、交互丰富、适合复杂图表（国内用户多）
Highcharts：商业库，但非商业免费，兼容性好

实现步骤（以 Chart.js 为例）：

Step 1：PHP 后端准备数据（趋势图数据通常是时间序列）

<?php
// trend_data.php
header('Content-Type: application/json');
// 模拟从数据库获取过去7天的销售额数据
$trendData = [
    'labels' => ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07'],
    'data'   => [120, 185, 150, 210, 195, 230, 280]
];
// 实际场景中可能从数据库查询：
// $sql = "SELECT DATE(order_time) as date, SUM(amount) as total FROM orders GROUP BY DATE(order_time) ORDER BY date DESC LIMIT 7";
// ... 执行查询并组装成上述格式
echo json_encode($trendData);

Step 2：HTML + JS 前端接收并渲染（index.php）

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="trendChart" width="400" height="200"></canvas>
    <script>
        // 通过 fetch 调用 PHP 接口
        fetch('trend_data.php')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('trendChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line', // 折线图（趋势图常用）
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: '销售额',
                            data: data.data,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1 // 曲线平滑度
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            });
    </script>
</body>
</html>

纯服务器端生成图片（GD库 / 图片库）

适合需要生成静态图片（如邮件附件、PDF报告）,前端无需JavaScript的场景。

使用 pChart / JpGraph（推荐 JpGraph，更成熟）

<?php
require_once 'jpgraph/jpgraph.php';
require_once 'jpgraph/jpgraph_line.php';
// 准备数据
$data = [120, 185, 150, 210, 195, 230, 280];
$labels = ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07'];
// 创建画布
$graph = new Graph(600, 300);
$graph->SetScale('textlin');
$graph->xaxis->SetTickLabels($labels);
// 创建折线图
$lineplot = new LinePlot($data);
$lineplot->SetColor('blue');
$graph->Add($lineplot);
// 输出图片
$graph->Stroke();

纯PHP原生画图（GD库手绘）

不推荐,除非极度简单且不能依赖任何外部库。

<?php
header('Content-Type: image/png');
$width = 500; $height = 300;
$img = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($img, 255,255,255);
$black = imagecolorallocate($img, 0,0,0);
$blue  = imagecolorallocate($img, 0,0,255);
// 画坐标轴、根据数据画点连线... 代码较复杂
// ...
imagepng($img);
imagedestroy($img);

方式	适用场景	复杂度	交互性
前端图表库（Chart.js/ECharts）	✅ 90%的场景	低-中	高（可缩放、悬停提示）
服务器端画图（JpGraph）	生成PDF/邮件图	中	无
原生GD库	极特殊环境	高	无

数据库查询示例（MySQL）

实际项目中最常见的做法是把数据库数据转为图表数据：

// 从 orders 表查询最近30天每日订单数量
$stmt = $pdo->query("
    SELECT 
        DATE(created_at) as date,
        COUNT(*) as count
    FROM orders
    WHERE created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)
    GROUP BY DATE(created_at)
    ORDER BY date ASC
");
$dates = [];
$counts = [];
while ($row = $stmt->fetch()) {
    $dates[] = $row['date'];
    $counts[] = (int)$row['count'];
}
echo json_encode(['labels' => $dates, 'data' => $counts]);

最佳实践： 选择方案一（前端图表库），PHP只做接口输出JSON，前后端分离,开发效率最高。