CodeIgniter嵌入PHP后Google Chart无法绘制问题求助

问题现象 #

• 单独运行PHP业务逻辑、纯前端Google Chart demo脚本均能正常执行
• 两部分代码整合到CodeIgniter框架视图中后，图表无法正常绘制
• PHP单独运行效果参考：
• 纯前端脚本单独运行效果参考：

问题原始代码 #

<script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Month', 'Bán ra', 'Đơn hàng'],
            <?php 
            $d=getdate();
            $year=$d['year'];
            for ($i=1; $i <= 12 ; $i++) 
            {   
                $list_orrders = $this->transaction_model->order_follow_month($year, $i);
                $sum = 0;
                foreach ($list_orrders as $row_orrder) 
                {
                    $sum = $this->order_model->get_sum('qty',array('cart_id'=>$row_orrder->id));

                }
                if($i >= 1 && $i <=9)
                {
                    echo "['0".$i.'/'.$year."',".$sum.",".count($list_orrders)."],";
                }
                else
                {
                    echo "['".$i.'/'.$year."',".$sum.",".count($list_orrders)."],";
                }
            }
             ?>
            ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>

排查&修复步骤 #

1. 优先修复JS语法错误：数组末尾多余逗号
   现有PHP循环输出每一行月数据时，无论是不是最后一条都会在末尾拼接逗号，最终生成的JS数组最后一项会带多余尾逗号，部分浏览器、框架自带的严格JS解析模式会直接抛出语法错误，中断整个drawChart函数执行。
   替换原有PHP循环逻辑，用数组收集行数据后implode拼接，彻底避免尾逗号问题，同时简化月份补零的判断逻辑：

   <?php
   $d = getdate();
   $year = $d['year'];
   $chartDataRows = [];
   for ($i = 1; $i <= 12; $i++) {
       $list_orrders = $this->transaction_model->order_follow_month($year, $i);
       $sum = 0;
       foreach ($list_orrders as $row_orrder) {
           $sum = $this->order_model->get_sum('qty', ['cart_id' => $row_orrder->id]);
       }
       $monthLabel = str_pad($i, 2, '0', STR_PAD_LEFT) . '/' . $year;
       $chartDataRows[] = "['{$monthLabel}',{$sum}," . count($list_orrders) . "]";
   }
   echo implode(',', $chartDataRows);
   ?>
   

2. 检查DOM加载时序
   确认图表容器<div id="columnchart_material"></div>的位置在脚本引入/执行位置之前，如果脚本执行时容器还没被浏览器渲染，document.getElementById会返回空值，直接导致图表初始化失败。最简单的修复方式是把这段图表脚本移动到页面底部，</body>闭合标签之前再执行。

3. 排查资源加载&控制台报错
   打开浏览器F12开发者工具，切换到Console标签查看具体报错：

   • 如果提示google is not defined，说明Google Chart的JS资源加载失败，检查CI框架的CSRF规则、内容安全策略(CSP)是否拦截了外部JS资源请求，调整对应规则放行即可
   • 如果提示drawChart is not a function，说明页面中其他JS脚本存在命名冲突，把图表绘制函数改个唯一名称（比如drawSalesBarChart），同时修改setOnLoadCallback绑定的函数名即可
   • 如果提示容器相关错误，回到上一步检查DOM时序问题

4. 检查PHP输出是否异常
   在CI框架中打开页面，右键查看网页源代码，找到JS里PHP输出的数据部分，确认没有被CI的XSS过滤、模板引擎转义成HTML实体，如果输出的内容被转义了，在对应视图输出位置关闭转义规则即可。

内容的提问来源于stack exchange，提问作者learnitfrondendweb