Laravel项目中Chart.js折线图不显示问题排查请求

1. 修复JavaScript语法错误 #

你的Chart配置代码存在对象属性缩进错误与多余逗号问题，导致JS解析失败。修正后代码如下：

const salesChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'Total Production',
            data: productionValues,
            borderColor: 'blue',
            backgroundColor: 'lightblue',
            fill: false
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                type: 'time',
                time: {
                    parser: 'YYYY-MM-DD',
                    unit: 'day'
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

2. 补充时间轴适配器依赖 #

Chart.js的time类型坐标轴需要额外适配器才能解析日期，默认不内置该功能。在Chart.js脚本后引入适配库，示例使用moment.js适配器：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 新增时间适配器 -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>

3. 验证并修正数据格式 #

确保传递到前端的数据格式符合Chart.js要求：

• 控制器中把日期转换为标准YYYY-MM-DD字符串：

  $dates = $salesData->pluck('rf_date')->map(function($date) {
      return $date->format('Y-m-d');
  });
  

• 确保生产数值为纯数字类型：

  $productionValues = $salesData->pluck('total_production')->map(function($value) {
      return (int)$value;
  });
  

4. 利用浏览器控制台定位问题 #

按F12打开开发者工具，查看Console面板的报错信息，可直接定位语法错误、依赖缺失等核心问题。

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