php用CodeIgniter做统计图表_整合Chartjs示例教程【技巧】

正确路径是将chart.min.js放public/js/下并用加载；数据需在控制器中清洗后用json_UNESCAPED_UNICODE和JSON_NUMERIC_CHECK编码；图表初始化须等dom就绪且canvas存在；ajax交互需处理csrf Token或路由排除。

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 解析失败。

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

立即学习“PHP免费学习笔记（深入）”；

$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(...) 写在 标签顶部，或没等 canvas 元素渲染完成就执行，报错 Canvas is null 或图表空白。

必须确保：canvas 存在 + Chart.js 已加载 + DOM 就绪。推荐写法：

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

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

如果要做“按月份切换”“筛选类别”等交互，需用 AJAX 重新拉取数据。但 CodeIgniter 默认开启 CSRF，fetch() 或 $.ajax() 会因缺少 X-CSRF-TOKEN 被拦截，返回 403 或空响应。

两种稳妥解法：

• 在页面头部输出 token：

  ，AJAX 请求头中带上：headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}

• 更轻量：在路由配置中排除统计接口（如 $routes->post('api/chart-data', 'Stats::fetch')->setOptions(['csrf' => false]);），但仅限无写操作的只读接口

注意：即使关闭 CSRF，也仍需在控制器中校验用户权限（如 if (! auth()->user()->can('view_reports')) show_403();），安全不能只靠一层防护。