Laravel 9.x集成Chart.js 3.9.1无图表显示且无报错求助

使用环境 #

• Chart JS 3.9.1
• Laravel 9.x

问题描述 #

查找了大量不同版本的相关问题均无帮助，已检查版本、官方文档，也确认页面源码中数据存在，但页面无报错、无图表显示，完全没有反应。

Blade文件代码 #

<div>
    <canvas id="item-listing-data" width="400" height="400"></canvas>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx    = document.getElementById('item-listing-data').getContext('2d');

        const saleDataChart = new Chart(ctx, {
            type: 'line',
            labels: @json($saleData['labels']),
            datasets: [{
                label: 'Sale Data',
                data: @json($saleData['data']),
                fill: false,
                borderColor: 'rgb(34, 67, 156)',
                tension: 0.1
            }]
        });
    </script>
@endpush

页面生成的JS代码 #

const ctx    = document.getElementById('item-listing-data');

const saleDataChart = new Chart(ctx, {
    type: 'line',
    labels: ["Mon Aug 2022 14:08:13"],
    datasets: [{
        label: 'Sale Data',
        data: [10000],
        fill: false,
        borderColor: 'rgb(34, 67, 156)',
        tension: 0.1
    }]
});

已做排查 #

• 严格遵循官方文档配置
• 检查代码无明显语法或逻辑问题
• 确认使用的Chart.js版本正确

即使将labels和data替换为[1,2,3]，仍然没有任何反应。

解决思路 #

• 修复上下文获取：确保传入Chart构造函数的是2D上下文，将生成代码中的const ctx = document.getElementById('item-listing-data');改回const ctx = document.getElementById('item-listing-data').getContext('2d');，Chart.js 3.x明确需要2D上下文作为初始化参数。
• 确保脚本加载顺序：确认布局文件中的@stack('scripts')放置在页面</body>标签前，且Chart.js的脚本在自定义初始化脚本之前加载完成。
• 包裹DOM加载事件：将图表初始化代码放在DOMContentLoaded事件中，避免canvas元素未渲染时执行脚本：

  document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('item-listing-data').getContext('2d');
      const saleDataChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: @json($saleData['labels']),
              datasets: [{
                  label: 'Sale Data',
                  data: @json($saleData['data']),
                  fill: false,
                  borderColor: 'rgb(34, 67, 156)',
                  tension: 0.1
              }]
          }
      });
  });
  

• 检查控制台隐藏报错：打开浏览器开发者工具（F12），切换到Console标签，勾选所有日志级别（Verbose、Info等），刷新页面查看是否有被忽略的错误，比如Chart.js未加载、变量冲突等。
• 排查样式问题：检查canvas元素或其父元素的CSS样式，确认没有display: none、opacity: 0或overflow: hidden等导致图表不可见的设置。
• 测试最简代码：创建空白页面，仅保留canvas和Chart.js初始化代码，排除Laravel布局或其他脚本的干扰，验证Chart.js本身是否能正常渲染。
• 排查脚本冲突：暂时移除页面中其他第三方脚本（如jQuery、其他UI库），测试图表是否能正常显示，排除脚本冲突问题。

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