Laravel中使用foreach为CanvasJS图表传数据时页面空白的解决方法

页面空白的核心原因是Blade变量未正确解析为JavaScript可识别的格式，同时可能存在循环语法错误、数据未传递到视图等问题，以下是具体修复步骤：

1. 确认控制器已将数据传递到视图 #

首先确保控制器中已经把$records变量传递给对应视图，否则视图无法获取数据：

public function yourMethodName()
{
    $records = Products::select('price')->get();
    // 将数据传递到视图，替换为你的实际视图名称
    return view('charts.product-prices', compact('records'));
}

2. 修复Blade变量的JavaScript输出 #

原代码中$prc->price未使用Blade的输出语法{{ }}，导致变量无法被解析为实际数值；同时循环结束后会多出一个逗号，引发JSON语法错误。

方法一：修正foreach循环写法 #

<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: "Simple Line Chart"
    },
    data: [{        
        type: "line",
        indexLabelFontSize: 16,
        dataPoints: [
            @foreach($records as $prc)
            { y: {{ $prc->price }} }@unless($loop->last),@endif
            @endforeach
        ]
    }]
});
chart.render();
}
</script>

• 使用{{ $prc->price }}输出价格数值，确保JavaScript能识别实际数值
• 通过@unless($loop->last),@endif避免循环最后多出逗号，破坏数组结构

方法二：用集合直接生成JSON（更简洁） #

利用Laravel集合的pluck和toJson方法，直接生成符合要求的dataPoints数组：

<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: "Simple Line Chart"
    },
    data: [{        
        type: "line",
        indexLabelFontSize: 16,
        // 直接生成JSON格式的dataPoints数组
        dataPoints: {!! $records->pluck('price')->map(fn($price) => ['y' => $price])->toJson() !!}
    }]
});
chart.render();
}
</script>

• 使用{!! !!}而非{{ }}，避免HTML转义，确保JSON格式正确
• 通过map方法把每个价格转换为{y: 价格}的结构，再转成JSON

3. 基础检查项 #

• 确保页面存在id为chartContainer的容器元素：

  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  

• 确认CanvasJS的脚本已正确引入页面（原始正常脚本可运行的话此步骤可跳过）：

  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  

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