CodeIgniter集成Chartjs图表教程

学习文章要努力，但是不要急！今天的这篇文章《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/ 目录下，然后在视图中用绝对路径加载：

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

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

$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(...) 写在