Chart.js环形图表不显示求助（控制台无报错）

1. 确认Chart.js已正确引入 #

你的代码里没有包含Chart.js的加载脚本——这是图表无法显示最常见的原因。FiveM的Chrome子进程不会自动内置Chart.js，必须手动引入：

<!-- 在图表初始化脚本前添加Chart.js引入 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

如果是离线环境，需要将Chart.js文件放在你的资源目录中，用相对路径引入：

<script src="assets/chart.min.js"></script>

2. 修正DOM加载时机问题 #

FiveM的页面渲染机制可能存在延迟，直接在canvas标签后执行脚本可能导致无法获取到DOM元素。将代码包裹在DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', function() {
    var flagsData = {
        labels: ['Neutre', 'Veteran', 'Veteran +', 'Fiable', 'Fiable +', 'Joueur parfait', 'Dernière chance', 'Fan de sanctions', 'Peu fiable', 'Très peu fiable', 'Première fois', 'Nouveau joueur'],
        datasets: [{
            data: [0,1,4,2,0,0,2,1,4,6,3,2],
            backgroundColor: ['#89898980', '#B4ED5180', '#98D52F80', '#33E93E80', '#2BB23380', '#00630680', '#E2000080', '#C1343480', '#AF515180', '#E2616180', '#F18C0C80', '#E7B54380'],
        }]
    };

    var playersFlagsElement = document.getElementById("playersFlags");
    var donutChart = new Chart(playersFlagsElement, {
        type: 'doughnut',
        data: flagsData,
        options: {
            elements: {
                arc: {
                    borderColor: 'black',
                    borderWidth: 1
                }
            },
            responsive: true,
            plugins: {
                legend: {
                    display: false,
                }
            }
        }
    });
});

3. 修复Canvas样式问题 #

你给canvas设置了max-height: 80%，但未指定父容器高度或canvas的具体尺寸，可能导致canvas高度为0，图表无法显示。直接给canvas设置固定尺寸：

<canvas id="playersFlags" style="height: 300px; width: 100%; margin-top: 5%;"></canvas>

4. 排查FiveM环境限制 #

FiveM的Chrome子进程可能存在以下限制：

• 内容安全策略(CSP)：如果服务器设置了严格的CSP，会阻止加载外部脚本。可以在资源的__resource.lua中添加权限：

  add_ace('resource.your-resource-name', 'csp.allow_script_src', 'https://cdn.jsdelivr.net')
  

• Canvas权限：极少数情况下FiveM会限制Canvas使用，先在普通Chrome浏览器中测试你的代码，确认图表能正常显示后，再对比FiveM环境的差异。
• 性能限制：如果页面同时加载大量资源，可能导致Chart.js初始化失败，尝试简化页面内容后测试。

5. 无报错情况下的调试技巧 #

• 在控制台执行console.log(Chart)，若返回undefined，说明Chart.js未加载成功。
• 打印playersFlagsElement，确认是否获取到了DOM元素：console.log(playersFlagsElement)。
• 暂时开启图例（将legend.display设为true），排查是否存在样式遮挡问题。

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