Chart.js折线图options配置失效 无法禁用网格线问题求助

你的配置不生效是因为Chart.js大版本语法不兼容，你引入的是3.5.0版本，用的却是2.x版本的配置写法，和Edge浏览器无关。

• 配置结构适配3.x语法：
  3.x版本废弃了scales.xAxes/scales.yAxes的数组包裹写法，直接使用scales.x、scales.y作为单轴配置对象；同时原gridLines配置项重命名为grid。
• 调整脚本加载顺序：
  你当前把Chart.js脚本和初始化代码放在canvas元素之前，执行js时DOM还没加载完成，document.getElementById('myChart')会返回空，也会导致配置不生效，需要把脚本移到canvas标签后面。

<!DOCTYPE html>
<html lang="en">
<body>
<div class="chart-container" style="position: relative; height:30vh; width:50vw">
    <canvas id="myChart" width="70" height="20"></canvas>
</div>
<!-- 脚本移到canvas元素之后 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
        datasets: [{
            data: [86,114,106,106,107,111,133,221,783,2478],
            borderColor: "#3e95cd",
            fill: false,
            tension: 0.1,
            label: 'Name of label'
        }] 
    },
    options: {
        responsive: true,
        scales: {
            x: {
                grid: {
                    display: false
                }   
            },
            y: {
                grid: {
                    display: false
                }   
            }
        }
    }
});
</script>
</body>
</html>

修改后即可实现x、y轴网格线隐藏的效果，其余配置只要按照3.x语法调整都可以正常生效。

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