正确路径是将chart.min.js放public/js/下并用<script src="/js/chart.min.js"></script>加载；数据需在控制器中清洗后用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/ 目录下，然后在视图中用绝对路径加载：
<script src="/js/chart.min.js"></script>
- 不要用
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(...) 写在 <script> 标签顶部，或没等 canvas 元素渲染完成就执行，报错 Canvas is null 或图表空白。
必须确保：canvas 存在 + Chart.js 已加载 + DOM 就绪。推荐写法：
<canvas id="revenueChart" width="400" height="200"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('revenueChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: <?= $chart_json ?>,
options: { responsive: true, maintainAspectRatio: false }
});
});
</script>
- 不要用
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：
<meta name="csrf-token" content="<?= csrf_hash() ?>">
，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();），安全不能只靠一层防护。
