PHP整合Chartjs统计图表教程

本文详解了在CodeIgniter（尤其是版本4）中无缝集成Chart.js实现动态统计图表的完整实践路径，涵盖从正确引入chart.min.js到安全传递中文与数值数据、精准初始化图表实例，再到处理AJAX交互时绕过CSRF保护等关键痛点，每一步都直击开发者常踩的坑——如路径错误导致404、JSON编码不当引发乱码或图表异常、DOM未就绪造成空白渲染、CSRF拦截致使请求失败等，提供清晰、可复用、符合框架最佳实践的解决方案，助你快速构建美观、稳定、响应式的后台数据可视化界面。

CodeIgniter 4 中加载 Chart.js 的正确路径写法

Chart.js 不是 CodeIgniter 自带的库，必须手动引入。很多人把 chart.min.js 放进 app/Views 或错误地用相对路径引用，导致 404 或控制台报 Chart is not defined。

正确做法是将 chart.min.js（推荐从 CDN 获取）放在 public/js/ 目录下，然后在视图中用绝对路径加载：

• 不要用 base_url('js/chart.min.js') —— CodeIgniter 4 默认不启用 url_helper，需先 helper('url')
• 不要用 ./js/ 或 ../js/ —— 路径易随控制器层级变化而失效
• 若用 Webpack/Vite 等构建工具，应统一走 public/dist/ 并配好 asset 版本哈希

从 CodeIgniter 模型传数据到 Chart.js 的安全格式

Chart.js 只认标准 JSON 数组，但直接 json_encode($data) 容易出问题：比如数据库字段含中文、时间戳未转字符串、数值为 null 导致 JS 解析失败。

在控制器中准备图表数据时，应做显式清洗和结构对齐：

$data = $this->StatsModel->getMonthlyRevenue(); // 假设返回 [['month' => 'Jan', 'amount' => 12500], ...]
$chart_data = [
    'labels'   => array_column($data, 'month'),
    'datasets' => [[
        'label' => 'Revenue (¥)',
        'data'  => array_column($data, 'amount'),
        'borderColor' => '#36a2eb',
        'fill' => false,
    ]]
];
$data['chart_json'] = json_encode($chart_data, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK);

• JSON_UNESCAPED_UNICODE 防止中文变成 \uXXXX，避免标签显示乱码
• JSON_NUMERIC_CHECK 确保数字不被转成字符串（否则柱状图高度异常）
• 永远不要在视图里用 json_encode() —— 易 XSS，且控制器已该承担数据预处理职责

在 View 中初始化 Chart.js 实例的时机与 DOM 绑定

常见错误是把 new Chart(...) 写在

• 不要用 window.onload —— 可能比 Chart.js 加载还早，尤其 CDN 异步加载时
• 不要省略 getContext('2d') —— Chart.js 3+ 强制要求，否则静默失败
• canvas 必须有明确 id，不能只靠 class 或位置索引

动态更新图表时绕过 CodeIgniter CSRF 保护的坑